CSS - Eine Frage zu <ul>

Hausmeister76

Adams Parmäne
Registriert
17.08.04
Beiträge
1.300
Hallo @all....

ich habe ein Problem mit CSS. Ich bekomm die Schrift der Links1-4 nicht so gesetzt wie ich es haben will. (zum Bsp.: links unten)

Wie bekomm ich nun die Schrift meiner 4 Links versetzt....am besten absolut, aber das kann sicherlich aufgrund der Liste nicht gehen, oder irre ich mich da?

gibt es da nicht ein Workaround mit <p></p>?

hier die Seite: www.tankstelle-falkenhain.de/index_neu.html
vielen Dank...

so long...
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

der Trick liegt in einem
Code:
float:left;
welches Du den Listitems <li> im CSS mitgeben mußt.

Am schnellsten lernt man es IMHO wenn man sich bei List-O-Matic etwas ähnliches zusammen schrauben läßt, an dem man dann weiterexperimentieren kann.

Gruß Stefan
 

Hausmeister76

Adams Parmäne
Registriert
17.08.04
Beiträge
1.300
Hallo stk....

ich weiß nicht, ob du dir den Link mal angeschaut hast, nur hilft ein float:left; in den <li> Elementen auch nicht. Ich möchte die Schrift (Link 1-4) innerhalb eines jeden einzelnen Blockes versetzen können, aber nicht die gesamte Liste ansich. Geht das überhaupt irgendwie?

Danke dir....

so long....
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

ich weiß nicht, ob du dir den Link mal angeschaut hast, nur hilft ein float:left; in den <li> Elementen auch nicht. Ich möchte die Schrift (Link 1-4) innerhalb eines jeden einzelnen Blockes versetzen können, aber nicht die gesamte Liste ansich. Geht das überhaupt irgendwie?

Klar hab ich den Link gesehen. Und ich weiß auch was Du willst. Das hier:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tankstelle Falkenhain</title>
	<style type="text/css" media="screen">
body {
	background: #e5e5e5;
	margin: 0:
	padding: 0;
	font-family: Verdana, sans-serif;
	}

#center {	
	background: #fff;
	margin: 0 auto;
	width: 700px;
	}

#navi {	
	padding: 0;
	margin: 0;
	background: #c00;
	height: 97px;
	position: absolute;
	top: 0;
	}

#navi ul {
	background: #011538;
	list-style: none;
	height: 80px;
	padding: 0 0 0 298px;
	border-top: 1px solid #fff;
	}

#navi ul li {
	float: left;
	}

#navi ul li a {	
	color: #fff;
	width: 80px;
	height: 80px;
	padding: 0 10px;
	text-decoration: none;
	display: block;
	border-left: 1px solid #fff;
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
	}
	
#content {
	padding: 150px 10px 10px 10px;
	}
	</style>
</head>
<body>
<div id="center">
	<div id="navi">
		<ul>
		 <li><a href="#">Link1</a></li>
		 <li><a href="#">Link2</a></li>
		 <li><a href="#">Link3</a></li>
		 <li><a href="#">Link4</a></li>
		</ul>
	</div>
	<div id="content">
<p>
	Eum commodo qui duis consequat ipsum ut, in facilisi enim lobortis te vero, exerci nisl facilisi molestie odio luptatum? Consequat, diam feugiat aliquam in vel, ipsum vel, lobortis praesent duis dignissim dolor magna tation. Delenit consectetuer ut consequat exerci, tation te molestie, aliquip augue aliquip dolor erat ex dolore. Ipsum et crisare, luptatum facilisis dolor. Feugiat lobortis iriuredolor nibh molestie enim feugiat nibh. 
Sed in praesent ex et hendrerit vulputate velit quis eu esse ut hendrerit minim sciurus. Et feugiat hendrerit dolore, at ut dolor autem quis elit, feugait odio, at quis dolor sit iusto, ex blandit hendrerit eros veniam molestie luptatum. Diam autem lobortis iusto et, vel odio qui nisl. Ad minim feugait nibh ad. 
</p>

<p>
Tincidunt consequat delenit ea autem et delenit eum diam adipiscing lobortis et. Magna nulla accumsan commodo in accumsan in nulla, lobortis duis nisl wisi velit autem minim. Tincidunt duis qui nulla autem eum duis ut enim. Praesent dolore ad dolor consequat, wisi tincidunt luptatum, ad quis. 
Elit nulla volutpat velit, facilisi te odio exerci praesent erat vulputate facilisis aliquam. Lobortis, dignissim autem velit ut, vero commodo suscipit eum suscipit adipiscing quis augue minim facilisis! Ut ullamcorper molestie nisl hendrerit, nonummy feugait dolore augue in dolore eum! Nonummy hendrerit nisl iriuredolor, qui wisi eum praesent diam aliquam exerci tincidunt aliquip, blandit nisl at eu consectetuer erat iriure velit nulla ea! Consequat ad ea tincidunt vel dignissim ut odio duis iriuredolor ipsum dolor praesent nulla laoreet elit adipiscing lorem facilisis qui magna. Autem ea vel veniam feugiat ea facilisi. 
</p>

