1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS - Eine Frage zu <ul>

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Hausmeister76, 10.08.06.

  1. Hausmeister76

    Hausmeister76 Adams Parmäne

    Dabei seit:
    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...
     
  2. stk

    stk Grünapfel

    Dabei seit:
    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
     
  3. Hausmeister76

    Hausmeister76 Adams Parmäne

    Dabei seit:
    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....
     
  4. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    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
     
  5. Hausmeister76

    Hausmeister76 Adams Parmäne

    Dabei seit:
    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....
     
  6. stk

    stk Grünapfel

    Dabei seit:
    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
     
  7. Hausmeister76

    Hausmeister76 Adams Parmäne

    Dabei seit:
    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...
     
  8. stk

    stk Grünapfel

    Dabei seit:
    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
     
  9. Hausmeister76

    Hausmeister76 Adams Parmäne

    Dabei seit:
    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...
     
  10. msx3000

    msx3000 Martini

    Dabei seit:
    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.
     
  11. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

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

    Gruß Stefan
     
  12. msx3000

    msx3000 Martini

    Dabei seit:
    19.05.05
    Beiträge:
    646
    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
     

Diese Seite empfehlen