Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon JokamitPAge vom 15.06.2019, 15:45 Options

Div Layer nebeneinander in CSS???

Servus!

Ich brauch mal eure Hilfe in Sachen CSS...

ich will ne Page machen und habe eine CSS Datei für verschiedene Layer. .main ist der Hauptlayer für die Homepage (zentriert, mit Abstand nach oben) der alles enthält. Darin ist ein .container der im groben nur als Angabe hat 10px Rand zu lassen und den Inhalt enthält. Oben ist der Header und das Menü. Soweit hat alles geklappt! Jetzt zum Inhalt:

Ich möchte in diesem Layer .container einen Layer .content der den Text enthält und daneben einen Layer .sidebar der zusätzliche Links und eine Suchfunktion enthält. Also wie gesagt NEBENEINANDER!

Nur genau das nebeneinander bekomme ich nicht hin...die Layer werden immer untereinander angebracht. Was mache ich falsch???



.main {
	background: #FFF; 
	border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF; 
	margin: 20px auto 4px auto; 
	text-align: justify;
	width: 770px; 
}

.container {
	margin: 10px;
}

.content {
	background: #F5F5F5;
	border-top: 1px solid #E5E5E5;
	clear: both;
	width: 470px; 
}

.sidebar {
	width: 290px;
	background: #dddddd;
	border-right: 1px solid #BBB;
	float: right;
	text-align: left;
	clear: both;
}

Antwort schreiben

Antwort 1 von rfb vom 15.06.2019, 16:03 Options

mit

clear:both

in beiden DIVs beendest du das floating, bevor es begonnen hat.

Antwort 2 von JokamitPAge vom 17.06.2019, 22:52 Options

...hey! wie muss ich das floating denn sonst einstellen? Wenn ich beide raus nehme habe ich nicht viel Veränderung Die Sidebar ist zwar rechts ausgerichtet, der Content Layer startet aber erst, wenn der Sidebarlayer zu ende ist.

Also oben ist rechts= Sidebar lings=leer und weiter unten ist dann links=Content rechts=leer und nicht wie es sein sollte Content und Sidebar nebeneinander.

DAnke für eure Tipps! Ihr seid wirklich großartig!

me

Antwort 3 von rfb vom 18.06.2019, 07:53 Options

nochmals:
du hast in den beiden DIVs, die du floaten willst, jeweils die Eigenschaft

clear:both

, also die Anweisung, das floaten zu beenden. Nur in sidebar startest du das floaten überhaupt einmal.
Schmeiß erst einmal beide

clear:both

raus, die haben da nix zu suchen! Dafür solltest du dem content-DIV ebenfals die floating-Eigenschaft geben.
Wenn du floating beenden willst, dann nach den beiden DIVs!

Du machst keine Angaben zu

border-with

und vor allem

margin

, also gelten irgendwelche Default-Werte. Zusammen mit der Breite der beiden DIVs kann das einen größeren Wert ergeben als die Breite des main-DIVs. Beachte dass der IE sich hierbei auch noch verrechnet, wenn du ihn in den Quirksmodus schickst (IE6/7. IE 5 verrechnet sich grundsätzlich). Weiteres hierzu findest du unter dem Stichwort Das Boxmodell.

Antwort 4 von achTinchen vom 19.06.2019, 09:28 Options

Hallo! =)

Du brauchst wirklich nur die beiden Zeilen mit "clear:both;" herauslöschen.

Rein rechnerisch ist mir noch aufgefallen: Du hast für den main-Layer 770px Breite genommen. Für content 470px und für die sidebar 290px. Ergibt 760px, bleiben 10px über. Beim container-Layer hast du ja einen Rand von 10 px eingestellt. Allerdings ist der ja auf beiden Seiten (und natürlich auch oben und unten) also gehen eigentlich 20px dafür drauf.

Lg Tinchen

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken