Tabellenloses Layout II

holunda · 17.10.2003, 13:24

Glaube für CSS ist ebenfalls ein Fragen Karusell notwendig

I) Container Fragen
Angenommen ich habe einen Container mit id "header". Dieser COntainer enthält wiederum 2 mit den klassen .logo und .links.

Wenn nun Logo in die höhe gestreckt wird ( mit Content), warum streckt es dann nicht auch automatisch #header mit?

Alex

prefix · 17.10.2003, 13:30

hi

dazu brauchen wir bitte den code!

wenn du nämlich ein element floatest und es danach nicht clearst, dann wird es drüberstehen (wenn es zu hoch wird).

es kommt auch darauf an, in welcher reihenfolge die container dann in xhtml positioniert sind - auch das dtd ist sehr wichtig

also, bitte mal den code

prefix · 17.10.2003, 13:34

achja, anschauungsbeispiel, wie man clearen kann

mehr dazu, wenn ich von der arbeit zuhause bin (in ca. 2 stunden) - wochenende - yeah

holunda · 17.10.2003, 13:42

xhtml source:

Code:

		<!-- Header Container for logo and links -->
		<div id="header">
			<div class="logo">&nbsp;</div>
			<div class="links">
				&nbsp;
			</div>
		</div>

CSS:

Code:

#header
{
	margin-top:20px;
	background-color:#f000;
}

#header .links
{
	margin-right:0px;
}

#header .logo
{
	float:left;
	
	/* vorübergehend */
	font-size:26px;
	font-weight:bold;
}

Alex

holunda · 17.10.2003, 15:05

Konkret will ich mein entworfenes Layout damit machen, bin aber glaube ich zu blöde dafür!! Sitzt schon stundenlang dafür, lies mir immer wieder interessante Blogs durch, wills aber nicht checken. Du hattest recht mit "Noch ist kein Meister von Himmel gefallen" ...

@attached File
Wie könnte man so eine Kosntellation mit hard CSS und möglichst hoher Kombatibilität realisieren? Die Site sollte in einem COntainer mit 760 px width postiert werden ...

Gruß aus dem sonnigen Tirol
Alex

prefix · 17.10.2003, 15:35

holundi

))

schau mal hier - verwende das als umfassenden container für alle restlichen elemente - ich denk, so sollte das mal klappen

holunda · 17.10.2003, 15:44

Das zentrierte Div hab ich schon, geht mir um die Inneren Elemente die mir immer wider verrutschen und außerhalb des main containers wandern ...

PS: Da ist ein Fehler im Blog:

Zitat:

<body>"center">! TEST !
</body>

prefix · 17.10.2003, 15:47

moment, ich mach dir mal ein grundlayout und dann reden wir drüber - gib mir eine stunde (stress mich nicht am wochenende, hörst!!!

)

prefix · 17.10.2003, 16:11

gibt es die seite, auf die du verweist, auch online - bilder usw. wären sinnvoll!

holunda · 17.10.2003, 16:19

nein, leider, aber kannst ja inzwischen platzhalter container nehmen oder?

prefix · 17.10.2003, 16:49

so, hier die lösung - getestet in win auf ie6, nn7, op7 und mozfb 0.61:

css-file:

Code:

/* layout by prefix für holundis lustiges css-fragenkarusell */

body{
	text-align: center;
}

.center{
	/*/*/
	text-align: left;
	/**/
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	width: 760px;
	margin-top: 30px;
}

/* container innerhalb des zentrierten inhalts */

#header {
	height: 80px;
	background-color: red;
}

#headnavi {
	margin-top: 10px;
	clear: both;
}

#headfunctions {
	height: 70px;
	background-color: Aqua;
	margin-top: 10px;
	clear: both;
}

#inhalt {
	background-color: Fuchsia;
	clear: both;
	margin-top: 10px;
}

#fussnote {
	background-color: Gray;
	clear: both;
	margin-top: 10px;
}

/* weitere positionierungselemente */

#headerlinks {
	margin-right: 450px;
	background-color: Green;
	height: 80px;
}

#headerrechts {
	float: right;
	width: 440px;
	background-color: Blue;
}

.headnavielement {
	float: left;
	width: 100px;
	border: 1px solid black;
	background-color: white;
	margin-right: 10px;
}

html>body .headnavielement {
	margin-bottom: 10px; /* für alle ausser ie, da diese sonst nicht den
	richtigen abstand zum folgeelement einnehmen */
}

#headfunctionslinks {
	margin-right: 220px;
	background-color: Maroon;
	height: 70px;
}

#headfunctionsrechts {
	float: right;
	width: 200px;
	background-color: Olive;
	height: 70px;
}

#inhaltlinks {
	margin-right: 223px; /* bug im ie, daher mehr abstand nach rechts */
	background-color: Silver;
}

html>body #inhaltlinks {
	margin-right: 220px; /* richtigstellung */
}

#inhaltrechts {
	float: right;
	width: 200px;
	background-color: Teal;
}

xhtml-file:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layoutm&ouml;glichkeit 17.10.2003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout171003.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="center">
	<div id="header">
		<div id="headerrechts">headerrechts</div>
		<div id="headerlinks">headerlinks</div>
	</div>
	<div id="headnavi">
		<div class="headnavielement">element</div>
		<div class="headnavielement">element</div>
		<div class="headnavielement">element</div>
		<div class="headnavielement">element</div>
		<div class="headnavielement">element</div>
		<div class="headnavielement">element</div>
	</div>
	<!--<div class="clearer">&nbsp;</div>-->
	<div id="headfunctions">
		<div id="headfunctionsrechts">rechts</div>
		<div id="headfunctionslinks">links</div>
	</div>
	<div id="inhalt">
		<div id="inhaltrechts">rechts</div>
		<div id="inhaltlinks">links</div>
	</div>
	<div id="fussnote">fussnote</div>
</div>
</body>
</html>

zur live-tour geht es hier entlang

holunda · 20.10.2003, 09:28

Hi Prefix,
danke für das Spitzen Layout, habs mittlerweile schon etwas zurechtgestutzt.
Komme wahrscheinlich später nocheinmal darauf zu sprechen ...

II) Formatierungen
Warum wird in einer Klasse meine code nicht interpretiert:
[code]
.class
{
vertical-align:middle;
}

Ist mir jetzt schon öfters aufgefallen ...
Gruß Alex

prefix · 20.10.2003, 09:30

such mal nach "vertical-align" im puristen-board, da gibt es einiges zu beachten (alles schon öfters abgehandelt)

prefix · 20.10.2003, 09:44

um es einfacher zu machen, hier mal beispiele

mit folgendem css-code hab ich diese seite gestaltet:

Code:

.beispiel1 {
	height: 200px;
	width: 500px;
	background-color: red;
	color: white;
	vertical-align: middle;
}

.beispiel2 {
	height: 200px;
	width: 500px;
	background-color: yellow;
	vertical-align: middle;
	line-height: 200px;
}

td {
	height: 40px;
	border: 1px solid black;
	vertical-align: top;
}

dann noch der xhtml-code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="verticalalign.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>Beispiel 1:</p>
<div class="beispiel1">Ohne Angabe von line-height</div>
<p>Beispiel 2:</p>
<div class="beispiel2">Mit Angabe von line-height</div>
<p>Beispiel 3:</p>
<table width="500" cellspacing="0" cellpadding="0">
  <tr>
    <td>Hier ben&ouml;tigt man</td>
    <td>keine Definition</td>
  </tr>
  <tr>
    <td>von</td>
    <td>line-height</td>
  </tr>
</table>
</body>
</html>

daher die verhaltensweisen:

beispiel 1 liegt in einem container, dem keine zeilenhöhe zugewiesen wurde - daher wird der text oben angezeigt (standard)

beispiel 2 wie 1, jedoch mit zeilenhöhe (gleich hoch wie container) und text-ausrichtung mittig (vertical-align: middle)

beispiel 3 ist eine tabelle, deren zellen (td) ich per css OHNE line-height ein vertical-align (hier top, standard wäre middle) zugewiesen habe.

achtung: ich habe zwar "height" zugewiesen, nicht aber "line-height" (um es zu demonstrieren)

holunda · 20.10.2003, 10:28

@Layout

Wie mache ich auf meine Navielements einen schönen hover effekt mit link drauf?

Code:

.headnavielement {
	float: left;
	height:18px;
	line-height:18px;
	border: 1px solid #999;
	background-color: #f9f9f9;
	margin-right: 5px;
	padding-left:5px;
	padding-right:5px;
	
	/* Font Definition */
	font-family:verdana,arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#999;
}

Alex

Tabellenloses Layout II

cool