Anfänger braucht Hilfe für css und Div

forum-hilfenutzer

Hallo Freunde. Ich bin ein absoluter Anfänger bzgl. css und html und habe mich durch die ersten Befehle "durchgewurschtelt".

Ich bin nun dabei, mir eine Seite selbst aufzubauen und habe die ersten Schritte hinter mir.

Ich habe mir vor der Erstellung einen Rohentwurf auf einem Blatt Papier gezeichnet und dann anhand von befehlsreferenzen und einigen Tutorials versucht, den Anfang zu machen.

Allerdings stimmt da etwas nicht.

Ich habe eigentlich folgendes vor:

Ich möchte eine Seite haben, wo zunächst einmal 3 Divs nebeneinander sind.
Das linke Div auf der Webseite mit dem Namen "mainnav", soll das Menü mit einem entsprechenden Hintergrund haben und immer ganz links oben im Div "container" beginnen und bis zum unteren Ende des Containerdivs reichen und dann 167 Pixel breit sein.

Das zweite Div ist ein mittlerer Teil des oberen Webseitenbereiches, mit dem Namen "header2", der ebenfalls ganz oben, jedoch rechts vom 1. Div, also dem Menüdiv, anfangen soll.

Das 3. und letzte Div ist ein reines Logodiv mit dem Namen "header1", indem sich das Grafiklogo befindet, welches rechts auf der Webseite erscheinen und welches nach unten in die Webseite hineinragen soll.

Leider funktioniert es bisher nur fast:(.

Die Problematik, die ich nun habe, ist die:

Ich bekomme es nicht hin, dass das mittlere Div, also das Überschriftendiv, sich rechts vom Menüdiv anordnet. Obwohl ich mehrere Versuche gemacht habe, die Breite zu verändern, ändert sich nichts daran, dass das DIV immer noch bis an den linken Rand geht. Dabei verschwindet natürlich noch ein Teil der Überschrift unter dem Menü.

Nun habe ich folgendes css dazu erstellt:

EDIT:

Um Euch unnötiges lesen zu ersparen, habe ich den Code hier gelöscht und in der veränderten Version weiter unten neu aufgeführt.

EDIT ENDE:

Wer kann mir da denn von Euch Experten helfen?

Schöne Grüße und schon mal ein dickes Dankeschön.

threadi

Verzichte auf die absolute Positionierung von #mainnav und setzte #header2 auf "float: right;".

forum-hilfenutzer

Das funktioniert leider nicht. Bei Deiner Variante wird der header 2 dann unterhalb von dem Div "Logo" platziert und nicht in der Mitte zwischen dem Menü und dem Logo.
Oder kommt es auch noch darauf an, wo man den "float-Befehl" hinsetzt?

threadi

Nein, die Reihenfolge der Eigenschaften innerhalb eines Selektors ist egal.

Ich glaube ich habe deinen Text falsch verstehen. Mit float: left sollte es ggfs. passen. Probier es aus. Dein Hauptproblem oben war die absolute Positionierung. Dadurch hast Du das mainnav aus dem Fluss genommen und konntest es nicht mehr in Relation zu den anderen setzen. Verzichte auf sowas.

forum-hilfenutzer

Geht auch nicht. Jetzt wird das Menüdiv unterhalb des Headerdivs angezeigt.

forum-hilfenutzer

Ich habe den css Code und den html Code mal verändert. Es sieht nun so aus, dass rechts nun das Grafiklogo steht, links davon das Menüdiv und unter dem Grafiklogo nun das Headerdiv, welches noch zusätzlich vom Menüdiv überlagert wird.

Anbei nun der css und der html Code.

Hier der CSS Code:

Code

body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
background-color: #000438;
}


#container
{
margin: 1em auto;
width: 920px;
height:740px;


background-color: #000000;
border: 5px solid #858585;
}


#mainnav
{
float:right;
z-index: 3;
left: 167px;
top: 18px;
height: 100%;
width: 17%;
background-image: url(Menuehintergrund.jpg);
background-repeat: no-repeat;
font-size: 15px;
font-style: italic;
color:#FFFF10;
margin: 2px;
padding: 2px;


}


#header1
{
float:right;
z-index: 1;
width: 217px;
height: 456px;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #000000;




}


#header2
{
float:right;
z-index: 2;
height: 24%;
background-color: #000000;
font-size: 27px;
font-style: italic;
color: #FFFF10;
margin: 0;
padding: 0;
clear:right;
}

Alles anzeigen

