CSS Design erstellen

Status
Nicht offen für weitere Antworten.
D

Dark Ranger

Erfahrenes Mitglied
Hi

Ich bin gerade dabei ein Design zu erstellen
Überlegt habe ich mir es etwas so:
Ein Bild

Nun habe ich mir auch schon ein grobes HTML Gerüst gebastelt
HTML: 
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<div id='container'>
			<div id='header'>
				Blablubb Header
			</div>
			<div id='topnavi'>
				bla blubb home impressum
			</div>
			<div id='navi'>
				test
				test
				test
			</div>
			<div id='rightside'>
				<div id='rightbox'>
					Keine News
				</div>
				<div id='content'>
					<h1>Überschrift</h1>
					<div class='informationen'>
						<div class='info_image'>
							Bild
						</div>
						<div class='info_rightbox'>
							Zusatzinfos
						</div>
						<div class='info_headline'>
							Überschrift
						</div>
						<div class='info_description'>
							Beschreibung
						</div>
						<div class='info_footer'>
							Weitere Infos, Links usw.
						</div>
					</div>
					<div class='informationen'>
						<div class='info_image'>
							Bild
						</div>
						<div class='info_rightbox'>
							Zusatzinfos
						</div>
						<div class='info_headline'>
							Überschrift
						</div>
						<div class='info_description'>
							Beschreibung
						</div>
						<div class='info_footer'>
							Weitere Infos, Links usw.
						</div>
					</div>
					<div class='informationen'>
						<div class='info_image'>
							Bild
						</div>
						<div class='info_rightbox'>
							Zusatzinfos
						</div>
						<div class='info_headline'>
							Überschrift
						</div>
						<div class='info_description'>
							Beschreibung
						</div>
						<div class='info_footer'>
							Weitere Infos, Links usw.
						</div>
					</div>
				</div>
				<div id='footer'>
					Copyright usw.
				</div>
			</div>
		</div>
	</body>
</html>
Allerdings weiß ich jetzt nicht, ob das so passt, oder ob ich vielleicht noch etwas ändern sollte. Kann mir da irgendwer noch ein paar Tips geben und vielleicht auch für den CSS Code?
 
Hi,

und wie lautet dein bisheriges Stylesheet zu dem Design?

Ansonsten lässt sich hierzu schwer ein Tipp geben.

mfg Maik
 
CSS sieht ungefähr so aus:
Code: 
body {
	text-align: center;
}

#container {
	height: 90%;
	width: 90%;
	min-height: 768px;
	min-width: 1024px;
}

#header {
	height: 100px;
	margin: 0px;
	border: 1px solid black;
}

#topnavi {
	height: 10px;
	border: 1px solid black;
	margin: 0px;
}

#navi {
	float: left;
	height: 85%;
	border: 1px solid black;
	width: 150px;
	margin: 0px;
}

#rightside {
	margin: 0px 0px 0px 150px;
	border: 1px solid black;
}

#rightbox {
	float: right;
	height: 85%;
	width: 150px;
	border: 1px solid black;
	margin: 0px;
}

#content {
	height: 85%;
	border: 1px solid black;
	margin: 0px;
}

.informationen {
	width: 90%;
	border: 1px solid black;
	margin: 0px;
}

.info_image {
	float: left;
	border: 1px solid black;
	margin: 0px;
}

.info_rightbox {
	float: right;
	border: 1px solid black;
	margin: 0px;
}

#footer {
	margin: 0px;
	border: 1px solid black;
}

Geht eigentlich schon so einigermaßen, allerdings weiß ich nicht wie das in anderen Browsern ausser dem IE7 aussieht.
Ausserdem bekomme ich das mit der Höhe irgendwie nicht hin, also der Container ist soweit okay denke ich, aber die navigation soll bis unten gehen und die rightbox und content sollen auch bis unten gehen, diese 3 Boxen sollen auch mitwachsen und wo ich noch ein Problem habe ist, dass wenn ich das Fenster verkleinere, dann verschiebt sich dass alles, aber eigentlich soll alles so in dem Aufbau bleiben und irgendwann nicht weiter schrumpfen.
 
Zu der Frage bzgl. der anzugleichenden Spaltenhöhen empfehle ich dir den Artikel AnyColumnLongest.

Da du für den umschliessenden Container eine Mindestbreite festgelegt hast, verschiebt sich bei mir in den standardkonformen Browsern nichts, wenn ich deren Fenster verkleinere.

mfg Maik
 
Wenn du in deinem vorgestellten Stylesheet für das DIV #container einen Rahmen oder eine Hintergrundfarbe definierst, siehst du es auch ganz deutlich ;)

mfg Maik
 
Die Seite die du mir geliefert hast ist ja ganz schön, aber irgendwie komme ich damit nicht weiter, wenn ich das auf meine Seite anpassen will, dann geht wieder irgendwas nicht!
Entweder bin ich zu blöd oder ich weiß auch nicht, ich mag CSS nicht, find ich total umständlich, aber trotzdem kann man damit gute Sachen machen, man müsste es halt mal lernen.
 
Habe eigentlich alle ausprobiert, aber das scheine ich irgendwie übersehen zu haben, werde mich da mal ein wenig mit beschäftigen, mal schauen was raus wird.

Edit:
Sieht jetzt schon eigentlich ganz gut aus, muss aber noch ein paar Sachen anpassen.

Kann mir irgendwer einen gutes Buch empfehlen?
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück