Wiedermal CSS Probleme

[r0k079]

Hallöchen TP Gemeinde. Wie viele andere auch, habe ich ein kleines Problem mit CSS

Also ich muss sagen, ich fange gerade erst an mich CSS zu beschäftigen, da ich einige von mir gemachte Seiten auf eben dieses umstellen möchte doch ich habe so meine kleinen Problemchen, sag ich einfach mal.

Folgender Fall z.b.:

Ich habe hier im Beispiel, jetzt mal 4 layer, die in einer Tabelle angeordnet werden sollen. 3 davon nebeneinander (klappt inzwischen sogar ) und dann eben ein 4. neben dem ersten, aber unter dem zweiten.

Nicht verständlich warscheinlich, aber hier mal mein Code, der es vielleicht leichter verständlich macht. Im moment noch ohne CSS Datei, da ich noch am experimentieren bin.

<table align="center" width="982" border="0">
  <tr>
    <td>
    	<div style="float: left; position: relative; left: 0px; top: 0px; width: 635px; height: 150px; background-color: #000000;"></div>
      	<div style="float:left; width: 325px; height: 15px; background-color: #006464;"></div>
        <div style="float:left; width: 15px; height: 15px; background-color: #00435f;"></div>
        <div style="float:left; width: 280px; height: 135px; background-color: #153486;"></div>
	</td>
  </tr>
</table>

Mein Problem ist nun das zwischen den 2. und 4. Layer ein kleiner zwischenraum entsteht, der einfach nicht wegzubekommen ist. Ich denke das ist eh ziemlich saumässig organisert, aber ich bin wie gesagt CSSn00b und über jeden Tipp dankbar!

Bis hierhin...
greetz
r0k0

[r0k079]

So, ich wollte nur mal eben berichten, das ich soweit alles geschaft habe, war lediglich ein Anzeigefehler mit meiner Auflösung ... warum auch immer *schulterzuck*

Doch nun stehe ich erneut vor einem Problem. Ich hänge mal folgendes Bild an, um es zu verdeutlichen.

Vorhandenes Problem

Dieser kleine Layer dort unten Links, soll direkt unter den layer dort links. Doch ich bekomm es nicht. Wird sicher nur eine bestimmt floatsache sein, bzw. eine gewisse kombination. Desweiteren, müsste die fläche die noch weiß ist auch durch einen layer ersetzt werden. doch auch hier bekomme ich keinen an die gewünschte position. Vielleicht kann mir ja jemand sagen wie ich an meine Ziele komm.

Hier nochmal mein Code, den ich bisher hab, immer noch ohne CSS Datei.

<div id="container" style="height: auto; width: 975px; margin-left: auto; margin-right: auto; margin-top: 25; background-color:#ffffff;">

	 <div style="float: left; position: relative; left: 0px; top: 0px; width: 635px; height: 150px; background-color: #000000;"></div>
   	 <div style="float:left; width: 340px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 290px; height: 125px; background-color: #ffffff;"></div>
     <div style="float:left; width: 25px; height: 125px; background-color: #00435f;"></div>
     <div style="float:left; width: 25px; height: 125px; background-color: #006464;"></div>
	 
     <div style="float:left; width: 975px; height: 25px; background-color: #b6b6b6;"></div>
     
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 140px; height: 25px; background-color: #006464;"></div>
     <div style="float:left; width: 135px; height: 25px; background-color: #006464;"></div>
     
     <div style="float:left; width: 25px; height: 10px; background-color: #006464;"></div>
     <div style="float:left; width: 265px; height: 10px; background-color: #00435f;"></div>
     <div style="float:left; width: 10px; height: 330px; background-color: #00435f;"></div>
     <div style="float:left; width: 625px; height: 330px; background-color: #000000;"></div>
     <div style="float:left; width: 25px; height: 330px; background-color: #00435f;"></div>     
     <div style="float:left; width: 25px; height: 330px; background-color: #006464;"></div> 
     
     <div style="float:clear; width: 15px; height: 320px; background-color: #006464;"></div>
     <div style="float:left; width: 265px; height: 10px; background-color: #006464;"></div>
              
</div>

Bin noch einmal über jede erdenklich hilfe Dankbar.

[wiantomi]

Hallo!

float:clear gibt es meiner Meinung nach nicht. Ich kenne nur "clear: both;"

Mein Tipp: Nimm dir ein Blatt Papier und skizziere die einzelnen Container mit with, padding, margin und meist findet man dann schnell den Fehler.

Für padding und margin empfehle ich die folgende Schreibweise:
margin: 0 0 0 0; (oben, rechts, unten, links)

Du gibst mehrere Male die gleiche CSS-Formatierung an. Es geht ja nicht nur darum, den Code in einer extra Datei zu schreiben, sondern gleiche Formate über "class" zu definieren. Sonst sieht doch keiner mehr durch.

Viel Erfolg!

wian

[kami]

Hallo,

bitte mach eine CSS-Datei. Dann wird für Dich auch vieles klar. Sonst schau doch mal erst bei alles für CSS.
Da wirst bestimmt was finden. Wenn Du fertig bist kannst Dich ja wieder melden.

[wiantomi]

Ich nochmal! Mir fehlen zwar gerade die Nerven mich in deinen Code zu fitzen, aber anscheindend hast du sogar für die grünen Ränder DIV-container verwendet. Das löst man mit border-top etc. Du solltest das nochmal neu aufbauen und vereinfachen.