Und nun der html Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index,follow">
<meta name="language" content="deutsch, de">
<title>Der zzzzzzzzzz</title>
<meta name="keywords" content="a,b,c,d ">
<meta name="description" content="testbeschreibung">
<link rel="stylesheet" href="stylesheet1.css" media="screen">
<meta name="msnbot" content="all">
<meta name="city" content="xx">
<meta name="country" content="Germany">
<meta name="zipcode" content="55555"></head>
<div id="container">
        <div id="header1">
<img src="test.gif" width="100%" height="100%" alt="test" ></div>
<div id="header2" title="Das ist eine Überschrift für die  Website" >
Überschrift </div>
        <div id="mainnav">


<li><a href="shows.html">Die Dienstleistung</a></li> <br> <br>
<li><a href="referenzen_pdf.html">Referenzen</a></li>  <br><br>
<li><a href="videos.html">Videos</a></li> <br> <br>
<li><a href="pressefotos.html">Pressefotos</a></li> <br>   <br>
<li><a href="pressemappe_pdf.html">Presseberichte</a></li> <br> <br>
<li><a href="kundenstimmen.html">Kundenstimmen</a></li> <br> <br>
<li><a href="kontaktformular.php">Kontakt</a></li> <br>   <br>
<li><a href="newsletter_abonnieren.html">Newsletter</a></li>  <br>  <br>
<li><a href="http://www.twitter.com/xx"TARGET="_blank">Auf Twitter folgen</a> </li> <br>  <br>
<li><a href="kooperation.html">Kooperationspartner</a></li> <br>  <br>
<li><a href="impressum.html">Impressum</a></li>  </div> <br>
<!--<div id="footer">Test</div> -->
</div>
</body>
</html>

Alles anzeigen

Ich komme einfach nicht weiter. Vielleicht sieht noch jemand einen Fehler im css Code oder im html Code. Bin für jeden Tipp dankbar.

Elroy

Hallo.

An deinem Code ist so einiges falsch.
Ich habe mal einige Änderunden vorgenommen. Das dürfte deinen Wünschen am nächsten kommen.
Falls noch Fragen sind Fragen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index,follow">
<meta name="language" content="deutsch, de">
<title>Der zzzzzzzzzz</title>
<meta name="keywords" content="a,b,c,d ">
<meta name="description" content="testbeschreibung">
<link rel="stylesheet" href="stylesheet1.css" media="screen">
<meta name="msnbot" content="all">
<meta name="city" content="xx">
<meta name="country" content="Germany">
<meta name="zipcode" content="55555">
</head>
<body>
<div id="container">


        <div id="mainnav">


<li><a href="shows.html">Die Dienstleistung</a></li>
<li><a href="referenzen_pdf.html">Referenzen</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="pressefotos.html">Pressefotos</a></li>
<li><a href="pressemappe_pdf.html">Presseberichte</a></li>
<li><a href="kundenstimmen.html">Kundenstimmen</a></li>
<li><a href="kontaktformular.php">Kontakt</a></li>
<li><a href="newsletter_abonnieren.html">Newsletter</a></li>
<li><a href="http://www.twitter.com/xx"TARGET="_blank">Auf Twitter folgen</a> </li>
<li><a href="kooperation.html">Kooperationspartner</a></li>
<li><a href="impressum.html">Impressum</a></li>  </div>
<div id="header1">
<img src="test.gif" width="100%" height="100%" alt="test" ></div>
<div id="header2" title="Das ist eine Überschrift für die  Website" >
Überschrift </div>
<!--<div id="footer">Test</div> -->
</div>
</body>
</html>

Alles anzeigen

CSS

Code

body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
background-color: #000438;
}


#container
{
margin: 1em auto;
width: 920px;
height:740px;


background-color: #000000;
border: 5px solid #858585;
}


#mainnav
{
float:left;
height: 100%;
width: 167px;
background-image: url(Menuehintergrund.jpg);
background-repeat: no-repeat;
font-size: 15px;
font-style: italic;
color:#FFFF10;
margin: 2px;
padding: 2px;


}


#header1
{
float: left;
width: 217px;
height: 456px;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #000000;




}


#header2
{
height: 24%;
background-color: #000000;
font-size: 27px;
font-style: italic;
color: #FFFF10;
margin: 0;
padding: 0;
}

Alles anzeigen

Du musst natürlich noch die Grössen anpassen.

Gruss
Elroy

forum-hilfenutzer

Zitat

An deinem Code ist so einiges falsch.
Ich habe mal einige Änderunden vorgenommen. Das dürfte deinen Wünschen am nächsten kommen.
Falls noch Fragen sind Fragen.

Merkwürdigerweise geht das so nicht. Ich muss aber gestehen, dass ich, da ich zwischenzeitlich noch nicht wieder hier hineingesehen habe, nach Recherchen den Code selbst noch einmal verändert. Ich denke, ich habe es mittlerweile ganz gut hinbekommen, dass ich die Seite so aufgebaut bekomme, wie ich es vom Design her möchte.

