CSS Layout klappt nicht :(

[Mauki]

Ich bastel gerade mal wieder an einem Layout und brauche ein wenig Hilfe.

Ich habe den Code von einer CSS Seite und habe noch ein paar Boxen dazu gemacht. Die Farben dienen vorerst mal der Übersicht der einzelnen Bereiche. Da ich in CSS nicht so fit bin, habe ich ein paar Fragen dazu. Am besten stell ich die Fragen der Reihe nach und getrennt, dann ist es für mich einfacher zum umsetzten.

1) Wie bekomme ich Box 4 und 5 nebeneinander ?
2) Wie bekomme ich alles auf ne feste Breit von 970px, bis jetzt haben die im Code ne unterschiedliche Breite, sind zum Teil aber trotzdem gleichbreit
3) Wie schaffe ich das es die Boxen direkt am Linken Rand anfangen, -8 ist ja wohl nicht korrekt oder ?
4) was ist am CSS Code noch überflüssig und kann raus ?

Die Seite liegt unter markus-burkhardt.de/zeitlos

 

[TobDeh]

Moin!

hab nicht viel Zeit, hoffe aber es hilft trotzdem.:

1) Wie bekomme ich Box 4 und 5 nebeneinander ?

bei box4 float:left hinzufügen

2) Wie bekomme ich alles auf ne feste Breit von 970px, bis jetzt haben die im Code ne unterschiedliche Breite, sind zum Teil aber trotzdem gleichbreit

was meinst du damit? eigentlich müsste width: 970px reichen.

3) Wie schaffe ich das es die Boxen direkt am Linken Rand anfangen, -8 ist ja wohl nicht korrekt oder ?

setz in die css-datei: html {margin: 0px 0px 0px; padding: 0px 0px 0px 0px}
und hau die -8px raus

Hth & Gruß,
Tobias

 

[Arclite]

html {margin: 0px 0px 0px; padding: 0px 0px 0px 0px}

da reicht

html {
margin: 0px;
padding: 0px;
}

bg
arc

 

[TobDeh]

Ja klar, wollte damit nur verdeutlichen, daß man eben auch für den body die margins an allen Seiten individuell anpassen kann. Aber wir sind hier ja auch nicht beim 5k-wettbewerb.
Ausserdem hab ich bei margin ein 0px vergessen. Nur der Vollständigkeit halber.

Gruß,
Tobias

 

[Arclite]

Klar, is ja auch gut, nur ich versuch codes immer so kurz wie möglich zu halten.


bg
arc

 

[Mauki]

so ich habe mal die Änderungen durchgeführt. Ich habe

html {
margin: 0px;
padding: 0px;
}

eingefügt. Bei Box 4 und 5 habe ich das Padding drin gelassen, da ja dort Text drin ist. Ist das so ok ?

Das float:left ist drin, bringt aber kein Ergebniss ?

 

[calinux]

Moin moin!

Wie es aussieht, möchtest Du das Design Deiner Seite komplett selbst in CSS entwerfen.. was ich sehr gut finde! Endlich mal wieder jemand, der ein bisschen Wert auf Trennung von Inhalt und Aussehen legt...
Aber dazu solltest Du Dich in CSS und HTML einigermaßen auskennen..
Daher empfehle ich hiermit einfach mal http://de.selfhtml.org - falls Du es noch nicht kennst - und durch probieren lernt man wirklich wahnsinnig viel

ich wünsche Dir noch nen schönen Tag!

calinux

Ach ja: lass hören, wenn die Seite ferig is!

 

[mec]

Bei Box 4 und 5 habe ich das Padding drin gelassen, da ja dort Text drin ist. Ist das so ok ?

Das float:left ist drin, bringt aber kein Ergebniss ?

1. Ja, ist ok so.
2. Setz mal in beide divs ein float rein. Eine sehr gute Anleitung zur Positionierung findest du unter http://home.arcor.de/terrikay/tutorials/positionierung.html

 

[Mauki]

@calinux
ich kenne SelfHTMl seit Jahren, nur sind meinen Kenntnisse etwas verstaubt

@mec
Der Link ist interessant, aber irgendwie passt das mit den floats nicht. Ich habe für Box 5 float:none angegen aber passt immer noch nicht. Wer weiß wie ich die Boxen nebeneinader bekomme ?

 

[Mauki]

so hab noch ein wenig rumgebastelt und nun passt das mit Box 4 und 5. Nun passt aber das mit der Breite noch nicht ganz.

Wer weiß da noch Rat ?

Achja, wer das Stylesheet noch nicht gefunden hat, es ist unter markus-burkhardt.de/zeitlos/css/stylesheet.css

 

[norbi]

im CSS:
html{... in body{... geändert -> Seite wird randlos.
box3{... width auf 960 px geändert (padding: 5 px gilt für alle Seiten, links 5 und rechts 5 = 10, also in width 10 pixel weniger) -> box3 gleich breit
box5{.. width: 800 px -> jetzt ist alles gleich breit

jetzt hast Du nur noch rechts einen Rand, weiß nicht, ob das so gewollt ist.

das CSS sieht jetzt so aus:
body{

margin: 0px;
padding: 0px;
}

.box1{
height: 50px;
width: 970px;
background-color: #00CCFF;
}

.box2{
height: 12px;
width: 970px;
background-color: #FFFF00;
}

.box3{
padding:5px;
width: 960px;
background-color: #0066FF;
}

.box4{
padding:5px;
float:left;
width:150px;
background-color: #0099CC;
}

.box5{
float:none;
padding:5px;
margin: 0px 0px 0px 160px;
width: 800px;
background-color: #0099FF;
}

.box6{
width: 970px;
background-color: #0066FF;
}

No.

 

[Brandhoff]

Eine Möglichkeit wäre, die 970px in einem übergeordneten div zu definieren und bei den folgenden nur noch abweichende Maße festzulegen, in deinem Fall also nur noch bei der Navi-Box.

Ich nehme an, daß du bei dem puristischen Ansatz auch die Textformatierungen mit den Elementen H1-H6, p, ul usw vornimmst, die je nach Brauser unterschiedliche margins usw aufweisen. Es würde hier Sinn machen, wenn du dich intensiv mit dem Box-Modell beschäftigst (also wie margin, padding und ggf border aufgebaut und von den verschiedenen Brausern dargestellt werden) und dies beim Aufbau der Seite direkt berücksichtigst (siehe führende <br> in jedem Block).

cheers.

 

[Mauki]

@norbi

sieht nun schon besser aus. Das mit dem weißen Rand rechts, mh weiß nicht was ich damit machen soll. Ich könnte auch die Seite nach rechts endlos laufen lassen aber irgendwo soll halt die Grenze sein ?

Hat jemand den IE (PC), da ist ne Lücke zwischen Box 4 und 5 ?

 

[norbi]

Du könntest das Layout in eine weitere Box packen, die eine feste Breite hat und zentriert ist.

Zentrieren ist mit %-Angaben einfacher. Eine box 90% breit mit 5% margin-left ist automatisch zentriert.

No.

 

[Mauki]

so ungefähr ?

 

[Mauki]

so bin mal wieder an der Seite dran. Wer kann mir bei dem Problem helfen das zwischen Box 3 und 4 ein grauer Trenner im IE auf dem PC erscheint. In Firefox/Camino sieht das ganze gut aus.

Gibt es da ne allgemeine Lösung dafür ?

Die Seite liegt immer noch unter markus-burkhardt.de/zeitlos

 

[Mauki]

Hat jemand nen Tipp, wie man den Trenner im IE beseitigt.