<p>
Commodo eum illum luptatum vulputate qui suscipit esse. Vel dolore vulputate nonummy nisl velit dignissim sciurus quis ad accumsan velit aliquam nulla minim. Esse autem te, praesent luptatum ullamcorper minim nibh praesent ea autem delenit dolore? 
</p>

<p>
Eum commodo qui duis consequat ipsum ut, in facilisi enim lobortis te vero, exerci nisl facilisi molestie odio luptatum? Consequat, diam feugiat aliquam in vel, ipsum vel, lobortis praesent duis dignissim dolor magna tation. Delenit consectetuer ut consequat exerci, tation te molestie, aliquip augue aliquip dolor erat ex dolore. Ipsum et crisare, luptatum facilisis dolor. Feugiat lobortis iriuredolor nibh molestie enim feugiat nibh. 
</p>

<p>
Sed in praesent ex et hendrerit vulputate velit quis eu esse ut hendrerit minim sciurus. Et feugiat hendrerit dolore, at ut dolor autem quis elit, feugait odio, at quis dolor sit iusto, ex blandit hendrerit eros veniam molestie luptatum. Diam autem lobortis iusto et, vel odio qui nisl. Ad minim feugait nibh ad. 
</p>

<p>
Tincidunt consequat delenit ea autem et delenit eum diam adipiscing lobortis et. Magna nulla accumsan commodo in accumsan in nulla, lobortis duis nisl wisi velit autem minim. Tincidunt duis qui nulla autem eum duis ut enim. Praesent dolore ad dolor consequat, wisi tincidunt luptatum, ad quis. 
</p>

<p>
Elit nulla volutpat velit, facilisi te odio exerci praesent erat vulputate facilisis aliquam. Lobortis, dignissim autem velit ut, vero commodo suscipit eum suscipit adipiscing quis augue minim facilisis! Ut ullamcorper molestie nisl hendrerit, nonummy feugait dolore augue in dolore eum! Nonummy hendrerit nisl iriuredolor, qui wisi eum praesent diam aliquam exerci tincidunt aliquip, blandit nisl at eu consectetuer erat iriure velit nulla ea! Consequat ad ea tincidunt vel dignissim ut odio duis iriuredolor ipsum dolor praesent nulla laoreet elit adipiscing lorem facilisis qui magna. Autem ea vel veniam feugiat ea facilisi. 
</p>

<p>
Commodo eum illum luptatum vulputate qui suscipit esse. Vel dolore vulputate nonummy nisl velit dignissim sciurus quis ad accumsan velit aliquam nulla minim. Esse autem te, praesent luptatum ullamcorper minim nibh praesent ea autem delenit dolore? 
</p>

	<div>
</div>
</body>
</html>

;)

Ist aber nur auf die Schnelle gerade vor dem Frühstück zusammen geklopft und nicht gegen alle Browser getestet. Ich denke, das mindestens der IE6 wegen dem position: absolute; ins Schleudern kommen wird.

Gruß Stefan
 

Hausmeister76

Adams Parmäne
Registriert
17.08.04
Beiträge
1.300
hmmm also irgendwie komm ich gerade nicht klar mit deinem letzten Post...bin mir noch unsicherer ob du mich richtig verstanden hast.....

Ich habe meinen Link nochmals aktualisiert....um dir eventuell besser zeigen zu können, was ich meine.
Ich will den Text "Link1", "Link2", "Link3" und "Link4" (also den Linktext) aus der oberen Ecke heraus haben. Eine Zentrierung in der Mitte, wäre schonmal ein Anfang, nur wäre eine absolute Positionierung mit Abstandsangaben zu den einzelnen Aussenrändern der Blöcken mir lieber.... wenn ich ein

margin: 10 10 10 10

versuche (eagl wo!) dann versetzt er immer den gesamten Block und nicht nur den Linktext. Scheinbar hat das aber was mit der Eigenschaft der Liste zu tun. Eventuell fehlt auch nur ein kleines Stück, damit es funktioniert....

Jetzt eventuelll besser verstanden?

danke dir

so long....
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

achso - du willst es also nicht so wie Du's aufmalst, sondern das der Text innerhalb der von den weißen Linien begrenzten Blöcke genau in der vertikalen und horizontalen Mitte hängt !?

Also so:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tankstelle Falkenhain</title>
	<style type="text/css" media="screen">
body {
	background: #e5e5e5;
	margin: 0:
	padding: 0;
	font-family: Verdana, sans-serif;
	}

#center {	
	background: #fff;
	margin: 0 auto;
	width: 700px;
	}

#navi {	
	padding: 0;
	margin: 0;
	background: #c00;
	height: 97px;
	position: absolute;
	top: 0;
	}

#navi ul {
	background: #011538;
	list-style: none;
	height: 80px;
	padding: 0 0 0 298px;
	border-top: 1px solid #fff;
	}

#navi ul li {
	float: left;
	}

#navi ul li a {	
	color: #fff;
	width: 80px;
	height: 80px;
	padding: 30px 10px;
	text-decoration: none;
	display: block;
	border-left: 1px solid #fff;
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
	}
	
#content {
	padding: 150px 10px 10px 10px;
	}
	</style>
</head>
<body>
<div id="center">
	<div id="navi">
		<ul>
		 <li><a href="#">Link1</a></li>
		 <li><a href="#">Link2</a></li>
		 <li><a href="#">Link3</a></li>
		 <li><a href="#">Link4</a></li>
		</ul>
	</div>
	<div id="content">
<p>
	Eum commodo qui duis consequat ipsum ut, in facilisi enim lobortis te vero, exerci nisl facilisi molestie odio luptatum? Consequat, diam feugiat aliquam in vel, ipsum vel, lobortis praesent duis dignissim dolor magna tation. Delenit consectetuer ut consequat exerci, tation te molestie, aliquip augue aliquip dolor erat ex dolore. Ipsum et crisare, luptatum facilisis dolor. Feugiat lobortis iriuredolor nibh molestie enim feugiat nibh. 
Sed in praesent ex et hendrerit vulputate velit quis eu esse ut hendrerit minim sciurus. Et feugiat hendrerit dolore, at ut dolor autem quis elit, feugait odio, at quis dolor sit iusto, ex blandit hendrerit eros veniam molestie luptatum. Diam autem lobortis iusto et, vel odio qui nisl. Ad minim feugait nibh ad. 
</p>

<p>
Tincidunt consequat delenit ea autem et delenit eum diam adipiscing lobortis et. Magna nulla accumsan commodo in accumsan in nulla, lobortis duis nisl wisi velit autem minim. Tincidunt duis qui nulla autem eum duis ut enim. Praesent dolore ad dolor consequat, wisi tincidunt luptatum, ad quis. 
Elit nulla volutpat velit, facilisi te odio exerci praesent erat vulputate facilisis aliquam. Lobortis, dignissim autem velit ut, vero commodo suscipit eum suscipit adipiscing quis augue minim facilisis! Ut ullamcorper molestie nisl hendrerit, nonummy feugait dolore augue in dolore eum! Nonummy hendrerit nisl iriuredolor, qui wisi eum praesent diam aliquam exerci tincidunt aliquip, blandit nisl at eu consectetuer erat iriure velit nulla ea! Consequat ad ea tincidunt vel dignissim ut odio duis iriuredolor ipsum dolor praesent nulla laoreet elit adipiscing lorem facilisis qui magna. Autem ea vel veniam feugiat ea facilisi. 
</p>

<p>
Commodo eum illum luptatum vulputate qui suscipit esse. Vel dolore vulputate nonummy nisl velit dignissim sciurus quis ad accumsan velit aliquam nulla minim. Esse autem te, praesent luptatum ullamcorper minim nibh praesent ea autem delenit dolore? 
</p>

<p>
Eum commodo qui duis consequat ipsum ut, in facilisi enim lobortis te vero, exerci nisl facilisi molestie odio luptatum? Consequat, diam feugiat aliquam in vel, ipsum vel, lobortis praesent duis dignissim dolor magna tation. Delenit consectetuer ut consequat exerci, tation te molestie, aliquip augue aliquip dolor erat ex dolore. Ipsum et crisare, luptatum facilisis dolor. Feugiat lobortis iriuredolor nibh molestie enim feugiat nibh. 
</p>

<p>
Sed in praesent ex et hendrerit vulputate velit quis eu esse ut hendrerit minim sciurus. Et feugiat hendrerit dolore, at ut dolor autem quis elit, feugait odio, at quis dolor sit iusto, ex blandit hendrerit eros veniam molestie luptatum. Diam autem lobortis iusto et, vel odio qui nisl. Ad minim feugait nibh ad. 
</p>

<p>
Tincidunt consequat delenit ea autem et delenit eum diam adipiscing lobortis et. Magna nulla accumsan commodo in accumsan in nulla, lobortis duis nisl wisi velit autem minim. Tincidunt duis qui nulla autem eum duis ut enim. Praesent dolore ad dolor consequat, wisi tincidunt luptatum, ad quis. 
</p>

