Boxen nebeneinander setzten (anfänger frage)

Eichi · 9. Mai 2007

Hallo zusammen,
ich habe schon ziemlich alles mir bekannte (und unbekannte) ausprobiert um das in den Griff zu bekommen, jedoch klappt es einfach nicht.

Das ist meine Seite: http://eichi.freehostia.com/

Das ganze wurde halt mit Boxen erstellt. Entscheident sind jetzt die "main"-box(Also die ganze Homepage bis auf den grauen Hintergrund) und da oben die Testbox. Die Testbox soll auf der linken Seite von der "main"-box sein. Normalerweise setzen die Boxen sich ja automatisch nebeneinander, hier wurde die Box jedoch einfach oben drangehängt. Die Boxen eigenschaften sind natürlich in CSS festgehalten.

Also ich will einfach nur die Testbox auf die linke Seite der ganzen Seite bekommen.
Bin für jede antwort dankbar.

Zweipunktnull · 10. Mai 2007

nein. boxen setzen sich nicht automatisch nebeneinander.
boxen setzen sich immer automatisch untereinander. wenn sie nebeneinander sein sollen, muss man das bspw. über float festlegen.

deine adminbox steht im quelltext ganz am anfang (direkt hinter body). also ist sie das erste element auf der website. danach kommt die mainbox. da du der adminbox keine float-angabe mitgegeben hast, ist es logisch, das die nächste box, nämlich die mainbox, unterhalb der adminbox angezeigt wird.

um das problem zu lösen gib der adminbox die angabe float: left und eine width angabe. ob die in pixel oder prozent oder sonstwas ist, ist egal. wenn du der adminbox dann eine float und width angabe verpasst hast, musst du dann halt weiterdenken. (keine ahnung wies dann genau aussieht. leider hab ich nicht die gabe n ganzes stylesheet anzugucken und dann zu wissen, was sich wie wann verändert

)

Eichi · 10. Mai 2007

Danke für die Antwort.

Naja...ich dachte halt, wenn ich float left angebe, hängt die box dann am linken bildschrimrand. Die soll ja aber direkt an der mainbox dran sein. Ein Typ aus meiner Klasse hat mir vorgeschlagen dass über tables zu machen. Ich dachte nur dafür gäbe es eine einfachere Lösung.

Ich versuche das mal und schreib dann wie es geklappt hat.

Eichi · 10. Mai 2007

OK, die Box ist nun nicht mehr über der Mainbox, jetzt muss ich nurnoch wissen, wie ich die Testbox an die Mainbox "andocke"

Dontales · 10. Mai 2007

Eichi schrieb:
OK, die Box ist nun nicht mehr über der Mainbox, jetzt muss ich nurnoch wissen, wie ich die Testbox an die Mainbox "andocke"

unser HTML Lehrer meinte mal, nichts geht über die schönen Tables

krizzelfix · 10. Mai 2007

Tabellen als Design Element in HTML ist mehr als nur grausam.
Wenn du grad dabei bist mit CSS deine Seite machen, dann bleib dabei. CSS ist vll etwas schwerer aber mann kan damit viel mehr erreichen.

Wenn du willst dass die Box nicht direkt am bildschrim rand ist, musst du ein margin-right setzten.

Grüße

tewes

Eichi · 10. Mai 2007

Das margin-right hat nichts verändert.

Ich hab jetzt mal ein Bild gemacht, damit ihr wisst wo ich die Box haben will:

stna1981 · 10. Mai 2007

Das Problem mit tables ist zum einen, dass sie absolut nicht barrierefrei sind, sich das Layout später nur noch super umständlich ändern lässt und der Inhalt erst angezeigt wird, wenn die Tabelle komplett geladen ist. Also Finger weg von Tabellenlayouts!

Ich hatte auch mal das Problem mit dem floaten der div-Container, hab das nie so hinbekommen, wie ich wollte. Noch schlimmer war es, als ich versucht habe, mit Positionsangaben wu arbeiten,, da dann die Container zwar an einer anderen Stelle angezeigt wurden, der ursprünglich vorgesehene Platz aber nicht freigegeben wurde...

Ich wüsste jetzt nicht, wie ich das von dir vorgesehene Layout realisieren sollte, und zwar so, dass ich es net als "Gefummel" bezeichnen würde...

Hier eine - wie ich finde - unsaubere Lösung. Nachteil: die mittleren Boxen sind nicht in der Mitte...

HTML:

<html>
<body>
<div style="border:1px solid black; width:202px; height:200px; float:left; visibility:hidden">b</div>
<div style="border:1px solid black; width:400px; height:200px; float:left">b</div>
<div style="clear:both">
<div style="border:1px solid black; width:100px; height:200px; float:left; visibility:hidden">b</div>
<div style="border:1px solid black; width:100px; height:200px; float:left">b</div>
<div style="border:1px solid black; width:400px; height:200px; float:left">d</div>
</body>
</html>

Eichi · 10. Mai 2007

Diese Lösungsmethode ist auch nicht wirklich das, was ich mir vorgestellt habe.
Ich wusste garnicht, dass eine Box ans Layout zu hängen so umständlich sein kann...

krizzelfix · 10. Mai 2007

Also ich weiss nicht was daran schwer sein soll.
Index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="styles.css" rev="stylesheet" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
	<div id="main">
		<div id="menue">
			Link1<br/>
			link2<br/>
			link3<br/>
		</div>
		<div id="content">
			Hier ist Content
		</div>
		<br style="clear: both"/>
	</div>
</div>
</body>
</html>

styles.css

HTML:

*{
	margin: 0px;
	padding: 0px;
}
#outer {
	border: 1px #000 solid;
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
}
#main {
	margin-left: auto;
	margin-right: auto;
	width: 775px;
	border: 1px #ff0000 solid;
}
#menue {
	position: relative;
	float: left;
	width: 180px;
	border: 1px #ccc solid;
}
#content {
	position: relative;
	float: right;
	width: 590px;
	border: 1px #00ff00 solid;
}

In ca. 5 min fertig

Grüße

tewes

Suche

Boxen nebeneinander setzten (anfänger frage)

Eichi

Gast

Zweipunktnull

Commander

Eichi

Gast

Eichi

Gast

Dontales

Lt. Commander

krizzelfix

Commander

Eichi

Gast

stna1981

Commander

Eichi

Gast

krizzelfix

Commander

Ähnliche Themen