• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS divs formatieren

Inselbewohner

Neues Mitglied
Hallo zusammen,

ich habe gerade angefangen eine Website zu bauen und stehe vor folgendem Problem.
Ich habe ein Header div mit zweimal dem gleichen Bild und darunter habe
ich ein Content div gemacht und in dieses einen linken Rand gelegt. Nun möchte ich daneben eine Navigationsleiste einfügen.

Ich möchte nun erreichen, dass die Navigationsleiste sich dem Headerbereich anpasst. Ich habe mir schon überlegt, dass man sich vllt irgendwie die Pixelweite des Bildschirms holen kann und des dann als Breite angibt. (1.Idee als Java Programmierer) aber verträgt sich css mit Java Script. Des kann ich mir net vorstellen und anders wüsste ich net, wie man sich die aktuelle Bildschirmbreite holen kann.

HTML:
<style type="text/css">
<!--
#header {
    background-color: #3CC;
    height: 120px;
    position: relative;
    background-image: url(rauten3.jpg);
    background-repeat: repeat;
}

#logo {
    background-color: #639;
    height: 120px;
    width: 175px;
    position: absolute;
    right: 0px;
    background-image: url(bayern120.jpg);
    background-repeat: no-repeat;
    top: 0px;
}
#content {
    background-color: #0F0;
    height: 500px;
    position: relative;
}
#linkerRand {
    height: 500px;
    width: 175px;
    background-image: url(rauten3.jpg);
    position: relative;
    bottom: 0px;
    float: none;
}
#navigation {
    background-color: #FFF;
    height: 48px;
    position: absolute;
    width: 703px;
    left: 178px;
    top: 0px;
}
#logoLinks {
    background-image: url(bayern120.jpg);
    height: 120px;
    width: 175px;
}
-->
</style>
</head>

<body>
<div id="header">
  <div id="logoLinks"></div>
  <div id="logo"></div>
</div>

<div id="content">
 
 
  <div id="navigation">frgrf  </div>
 <div id="linkerRand"> </div> 
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Verzichte generell auf position: relative und position: absolute weil beides absolut unnötig ist und nur zu Problemen im Zusammenhang mit der Viewportgröße führt.

Positioniere dafür mit float- und margin-Angaben.

Verzichte ferner auf die Vielzahl deiner Divs, weil man davon die Divitis bekommen kann. Verwende sie lediglich zur Grobstrukturierung bzw. Gruppierung deiner Seite. Du brauchst nicht für jedes Bild oder Logo einen einzelnen DIV. Das geht sogar ganz ohne Div bzw. du kannst in einen Div viele Dinge gleichzeitig packen.
 
Inselbewohner:
Was prm meint ist, dass du z.B <p> mit einem Hintergrund ausstatten kannst. Genauso kannst du einen Rahmen um <p> machen.

Kleines Beispiel:

HTML:
<p class="test">Ich bin ein Text</p>

CSS:
Code:
.test
{
 background: #ff0000;
 margin: 10px 20px 10px 20px;
 border: 2px solid #00ff00;
}

So braucht man kein <div> zu nehmen.
 
Zurück
Oben