<p>
Elit nulla volutpat velit, facilisi te odio exerci praesent erat vulputate facilisis aliquam. Lobortis, dignissim autem velit ut, vero commodo suscipit eum suscipit adipiscing quis augue minim facilisis! Ut ullamcorper molestie nisl hendrerit, nonummy feugait dolore augue in dolore eum! Nonummy hendrerit nisl iriuredolor, qui wisi eum praesent diam aliquam exerci tincidunt aliquip, blandit nisl at eu consectetuer erat iriure velit nulla ea! Consequat ad ea tincidunt vel dignissim ut odio duis iriuredolor ipsum dolor praesent nulla laoreet elit adipiscing lorem facilisis qui magna. Autem ea vel veniam feugiat ea facilisi. 
</p>

<p>
Commodo eum illum luptatum vulputate qui suscipit esse. Vel dolore vulputate nonummy nisl velit dignissim sciurus quis ad accumsan velit aliquam nulla minim. Esse autem te, praesent luptatum ullamcorper minim nibh praesent ea autem delenit dolore? 
</p>

	<div>
</div>
</body>
</html>

Oder hab ich's immer noch nicht? Falls nicht: Mal doch einfach mal auf, wie's sein soll, dann tue ich mich leichter.

Gruß Stefan
 

Hausmeister76

Adams Parmäne
Registriert
17.08.04
Beiträge
1.300
hi stefan...

ja, genau, das ist schonmal ein anfang...so soll es aussehen... scheinbar hab ich mich am Anfang doch ein wenig undeutlich ausgedrückt, oder aber du hättest noch in Ruhe zu ende frühstücken sollen....:-D

das der Linktext jetzt in der Zentriert in der Mitte steht, ist schonmal sehr gut. Kann man aber auch den Text etwas weiter nach links unten schieben?

hab den Link nochmals aktualisiert...

so long...
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

ja die Position des Linktextes innerhalb der Blöcke steuerst Du mit der Anweisung
Code:
#navi ul li a {	
	...
	padding: 30px 10px;
	...
	}

Im vorliegenden Fall habe ich für oben und unten einen Abstand innerhalb der Box von 30px und für links und rechts einen Abstand von 10 px gewählt. Grundsätzlich kannst Du die Angaben aber frei verändern:

Code:
#navi ul li a {	
	...
	padding: alle;
	padding: oben/unten links/rechts;
	padding: oben rechts unten links;
	...
	}

Also: eine Angabe (in px, em, mm, pt) wirkt auf alle Abstände gleichmässig. Zwei Angaben (wie im Beispiel) wirken auf horizontale und vertikale Abstände. Vier Angaben auf die einzelnen Ränder im Uhrzeigersinn. Natürlich ist auch "0" eine gültige Angabe (dann sogar ohne Maßeinheit) um z.B. an einer Ecke keinen Abstand zu haben.

Viel Spaß beim Experimentieren.

Gruß Stefan
 

Hausmeister76

Adams Parmäne
Registriert
17.08.04
Beiträge
1.300
hmmm....also irgendwie hatte das bei meiner ersten Version nicht geklappt mit dem
Code:
padding: wert1 wert2
komisch, zumal ich schon seit gestern abend daran sitze, und dann irgendwann verzweifelt bin....

Danke dir nochmals....


so long...
 

msx3000

Martini
Registriert
19.05.05
Beiträge
646
Wenn Du die Werte für padding oder margin in eine Zeile schreibst, also z.B. padding: 20px 0px 30px 0px; , dann musst Du alle vier Werte schreiben mit zwei Werten dürfte die Angaben nicht funktionieren.

Padding: Wert1 Wert2 Wert3 Wert4;

Wert1:
oben

Wert2: rechts

Wert3: unten

Wert4: links

Du fängst oben an mit der Pixelangaben und dann im Uhrzeigersinn weiter. Willst Du nur eine Richtung per padding oder margin verändern, dann verwende einfach padding-top, -right, -bottom, -left;

EDIT: stk hat auch schon darauf hingewiesen, das Beispiel mit den zwei Werten, war vielleicht etwas verwirrend.
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

Wenn Du die Werte für padding oder margin in eine Zeile schreibst, also z.B. padding: 20px 0px 30px 0px; , dann musst Du alle vier Werte schreiben mit zwei Werten dürfte die Angaben nicht funktionieren.

Selbstredend funktioniert das. Es funktionieren auch 3 Angaben. Siehe auch unter SELFHTML:

SELFHTML schrieb:
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

Gruß Stefan
 

msx3000

Martini
Registriert
19.05.05
Beiträge
646
Moin,
Selbstredend funktioniert das. Es funktionieren auch 3 Angaben. Siehe auch unter SELFHTML:
Gruß Stefan

oh:oops:, das wusste ich nicht. Kannte es nur mit allen vier Angaben oder Einzeln. Naja, man sollte den Profis einfach mal vertrauen schenken;).
Dann wundert mich aber warum Hausmeister76 immer noch Probleme hato_O.

schönen Gruß

Matthias