Problem mit CSS div gebastel

Status
Nicht offen für weitere Antworten.

TeQs

Mitglied
Hallo,
ich habe ein kleines, etwas komplexeres, div Box-Modell erstellt. Das problem ist jedoch, das die obere Divspalte, mit der Hauptdivspalte nicht übereinstimmt, was sie eigentlich in der Breite tun sollte. ich hoffe ich hab mcih halbwegs klar ausgedrückt. Hier die Codes:
Code:
div#main              { width: 850px;
                        height: 100%;

          
                      }
div.sideblurleft      { width: 5px;
                        height: 400px;
                        float: left;
                        background-image: url(./pics/sideblur.png);
                      }
div.sideblurright     { width: 5px;
                        height: 400px;
                        float: left;
                        background-image: url(./pics/sideblurright.png);
                      }
div.klein             { width: 120px;
                        height: 400px;
                        background-color: #AAAAAA;
                        float: left;  
                      }
div#steckbrief        { width: 435px;
                        height: 400px;
                        background-color: #AAAAAA;
                        float: left;
                      }
div.midde             { width: 50px;
                        height: 400px;
                        background-color: #cccc99;
                        float: left;
                        margin-top: 175px;
                      }
body                  { background-color: #CCCC99;
                      }
div.spaceside         { width: 5px;
                        height: 5px;
                        float: left;
                      }
div.topblur           { width: 120px;
                        height: 5px;
                        background-image: url(./pics/sideblurtop.png);
                        float: left;
                      }
div.space             { width: 60px
                        height: 5px;
                        float: left;
                      }
              
div#topblur1          { width: 435px;
                        height: 5px;
                        background-image: url(./pics/sideblurtop.png);
                        background-repeat:repeat-x;
                        float: left;
                      }

Und hier die html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>
    Indexbass Alpha 0.0.6
  </title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body bgcolour="#FFFFFF">
<center><br />
  <div id="main">
    <div class="spaceside">
    </div>
    <div class="topblur"><img src="./pics/sideblurtop.png" />
    </div>
    <div class="spaceside">
    </div>
    <div class="space">
    </div>
    <div class="spaceside">
    </div>
    <div class="topblur">
    </div>
    <div class="spaceside">
    </div>
    <div class="space">
    </div>
    <div class="spaceside">
    </div>
    <div id="topblur1">
    </div>
    <div class="spaceside">
    </div><br />
    <div class="sideblurleft">
    </div>
    <div class="klein"><img src="./pics/hersteller.jpg" />
    </div>
    <div class="sideblurright">
    </div>
    <div class="midde"><img src="./pics/pfeil.png" />
    </div>
    <div class="sideblurleft">
    </div>
    <div class="klein"><img src="./pics/model.jpg" />
    </div>
    <div class="sideblurright">
    </div>
    <div class="midde"><img src="./pics/pfeil.png" />
    </div>
    <div class="sideblurleft">
    </div>
    <div id="steckbrief"><img src="./pics/stekbrief.jpg" />
    </div>
    <div class="sideblurright">
    </div>
  </div>
  </center>
</body>
</html>

Ich habe nun wirklich viel herumprobiert, doch es will nciht klappen, vielleicht sehe ich den Wald voller divs nichtmehr.

Ich bitte um Hilfe

PS: Ich habe e mit dem CSS validator überprüft, kann jedoch mit der Fehlermeldung leider wenig anfangen, da mir das nötige Know How doch in einigen Bereichen fehlt!

Link zur Page:
http://www.underseek.de/bassbewertung/back.html
Link zum Validator:
http://jigsaw.w3.org/css-validator/...et.css&warning=1&profile=css21&usermedium=all
 
Zuletzt bearbeitet:
Hi,

von welcher oberen DIV-Spalte sprichst du?

Achja, der Link zur Seite führt auf eine 404-Fehlerseite.
 
vor lauter Verzweifelung hab ich das .html vergessen, Sorry.

Ich spreche von den Divs über dem BR
 
So wie ich das überblicke, fehlen in der oberen Zeile die entsprechenden Spalten, in denen in der unteren Zeile die Pfeile eingebunden sind.
 
Stimmt, nur fehlt im Stylesheet nach der width-Eigenschaft das Semikolon:

Code:
div.space { 
     width: 60px;
     height: 5px;
     float: left;
}
 
Oh...
nun ja, jetzt hab ich nurnoch das problem, das der Div nicht direkt aufm dem unteren aufliegt. Hab ich schonwieder etwas falsch gemacht?
 
Du must das <br /> innerhalb der ganzen DIV's mit folgendem ersetzen.

Code:
<div style="clear:both;height:0px;width:100%;"></div>


Oder du musst den br-Tag einen Style zuweisen, dass er keine Höhe hat.
 
Hi,

setz mal diese Regel ein, um die Lücke zwischen den DIV-Reihen zu schliessen:

