Exakt gleiche Abstände via JS (zb in Navigation)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
strichkreis

strichkreis hat kostenlosen Webspace.
1:34, 6.5.2013
Htag/all">allo.

ich hab da ne kleine Herausforderung ;)

Ich möchte in der Navigation meines Wordpress-Blogs zwischen den einzelnen Elementen möglichst exakt gleichgroße Abstände haben. Am Linken und rechten Rand der Navigation soll zum ersten bzw letzten Navigationselement kein bzw. ein vom Rest unabhängiger Abstand sein (im Beispiel ist dieser gleich null, damit es verständlicher wird).

Jedes Navigationselement hat ja eine sichtbare Länge, nämlich die Länge aller Buchstaben des Wortes/Menüpunktes. Es geht deshalb nicht, allen Navigationslistenelementen eine identische fixe Breite zu geben, da so letzten Endes die Abstände doch wieder abhängig von den Wortlängen sind.

Also habe ich mir gedacht, ich habe eine divbox mit fixer Länger (die mir bekannt ist), setze darein eine divbox mit variabler Länge, in denen die ganzen Listenelemente liegen (die also, je nachdem, wie viel man in die Navigationspunkte schreibt, unterschiedlich lang ist), und gebe dann jedem dieser Listenelemente einen über JS ermittelten Außenabstand (dass am Ende die variable Box genauso lang ist wie die fixe box).

Ansatz:
```
<div> mit fixierter breite
	<div> mit variabler breite
		<li><a>elemente hintereinanderweg
```
-> Variable breite = summe aller li-a-breiten (li-a-breite ergibt sich aus text)
-> fixe breite - variable breite = whitespace
-> whitespace / anzahl aller li-a-elemente (minus 1) = teilbreite
- li-a- margin-right: teilbreite;
- das letzte li-a-element bekommt margin-right:0px;

Code:
```
<script type="text/javascript" event="onload()">
function Abstand() {
	var bf, bv, ws, bt, anz;
  bv = document.getElementById('site-navigation').getElementsByClassName('menu-wp-2012-container').style.width;
  bf = document.getElementById('site-navigation').style.width;
  ws = bf - bv;
  anz = document.getElementById('menu-wp-2012').getElementsByTagName("li").length;
  bt = ws / ( anz - 1 );
  
  document.getElementById('menu-item-19').style.marginRight += bt;
  document.getElementById('menu-item-20').style.marginRight += bt;
  document.getElementById('menu-item-21').style.marginRight += bt;
  document.getElementById('menu-item-22').style.marginRight += bt;
  
}
</script>
```
site-navigation ist die ID einer Divbox mit fester Breite,
innerhalb der #site-navigation liegt eine divbox mit der Klasse menu-wp-2012-container, dass ist die variable breite: direkt darin liegt die <ul>...</ul> ohne weitere fixe Breitenangaben.
anz enthält die Anzahl der Listenelemente, die innerhalb der <ul id="menu-wp-2012"> liegen.
danach (das hab ich hier alles ausgeschrieben) werden die ersten 4 der 5 navigationselemente mit je einem viertel des ermittelten whitespace als rechter Außenabstand ausgestattet.

Das script hab ich im <head>, und rufe es mit onload="Abstand();" im Body-tag auf. Aber irgendwie passiert da nix.

Hat hier jemand eine Idee, woran das liegen könnte, bzw was ich falsch gemacht habe??
(die genannten ids und klassen gibt es alle)

mfg, strichkreis (till)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
hc-tools

hc-tools hat kostenlosen Webspace.

12:03, 6.5.2013
Das Problem ist, dass du es beim onload aufrufst. Zu dieser Zeit hat der Browser die divs ja noch nicht erstellt. Somit läuft dein Script in undefinierte Variablen und es passiert nichts. Gut sehen kannst du dass auch, wenn du Firebug in deinem Browser installierst. Dort wird dann genau dass als Bug vermerkt sein. Du musst also nachdem all deine divs konstruiert sind deine Funktionon in einem Script Tag aufrufen.
suchweb

suchweb hat kostenlosen Webspace.
14:08, 6.5.2013
vielleicht mit jQuery .css in $('document').ready(function() { ... });
```
$('document').ready(function() { 
  
  var breite = $("#site-navigation").width(); 
  var anzahl = $("#site-navigation ul").children().length;
  
  var bt = Math.floor( breite / anzahl );
  // var bt = 150; 
  
  $("#menu-item-19").css("width", bt + "px"); 
  $("#menu-item-20").css("width", bt + "px"); 
  $("#menu-item-21").css("width", bt + "px"); 
  
});
```
nicht getestet .. ;)

EDIT ... oder sonst mit "pure" JS das JS-Script erst am Ende der Datei (vor </body>) ausführen,
damit die Elemente, die verwendet werden, vorher schon (im DOM) "geladen" sind ...