Aber vielen lieben Dank für die Hilfe, die für mich schon jetzt mehr als wertvoll war.

Der html code ist nun auch validiert und ist laut "validator.w3.org - Check" jetzt fehlerfrei und damit mit den aktuellen Standards konform.

Ob der Stylsheet so ok ist, vermag ich nicht zu sagen, da ich dafür keinen Validator kenne.

Anbei mal nun der komplett überarbeitete stylesheetcode und der dazugehörige html Code.

Code

body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
background-color: #000000;
}
a:link {
  text-decoration: none;
  color: #FFFF10;


}


a:hover {
background-color:#000000;
font-color : #ffff00;
}


a:visited {
color : #ffffff;
}


#container
{
margin: 1em auto;
width: 920px;
height:740px;


background-color: #000000;
border: 2px solid #A23626;
}


#menue
{


float:right;
z-index: 4;
height: 95%;
width: 17%;
background-image: url(Menuehintergrund.jpg);
background-repeat: no-repeat;
font-size: 15px;
font-style: italic;
color:#FFFF10;
margin: 2px;
padding: 2px;
border: 2px solid #A23625;


}


#right
{
float:right;
z-index: 2;
width: 217px;
height: 456px;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #000000;




}


#mitte
{
float:right;
z-index: 4;
height: 15%;
width: 56%;
background-color: #000000;
font-size: 27px;
font-style: italic;
text-align:right;
color: #FFFF10;
margin: 0px;
padding: 0px;
border: 5px solid #000000;


}


#seiteninhalt
 {
float:right;
position:absolute;
top:150px;
left:330px;
z-index: 0;
height: 50%;
width: 40%;
background-color: #000000;
font-size: 14px;
font-style: italic;
text-align: left;
text-indent: 30px;
line-height: 25px;
overflow: scroll;
color: #A23626;
margin: 2px;
padding: 2px;
border: 5px solid #FFFFFF;
clear:left;
}


#footer
{


height: 2%
width: 100%;
background-color: #A23626;
text-align:center;


}

Alles anzeigen

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index,follow">
<meta name="language" content="deutsch, de">
<title>Der Zauberkünstler Robert Marteau. Ein Meister perfekter Unterhaltung!</title>
<meta name="keywords" content="Zauberkünstler, NRW, Entertainer, Tisch, Bühnen, Messe, Robert Marteau, Kulturevent, mental ">
<meta name="description" content="Der Zauberkünstler Robert Marteau ist ein wahrer Meister perfekter zauberhafter und mentaler Unterhaltung.">
<link rel="stylesheet" href="stylesheet3.css" media="screen">
<meta name="msnbot" content="all">
<meta name="city" content="Attendorn">
<meta name="country" content="Germany">
<meta name="zipcode" content="57439"></head>
<div id="container">
        <div id="right">
<img src="Zauberkuenstler_Robert_Marteau_mit_Glaskugel.gif" width="100%" height="100%" alt="Zauberkünstler Robert Marteau" ></div>


<div id="seiteninhalt">
Robert Marteau ist in der Tat ein wahrer Meister perfekter Unterhaltung. Von der ersten bis zur letzten Minute zelebriert er
höchst interessant, unterhaltsam und fesselnd, seine äußerst verblüffenden und täuschenden Shows.<p>
Der erstklassige und erfahrene Zauberkünstler aus NRW ist bestimmt auch für Sie garantiert der richtige Entertainer und ein
äußerst kompetenter Partner für Ihr Anliegen, Ihre Veranstaltung professionell mit zu gestalten.<br>
Ob am Tisch, auf Bühnen, während der Messe oder Hausmesse, für den besonderen Kulturevent, Firma oder einfach als...
"Privatzauberkünstler"?!<p>
Gerne wird Robert Marteau auch für Sie veranstaltungsspezifisch kreativ und effektiv tätig. So entwickelte er beispielsweise
für die Leichtathletik EM spezielle Kunststücke, mit denen er die VIPs themenorientiert und glänzend unterhielt, unter
anderem den Kugelstoßer Ralf Bartels.<p>
Die erstklassigen Referenzen von Robert Marteau sprechen für sich selbst. Schauen Sie sich diese doch einmal im entsprechenden
Menüpunkt an. Dort finden Sie entsprechende PDF Dateien zum Download. <br>
Wenn Sie also mehr als unterhalten werden wollen, dann kommen Sie an Robert Marteau nicht vorbei.
</div>
<div id="mitte" title="Zauberkünstler Robert Marteau, Hauptseite." >
  Der Zauberkünstler Robert Marteau.<br>Ein Meister perfekter<br> Unterhaltung! </div>
<div id="menue"> <br> <br><br> <br>
<ul>
<li><a href="shows.html">Die Shows</a><br><br></li>
<li><a href="referenzen_pdf.html">Referenzen</a><br><br></li>
<li><a href="videos.html">Videos</a><br><br></li>
<li><a href="pressefotos.html">Pressefotos</a><br><br></li>
<li><a href="pressemappe_pdf.html">Presseberichte</a><br><br></li>
<li><a href="kundenstimmen.html">Kundenstimmen</a><br><br></li>
<li><a href="kontaktformular.php">Kontakt</a><br><br></li>
<li><a href="newsletter_abonnieren.html">Newsletter</a><br><br></li>
<li><a href="http://www.twitter.com/ZaubererMarteau"TARGET="_blank">Auf Twitter folgen</a><br><br> </li>
<li><a href="kooperation.html">Kooperationspartner</a><br><br></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>


</div>  <!--DIV Menü ende-->
 <div id="footer"></div>
</div> <!-- Div Container ende-->




</body>




</html>

Alles anzeigen

Nun sind jedoch zwei weitere Probleme aufgetaucht, welche ich derzeit noch nicht bewältigt bekomme.:-(

1. In den 3 Browsern, opera 10.63, Firefox 3,6.12 und den IE 8,06, die ich als Testbrowser nutze, wird im Firefox und dem IE die Seite jeweils anders angezeigt. Nicht viel, nur eine Verschiebung des "Inhalts-Div" gegenüber dem Opera. Ich weiß aber nicht, woran das liegt und frage mich, wie kann ich die Formatierung so ändern, dass die Seite in allen 3 Browsern identisch aussieht.

2. Ein Footer, der eigentlich, wie es der Name schon sagt, untern auf der Webseite erscheinen soll, erscheint gar nicht. Offenbar sehe ich den Wald vor lauter Bäumen nicht mehr.

Ich hoffe, ich kann da wieder auf Euer Fachwissen zurückgreifen.

Vielen lieben Dank.

Robert

Elroy

Zitat von forum-hilfenutzer

Der html code ist nun auch validiert und ist laut "validator.w3.org - Check" jetzt fehlerfrei und damit mit den aktuellen Standards konform.

Dann solltest du diesen Code auch hier posten.
In dem Code denn du postest wird kein Body geöffnet und das wird vom Validator garantiert als Fehler angezeigt.

Die restlichen Antworten hast du ja schon im anderen Forum erhalten.

Gruss
Elroy

threadi

Nach HTML 4 hast Du aber mit Sicherheit keinen validen HTML-Code. Besonders das fehlende <body> dürfte ein eindeutiger Fehler sein.

Was für eine "Verschiebung" gibt es denn in den Browsern? Kannst Du das bitte noch ergänzen?

Und der Footer hat keinen Inhalt - wie sollte er dargestellt werden? Mach mal ein geschütztes Leerzeichen rein.

forum-hilfenutzer

Oh, ich wollte da kein Doppelposting machen, sondern einfach nur durch unterschiedliche Foren eine größere Know How Quelle anzapfen. Wenn nun die User alle die gleichen sind, dann macht es keinen Sinn, die Fragen weiterhin zu posten.
Ich wäre da über eine Info dankbar, falls die Postings nicht gewünscht sind.

Schöne Grüße

Robert

forum-hilfenutzer

Es ist so, dass ich gerne mit dem Scrollfenster eine Überlappung hätte, die auch im Opera richtig angezeigt wird. Im IE und Firefox ist die gewünschte Überlappung jedoch nicht zu sehen. In so fern wäre es schon eine Fehldarstellung, entweder im Opera oder in den beiden anderen Browsern, die es zu beseitigen gilt.

Mann, was bin ich ein "Schussel". Ich habe jetzt einmal einen Text als Inhalt in den Footer gegeben.
Nun wird der Footer dargestellt, jedoch scheint er den kompletten Hintergrund auszufüllen, obwohl ich die Höhe nur auf 2% eingestellt habe.
Wenn er nun nur noch im unteren Bereich der Webseite und auch in entsprechender Höhe angezeigt würde, dann wäre ich schon einmal zufrieden.

Tja, und die Überlappung wäre auch schön.
Ansonsten habe ich den kompletten html Code auf der Seite validator.w3.org validieren lassen und er wurde one Fehler validiert. Er wurde trotz des fehlenden Befehls <body> als richtig erkannt.

Was den fehlenden Body betrifft, so habe ich ihn nun berichtigt. Danke für den Hinweis.
Soll ich den Code denn noch einmal einkopieren?

Tags