Code:
.clear {
clear: left;
height: 0;
line-height: 0;
font-size: 0;
}
Code:
<div id="main">
    <div class="spaceside"></div>
    <div class="topblur"><img src="./pics/sideblurtop.png" /></div>
    <div class="spaceside"></div>
    <div class="space"></div>
    <div class="spaceside"></div>
    <div class="topblur"></div>
    <div class="spaceside"></div>
    <div class="space"></div>
    <div class="spaceside"></div>
    <div id="topblur1"></div>
    <div class="spaceside"></div>
    <div class="clear"></div>
    <div class="sideblurleft"></div>
    <div class="klein"><img src="./pics/hersteller.jpg" /></div>
    <div class="sideblurright"></div>
    <div class="midde"><img src="./pics/pfeil.png" /></div>
    <div class="sideblurleft"></div>
    <div class="klein"><img src="./pics/model.jpg" /></div>
    <div class="sideblurright"></div>
    <div class="midde"><img src="./pics/pfeil.png" /></div>
    <div class="sideblurleft"></div>
    <div id="steckbrief"><img src="./pics/stekbrief.jpg" /></div>
    <div class="sideblurright"></div>
</div>
und korrigiere die Breitenangabe für das DIV space auf 50px, was der Breite der Grafik pfeil.png entspricht.

Zudem solltest du für alle DIVs, die eine Höhe von 5px besitzen, zusätzlich overflow:hidden deklarieren, damit der IE (<7) die Höhe korrekt darstellt:

Code:
div.spaceside { 
width: 5px;
height: 5px;
float: left;
overflow: hidden;
}
div.topblur {
width: 120px;
height: 5px;
background-image: url(./pics/sideblurtop.png);
float: left;
overflow: hidden;
}
div.space {
width: 50px;
height: 5px;
float: left;
overflow: hidden;
}
div#topblur1 { 
width: 435px;
height: 5px;
background-image: url(./pics/sideblurtop.png);
background-repeat:repeat-x;
float: left;
overflow: hidden;
}
 
ich danke auf jedenfall schonmal für eure Hilfe, jedoch habe ich mich, da noch weitere Probleme hinzugekommen sind, dazu entschlossen, einfach ein großes div oben und unten zu machen, anstatt die vielen kleinen, mit einem großen Hintergrundbild.
Nun kommt es allerdings zu folgendem Problem: Das untere Div wird vom rest abgeschnitten und verhält sich so, als wären 8 breaks zwischen dem Hauptteil und dem unteren Div, doch sehet selbst:
http://underseek.de/bassbewertung/back.html

DIe Codes:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>
    Indexbass Alpha 0.0.6
  </title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body bgcolour="#FFFFFF">
<center>
  <div id="main">
    <div id="top">
    </div>
    <div class="clear">
    </div>
    <div class="sideblurleft">
    </div>
    <div class="klein"><img src="./pics/hersteller.jpg" />
    </div>
    <div class="sideblurright">
    </div>
    <div class="midde"><img src="./pics/pfeil.png" />
    </div>
    <div class="sideblurleft">
    </div>
    <div class="klein"><img src="./pics/model.jpg" />
    </div>
    <div class="sideblurright">
    </div>
    <div class="midde"><img src="./pics/pfeil.png" />
    </div>
    <div class="sideblurleft">
    </div>
    <div id="steckbrief"><img src="./pics/stekbrief.jpg" />
    </div>
    <div class="sideblurright">
    </div>
    <div class="clear">
    </div>    
    <div id="down">
    </div>    
  </div>
</body>
</html>
Code:
div#main {
width : 805px;
height : 410px;
}
div.sideblurleft {
width : 5px;
height : 400px;
float : left;
background-image : url(./pics/blurs/backgrleft.png);
}
div.sideblurright {
width : 5px;
height : 400px;
float : left;
background-image : url(./pics/blurs/backgrright.png);
}
div.klein {
width : 120px;
height : 400px;
background-color : #aaaaaa;
float : left;
}
div#steckbrief {
width : 435px;
height : 400px;
background-color : #aaaaaa;
float : left;
}
div.midde {
width : 50px;
height : 400px;
background-color : #cccc99;
float : left;
margin-top : 175px;
}
div#top {
background-image: url(./pics/blurs/top.png);
width: 804px;
height: 4px;
margin-right: 20px;
}
div#down {
background-image: url(./pics/blurs/down.png);
width: 804px;
height: 4px;
}
body {
background-color : #cccc99;
}
.clear {
clear: left;
height: 0;
line-height: 0;
font-size: 0;
}

Wie ihr seht, habe ich den Vorschlag von michaelsinterface genommen, um die Divreihen von einander abzusondern. Danke nochmal für den Tipp!

Ich hoffe auf weitere Hilfe. Wie ihr seht bin ich noch nicht so in die CSS Geschichte involviert und bitte um Nachsicht ;)
 
Status
Nicht offen für weitere Antworten.
Zurück