zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Listenelemente dynamisch an Breite anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2009, 23:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard Listenelemente dynamisch an Breite anpassen

Hey Folks,

ich würde gerne horizontal angeordnete Listenelemente, je nach Bildschimauflösung, an die komplette Breite anpassen (div oder body). Minimum ist sozusagen ein "nowrap" der Elemente.

Weiss da jmd. etwas?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2009, 01:37
Benutzerbild von THePointer
Gründer des Zirkels
neuer user
 
Registriert seit: 01.12.2006
Ort: Bamberg
Beiträge: 38
THePointer befindet sich auf einem aufstrebenden Ast
Standard

na ja mit prozendualen angaben der breiten könntest du es mal versuchen

dein code wird ja sowas in der art sein:

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

Jetzt gehen wir davon aus dass ul 100% (bildschirm) breite hat und dann gibst du jetzt einfach li eine width: 25%; probiers mal vllt. funtzt es ja
__________________
"Ich glaube kaum, dass der liebe Gott mit Würfeln spielt"
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2009, 02:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Beitrag

Sieht eher so aus und da liegt wahrscheinlich das Problem mit den %:

<ul>
<li>das hier soll sich anpassen
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>und das hier auch
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>
usw.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.03.2009, 14:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2005
Beiträge: 165
tesa befindet sich auf einem aufstrebenden Ast
Standard

und das ist alles horizontal in einer reihe?
__________________
"Das macht nicht wirklich Sinn" hat eigentlich keinen Sinn!
Mit Zitat antworten
  #5 (permalink)  
Alt 13.03.2009, 17:20
Benutzerbild von THePointer
Gründer des Zirkels
neuer user
 
Registriert seit: 01.12.2006
Ort: Bamberg
Beiträge: 38
THePointer befindet sich auf einem aufstrebenden Ast
Standard

kannst du vllt einfach mal den html+css code posten

das würde echt helfen dir zu helfen
__________________
"Ich glaube kaum, dass der liebe Gott mit Würfeln spielt"
Mit Zitat antworten
  #6 (permalink)  
Alt 13.03.2009, 18:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Beitrag

HTML-Code:
<style type="text/css" media="screen">

body { 
	text-align:center;  
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0; 
	padding:0; 
}

#page { 
	text-align:left;   
	padding:0em; 
}


/* ~~~ Navigation ~~~ */

#navi, #navi ul { 
	list-style-type:none; 
	margin:0; 
	padding:0; 
} /* Style-Reset */

#navi li { 
	width:205px; /* Button-Breite */ 
	float:left; 
} /* Horizontale Anordnung */
		
#navi li ul { 
	display:none; 
} /* Normalzustand eingeklappt */

#navi li:hover ul { 
	display:block; 
} /* Ausgeklappt */
		

/* ~~~ Styles ~~~ */
	  
#navcontainer { 
	height:50px; /* Hoehe Button-Container */
	position:relative;
	order-right:1px solid black;
	width: 86.8%;
	background:#F2C13A; 
}
	  
#navi { 
	position:absolute; 
}
	  
#navi li { 
	border-left:1px solid #000; 
	border-top:1px solid #000; 
	margin:0;		 
}

#navi ul li { 
	border:none; 
	margin:0; /* Abstand Listenelemente */ 
	width:160px; /* Breite Listenelemente */
}
		
#navi a { 
	font-weight:bold; 
	text-align:center; 
	display:block; 
	padding:0.4em; 
}

#navi a:link, #navi a:visited { 
	color:#000; 
	background:#FFF; 
	text-decoration: none; 
}

#navi a:active, #navi a:hover { 
	color:#000; 
	background:#F2C13A; 
	text-decoration:none; 
}

</style>
HTML-Code:
<div id="page">
  <div id="navcontainer">
    <ul id="navi">
      <li><a href="##">Element 1</a>
	<ul>
	  <li><a href="#" >Link</a></li>
	  <li><a href="#"i>Link</a></li>
         <li><a href="#"i>Link</a></li>
	</ul>
      </li>
      <li><a href="##">Element 2</a>
        <ul>
	  <li><a href="##">Link</a></li>
	  <li><a href="##">Link</a></li>
         <li><a href="##">Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div> 
Element 1, 2, ... sollen sich der Breite anpassen
Mit Zitat antworten
  #7 (permalink)  
Alt 14.03.2009, 10:24
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Wenn die Anzahl der LI-Elementen bekannt ist (so wie im Beispiel), kannst Du deren Breite im Prozent angeben (In Diesem Fall 50%).

Wenn die Anzahl der LI-Elementen veränderbar sein sollte (wie bei einer CMS), könntest Du bei Deiner Navi eine Tabelle simulieren (display: table; table-row; table-cell).

Grüße: Emil
Mit Zitat antworten
  #8 (permalink)  
Alt 14.03.2009, 10:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ronjambo Beitrag anzeigen
#navi li {
width:205px; /* Button-Breite */
float:left;
} /* Horizontale Anordnung */
wie soll sich das erste <li> an die breite anpassen, wenn du hier eine breite vorgibst?
Mit Zitat antworten
  #9 (permalink)  
Alt 16.03.2009, 02:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

@etux: Listenelemente bleiben unverändert. Ich habe schonmal kurz mit % rumgespielt, allerdings komme ich da auf krumme Zahlen, wie z.B. 49.8% usw. Liegt wahrscheinlich an "border".
Das mit der simulierten Tabelle verstehe ich nicht ganz, klingt aber trotzdem sehr interessant. Hast du mal ein Beispiel?

@hubert17: Das ist richtig. CSS war noch nicht ganz aktuell. Hatte ich übersehen.

Ich werde heute oder morgen mal alles ausprobieren und den letzten Stand dann posten.

Danke für die Antworten!!!


Greetz
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.03.2009, 02:28
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von ronjambo Beitrag anzeigen
Liegt wahrscheinlich an "border".
Ja, mit Sicherheit.
Zitat:
Zitat von ronjambo Beitrag anzeigen
Das mit der simulierten Tabelle verstehe ich nicht ganz, klingt aber trotzdem sehr interessant. Hast du mal ein Beispiel?
Nein, aber Du könntest die Navi hier auf die Schnelle etwas umformatieren. Und zwar:
- body bekommt display: table
- ul#mainNav bekommt display: table-row
- ul#mainNav a und ul#mainNav strong bekommen display: block (anstatt display: inline-block)
Betrachte es aber nur als Beispiel zum Üben (oder Weiterbasteln).
Grüße: Emil
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
100% Breite mit 2 Div's in einer Zeile, nur eines wächst und schrumpft dynamisch stefan1397 CSS 22 04.05.2011 15:33
DIV an Breite anpassen... GELight (X)HTML 5 17.03.2007 19:42
3 Spalten, Breite des Inhalts dynamisch schmidtsmikey CSS 1 30.10.2006 12:39
div/liste Breite an Inhalt anpassen freezer CSS 5 17.08.2005 02:18
3 Divs, links u. rechts dynamisch - mitte feste breite donhoolio CSS 3 04.04.2005 16:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:22 Uhr.