✔ Proleme bei div - Elementen

Status
Nicht offen für weitere Antworten.
B

blubbbla

Erfahrenes Mitglied
Ich brauche dringend eure Hilfe

Also ich brauche einen Aufbau einer html - Seite mit CSS wie auf: http://blubbbla.bl.funpic.de/aufbau.gif

-> Breite für 1024 bildschirmauflösung.

So jetzt hab ich schon mal auf: http://blubbbla.bl.funpic.de/
schon mal angefangen. hier das stylesheet: http://blubbbla.bl.funpic.de/style.css

Nun zu meinem Problem: wie bekomme ich den Suchen - Bereich da zwischen (wie auf dem Bild) ? Ich hab diesen Bereich zwar schon dazsichen bekommen, aber im IE rutscht nun der Content - Bereich irgendwo anders rum und ich möchte auch, dass der U. - Bereich hoch bis zur Suche geht und nicht darunter anfängt (siehe Bild).
 
Hi,

so sieht mein Lösungsvorschlag aus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>Untitled</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrapper">
     <div class="header">header</div>
     <div id="leftCol">
          <div class="search">suche</div>
          <div class="categories">Kategorien</div>
          <div class="content">content</div>
     </div>
     <div id="rightCol">
          <div class="u_content">u . - bereich</div>
     </div>
     <div class="footer">Footer</div>
</div>

</body>
</html>
Code: 
html,body{
        margin:0;
        padding:0;
}

#wrapper {
        width: 1024px;
        margin: 0 auto;
}

.header{
        padding: 5px;
        border: 1px solid black;
        height: 80px;
        background-color: Aqua;
        margin-bottom:10px;
}

#leftCol {
        width: 839px;
        float: left;
}

#rightCol {
        width: 180px;
        float: right;
}

.categories{
        position: relative;
        top: 5px;
        float: left;
        padding: 5px;
        border: 1px solid black;
        width: 170px;
        height: 400px;
        background-color: Gray;
}

.content{
        position: relative;
        top: 5px;
        height: 400px;
        padding: 5px;
        margin: 0 0 0 187px !important;
        margin: 0 0 0 184px;
        border: 1px solid black;
        background-color: Green;
}

.u_content{
        background-color: Gray;
        height: 423px;
        width: 168px;
        padding: 5px;
        border: 1px solid black;
}

.footer{
        position: relative;
        padding: 5px;
        border: 1px solid black;
        height: 80px;
        background-color: Aqua;
        top: 10px;
        clear:both;
}

.search{
        background-color: Yellow;
}
 
Oh super. Danke.

Ich hab noch nie genau die realtive Pos. verstanden - was hat das jetzt in meinem Fall bewirkt?

Allerdings wollte ich nun im body einen Innenabstand von 10 px machen. Das funktioniert überall bis auf rechts und so mus ich auch in jedem Browser ein Stück nach rechts scrollen.
 
Okay, kleine Fahrplanänderung :-)

Wir tauschen die Reihenfolge der beiden DIVs #leftCol und #rightCol im HTML-Code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>Untitled</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="wrapper">
     <div class="header">header</div>
     <div id="rightCol">
          <div class="u_content">u . - bereich</div>
     </div>
     <div id="leftCol">
          <div class="search">suche</div>
          <div class="categories">Kategorien</div>
          <div class="content">content</div>
     </div>
     <div class="footer">Footer</div>
</div>
</body>
</html>
Und ersetzen diese Selektoren

Code: 
#wrapper {
        width: 1024px;
        margin: 0 auto;
}

#leftCol {
        width: 839px;
        float: left;
}
folgendermaßen

Code: 
#wrapper {
        width: 100%;
}

#leftCol {
        margin-right: 185px !important;
        margin-right: 182px;
}
 
Ok geht :)

Aber jetzt musst du mir trotzdem nochmal erklären, was es mit der Positionierung auf sich hat und warum du das jetzt umgeändert hast?!

Dann bin ich zufrieden :rolleyes:
 
Die relativen Positionsangaben habe ich nur gesetzt, damit sich der gewünschte vertikale Abstand zwischen den DIVs ergibt ;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück