Listenelemente dynamisch an Breite anpassen - Seite 2

ronjambo · #11 (**permalink**) 17.03.2009, 21:46

So, habe jetzt etwas rumgespielt, komme aber noch nicht auf die gewünschte Lösung. Im Endeffekt sollen alle Dropdowns wie "Drecksding" aussehen. Ich bekomme das Menü einfach nicht auf 100%. Sobald ich bei

Code:

#navi li { 
	width:14.1%; 
	float:left; 
} /* Horizontale Anordnung */

über 14% gehe verschiebt sich das dämliche "Drecksding" ab einer bestimmten Auflösung.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
body { 
	text-align:center; 
	font-size:90%; 
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; 
	margin:0; 
	padding:0; 
}

#page { 
	width:100%; 
	text-align:left; 
	background:#FFF; 
	padding:0; 
}

.clear { 
	clear:both; 
}

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

#navi li { 
	width:14.1%; 
	float:left; 
} /* Horizontale Anordnung */
		
#navi li ul { 
	display:none; 
} /* Normalzustand eingeklappt */

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

#navcontainer { 
	height:16px; 
	position:relative; 
}
	  
#navi { 
	position:absolute; 
}
	  
#navi li { 
	border-right:1px solid #000;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	margin:0 0px 0 0; 
}

#navi ul li { 
	border:none; 
	margin:0; 
	width:100%; 
}
		
#navi a { 
	font-weight:bold; 
	text-align:center; 
	display:block; 
	padding:0.1em; 
}

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

#navi a:active, #navi a:hover { 
	color:#000; 
	background:#FFF; 
	text-decoration:none; 
}
	  
</style>
	
	<!--[if lte IE 6]>
	  <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
	<![endif]-->
	
  </head>
  <body>

<div id="page">

<div id="navcontainer">
<ul id="navi" style="width:100%;">
  <li><a href="#" style="border-left:1px solid black;">xxxxx</a></li>
  <li><a href="#">xxxxx</a>
    <ul>
      <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
    </ul>
  </li>
  <li><a href="#">xxxxxxxxxxx</a>
    <ul>
      <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
    </ul>
  </li>
  <li><a href="#">xxxxxxxx</a>
    <ul>
      <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
    </ul>
  </li>
  <li><a href="#">xxxxxxxxxxxx</a>
    <ul>
      <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
    </ul>
  </li>
  <li><a href="#">xxxxxxxxxxxxxx</a>
  	<ul>
      <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
    </ul>
  </li>
  <li><a href="#">Drecksding</a>
  	<ul>
      <li><a href="#" style="border-top: 1px solid black; border-bottom: 1px solid yellow; border-left: 1px solid black;">link</a></li>
	  <li><a href="#" style="border-bottom: 1px solid yellow; border-left: 1px solid black;">link</a></li>
	  <li><a href="#" style="border-left: 1px solid black;">link</a></li>
    </ul>
  </li>  
</ul>
</div>

<div class="clear"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="clear"></div>

</body>
</html>

Ich mache drei Kreuze, wenn jemand Rat weiss.

andir · #12 (**permalink**) 17.03.2009, 22:22

#navi hat schon hundert Prozent

Das Problem ist, dass ein möglicher blauer Hintergrund beim Aufklappen #navi nach unten erweitert und ebenfalls zu einem großen blauen Block führt.
Hier könntest Du mit einer Hintergrundgrafik für #navi arbeiten, die einfach nur die obere Leiste in Höhe der Listenpunkte belegt. Schwierig bei "Nur Text" vergrößerern wie FF 2.x und die alten IE, da bei vergrößerter Schriftendarstellung hier eine kleine Kante entsteht.

Pixelgenaues Design ist ohne Tables hier sehr risikoreich, da manche Browser bei bestimmten Werten aufrunden, andere abrunden, zumal noch kein Browser die Berechnung fester Pixelwerte(Border!) + Prozent beherrscht. Die optische Verlängerung des letzten li ( ohne border right, deshalb hier gesonderte Klasse oder ID vergeben) sollte aber für alle wesentlichen Zwecke ausreichen.

ronjambo · #13 (**permalink**) 17.03.2009, 23:08

Zitat:

#navi hat schon 100%

Welche Stelle meinst du?

Mal ein schneller Workaround:

border-right wech...

Code:

#navi li { 
        width:14.28%; 
	float:left; 
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	margin:0; 
}

dafür mit class oder id (hier mal schnell direkt):

Code:

<li><a href="#" style="border-right: 1px solid black;">Drecksding</a>
  	<ul>
      <li><a href="#" style="border-top: 1px solid black; border-bottom: 1px solid yellow; border-left: 1px solid black; border-right:1px solid black;">link</a></li>
	  <li><a href="#" style="border-bottom: 1px solid yellow; border-left: 1px solid black; border-right:1px solid black;">link</a></li>
	  <li><a href="#" style="border-left: 1px solid black; border-right:1px solid black;">link</a></li>
    </ul>
  </li>

Grafiken sollen nicht rein. Table-Style, wie extus schon meinte?

DAMN!!! Im FF geht das, aber im IE 6+ wechselt es. Mal korrekt, etwas kleinere Auflösung wieder falsch, wieder kleinere Auflösung korrekt. AAAALTERRR!

Danke für die Antwort!!!

ronjambo · #14 (**permalink**) 17.03.2009, 23:20

P.S.

Zitat:

Hier könntest Du mit einer Hintergrundgrafik für #navi arbeiten, die einfach nur die obere Leiste in Höhe der Listenpunkte belegt.

Beispiel? Leiste = border-top?

Boris · #15 (**permalink**) 18.03.2009, 15:35

Ich habe sowas auch mal in der Art umgesetzt, aber ohne diesen ganzen table-blubb Krams:

Green-IT | Startseite

Die Breite der obere Navigationspunkte passt sich je nach Länge des Textes an und eine Klappnavigation gibt es auch.

Brauchst du sowas in etwa?

ronjambo · #16 (**permalink**) 18.03.2009, 16:05

Hallo Boris,

danke für die Antwort! Nicht ganz. Die Breite der Navigationspunkte soll sich an die komplette Breite des Divs anpassen und erst aufhören, schmaler zu werden, wenn der jeweilige Buttontext an die eigenen "Button"-Border stößt. Z.B. kann der "Startseite"-Button 100px breit sein oder auch 30px...

Im Grunde brauche ich ein Header-Div, in dem 3 weitere sind. Soll dann ungefähr so aussehen:

|-------------------------------------------------------------------------|
| erstes Navi-Div mit Buttons und Inputfeld (variable Größe) | Div3 (fixe Breite)|
|---------------------------------------------------------| fix fix fix fix fix |
| zweites Navi-Div mit CSS Dropdown (auch variable Größe) | fix fix fix fix fix |
|-------------------------------------------------------------------------|

Darunter zwei iFrames nebeneinander (linkes wieder variabel, rechtes wie Div3. Aber alleine das Layout bekomme ich noch nicht richtig hin. Dropdown im zweiten Div passt sich fast an die komplette Breite an, 100% habe ich auch noch nicht geschafft und eine Art "nowrap" bei der Schrift funzt auch nicht. Habe es mit min-width auf <li>-Elemente probiert.
Beim ersten Div verschieben sich Buttons und Inputfeld. Kein Plan, wie sie dynamisch in der Horizontalen bleiben. mit white-spaces: nowrap tun sie das zwar, aber "rutschen" auch aus dem Div heraus.

Es gibt also noch mächtig Probleme.

Ich poste mal den aktuellsten Code heute abend.

ronjambo · #17 (**permalink**) 26.03.2009, 18:16

Ich dreh echt durch. Neuer Lösungsansatz: Ein Div mit 4 weiteren innerhalb.
Header und Startseite sollen sich dynamisch dem Inhalt anpassen, Logo und Aktion sollen eine feste Breite haben. Leider springts bei mir.

Code:

#inhalt {
    width: 100%;
    height: 100%;
    margin: 0;
	padding: 0;
    background-color:#00FF00;
}

.header {
    width: 86.5%;
    height: 8%;
   	background-color:#FF0000;
    float: left;
	
}

.logo {
    width: 220px;
    height: 8%; 
	background-color: #FFFF00; 
    float: right;
}

.startseite {
    width: 86.5%;
    height: 92%;
    background-color: #933;
    float: left;
}

.aktion {
    width: 220px;
    height: 92%;
    background-color: #c90;
    float: right;
}

Code:

<div id="inhalt">
     <div class="header">
	 	header
     </div>
	 <div class="logo">
	 	logo
     </div>
	
     <div class="startseite">
	 	startseite - hier kommt ein iframe rein
     </div>
	 <div class="aktion">
	 	aktion - hier kommt ein iframe rein
     </div>
</div>

Ä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 14:33
DIV an Breite anpassen...	GELight	(X)HTML	5	17.03.2007 18:42
3 Spalten, Breite des Inhalts dynamisch	schmidtsmikey	CSS	1	30.10.2006 11:39
div/liste Breite an Inhalt anpassen	freezer	CSS	5	17.08.2005 01:18
3 Divs, links u. rechts dynamisch - mitte feste breite	donhoolio	CSS	3	04.04.2005 15:59