Beitrag zuletzt geändert: 6.5.2013 14:12:00 von suchweb
Autor dieses Themas
strichkreis

strichkreis hat kostenlosen Webspace.

15:21, 6.5.2013

hc-tools schrieb:
Das Problem ist, dass du es beim onload aufrufst. Zu dieser Zeit hat der Browser die divs ja noch nicht erstellt. Somit läuft dein Script in undefinierte Variablen und es passiert nichts. Gut sehen kannst du dass auch, wenn du Firebug in deinem Browser installierst. Dort wird dann genau dass als Bug vermerkt sein. Du musst also nachdem all deine divs konstruiert sind deine Funktionon in einem Script Tag aufrufen.

Danke erstmal für den Hinweis, dawär ich so nicht drauf gekommen ^^ Werd ich gleich mal ausprobieren.

suchweb schrieb:
vielleicht mit jQuery .css in $('document').ready(function() { ... });

das versteh ich irgendwie nicht ganz

19:43, 6.5.2013

nagut, hier nochmal als funktionierendes (selbsterklärendes) Beispiel (komplette Seite)

1. jQuery laden
2. Breite von div ID #site-navigation (in Pixel) ermitteln
3. Anzahl der <li> Elementen innerhalb <ul> innerhalb div ID #site-navigation ermitteln
4. Breite für jedes einzelne <li> Element berechnen
... (berechneter Wert minus (anzahl * 4) wegen Abstände dazu)
5. jedem <li> Element innerhalb <ul> innerhalb div ID #site-navigation neue Breite zuweisen
6. jedem <a> Element innerhalb <li> ... neue Breite zuweisen ... (inkl. Abstände beachten)
... habs mit CSS display:block; ausprobiert, ging aber nicht ... komisch ?!?! ... naja, dann halt so ...
7. Info der ermittelten / berechneten Werte div ID #debug-info ausgeben ( kann man auch weg lassen)

<html>
<head>
<title>Dynamische Breite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
/* <![CDATA[ */

$('document').ready(function() {
	
	var breite = $("#site-navigation").width();
	
	var anzahl = $("#site-navigation ul").children().length;
	
	var bt = ( Math.floor( breite / anzahl ) - (anzahl * 4));
	
	$("#site-navigation ul li").css("width", bt + "px");
 	$("#site-navigation ul li a").css("width", (bt - 8) + "px"); 
	
	$("#debug-info").html("\n<p>Gesamt Breite: " + breite + " Pixel</p>\n<p>Elemente Anzahl: " + anzahl + "</p><p>Breite je Element: \n" + bt + " Pixel</p>\n");

});

/* ]]> */
</script>

<style type="text/css">
<!--

body {
	font-family: Verdana, Arial;
	font-size: 12px;
	color: #000000;
	background: #FFFFFF;
}

#wrapper {
	text-align: center;
	margin: 8px;
	padding: 6px;
	background: #EFEFEF;
}

#site-navigation {
	margin: 0 auto; 
	width: 900px; 
	background: #FFAAFF;
	height:36px;
}

#site-navigation ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#site-navigation li {
	float:left;
	margin: 4px 0px 0px 6px;
	padding: 4px;
	background: #DEDEDE;
}

#site-navigation li a {
	float: left; 
/*--- 	display:block  // --- geht nicht ??? ---  */
	margin: 0px;
	padding: 2px 4px 2px 4px;
	text-align: center; 
	background: #CCFFAA;
}

#site-navigation li a {
	float: left; 
	margin: 0px;
	padding: 2px 4px 2px 4px;
	text-align: center; 
	background: #CCFFAA;
	text-decoration: none; 
}

#site-navigation li a:hover {
	background: #CCCCFF;
	text-decoration: none; 
}


#debug-info {
	margin: 0 auto;
	padding: 6px;
	background: #DEDEDE;
	width:520px;
	text-align: left;
}

-->
</style>


</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="wrapper">

<div id="site-navigation">

<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
</ul>

</div>


<br />
<br />
<br />

<div id="debug-info">
</div>

<br />
<br />
<br />

</div>


</body>
</html>

... mit Hintergrund-Farben, damit man die einzelnen Blöcke besser sieht ;)

Wenn Du die Breite von #site-navigation änderst und / oder die Anzahl der <li> Elemente
dann bekommst Du auch eine andere (einheitliche) Breite für jedes einzelnes <li> Element
... probier es aus .... :)

sollte "selbsterklärend" sein
... jQuery ist doch sooooooo einfach .... und gut dokumentiert .... es gibt viele Beispiele

Mit diesem Beispiel solltest Du es jetzt (irgendwie) verstehen :=) ... hoffe ich :oO

EDIT .... Frage an die Experten ... warum geht hier CSS display:block; für <a> innerhalb <li> nicht ???

Beitrag zuletzt geändert: 6.5.2013 20:17:33 von suchweb

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city