Aug 29, 2012

11249

Abstand zwischen Navigationslinks-Buttons immer gleich, wie?

Moin Leude,

folgendes Problem:

Habe ne Ebene im Frontpage, in der eine Navigatiosn eingebaut seinsoll. Allerdings nichts aufweniges sondern nur Textlinks.

Die Ebene ist 800px breit, es sind 6 Navigationslinks, die einzelnen Links sind mit einer Trennlinie getrennt. Natürlich ist der Text unterschiedlich lang. Wie bekomm ich das hin, dass der Abstand zwischen den einzelnen Navilinks immer gelich und symetrisch ist, nichts überlappt?

Freu mich auf Eure Tips

Greetz
De Bätmän

Please also mark the comments that contributed to the solution of the article

Content-Key: 190425

Url: https://administrator.de/contentid/190425

Printed on: April 25, 2024 at 08:04 o'clock

10 Comments

Latest comment

Hallo,

lad es mal bitte hoch und poste den Link. Generell kannst du das alles über CSS steuern, je nachdem wie fit du in den Bereichen bist.

Gruß

Hallo ischbindebaetmaen,

Ich habe keine Ahnung von Frontpage, aber von HTML/CSS.
Mit CSS4you - margin kannst du den __äußeren__ Abstand bestimmen, den ein Element zu einem anderem einhalten soll.

Für ALLE Links könnte das etwa so funktionieren:

a {
    margin:0 50px;
}

Damit bleibt auf der linken UND rechten Seite des Links immer eine "freie Lücke" von 50px breite.

~Arano

Also hier habt ihr mal den Quell Code, hoffe Ihr koöönt so was damit anfangen:

<html>

<head>
<meta http-equiv="Content-Language" content="de"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Testseite</title>
</head>

<body>

	<div style="position: absolute; width: 800; height: 100px; z-index: 1; left: 440; " id="navi"> 
<div style="position: absolute; width: auto; height: 11px; z-index: 1; top: 57px; left: -1px" id="link1"> 
	<p align="center"><font face="Franklin Gothic Book">link1link1link1link1link</font></div> 
<div style="position: absolute; width: 57px; height: 11px; z-index: 1; top: 57px; left: 587px" id="link6"> 
	<p align="center"><font face="Franklin Gothic Book">link6</font></div> 
				<div style="position: absolute; width: 16.36; height: 39; z-index: 4; left: 161px; top: 39px" id="trennlinie"> 
				&nbsp;</div>
			<div style="position: absolute; width: 31px; height: 11px; z-index: 1; top: 57px; left: 555px" id="link5"> 
				<p align="center"> 
				<font face="Franklin Gothic Book">5</font></div> 
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 425px" id="link4"> 
	<p align="center"><font face="Franklin Gothic Book">link4</font></div> 
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 297px" id="link3"> 
	<p align="center"><font face="Franklin Gothic Book">link3link3</font></div> 
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 167px" id="link2"> 
	<p align="center"><font face="Franklin Gothic Book">link2link2link2</font></div> 
<p><br>
&nbsp;</div>
	
</body>

</html>

Hallo,

habe deinen Quelltext mal ein wenig aufgeräumt. Ich würde dir empfehlen, eine separate CSS-Datei zu erstellen. Eingebunden ist diese schon, müsstest nur  rausnehmen und den gesamten <style>-Bereich. Den Inhalt dieses Bereiches dann in die separate CSS-Datei. Alle weiteren Formatierungen bitte dann in der CSS-Datei speichern.

<html>
    <head>
        <meta http-equiv="Content-Language" content="de" />  
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />  
        <!--   CSS am besten in externe Datei auslagern
        <link href="style.css" type="text/css" rel="stylesheet" /> 
        -->
        <title>Testseite</title>
        <style type="text/css">  
            #navi {
               width: 800px;
               height: 50px;
               background-color: #000;
           }
           .links a{
               color: #FFF;
               margin: 10px 50px;
               float: left;
           }
        </style>
    </head>
    <body>
        <div id="navi">  
            <div class="links"><a href="#">Link 1</a></div>  
            <div class="links"><a href="#">Link 2</a></div>  
            <div class="links"><a href="#">Link 3</a></div>  
            <div class="links"><a href="#">Link 4</a></div>  
            <div class="links"><a href="#">Link 5</a></div>  
        </div>
    </body>
</html>

Hi !

Das ist das Ergebnis von Frontpage ? oO

Hand geschrieben ist das einiges weniger (kann weniger sein), allerdings weiss ich nicht ob Frontpage das überhaupt einlesen und weiterverarbeiten kann...:

<html>
  <head>
    <title>Ich mag Frontpage nicht :-P</title>
    <style type="text/css">  
      <!--
        a { display:inline-block;
            margin:60px   /* abstand noch oben (innerhalb des DIVs = oberkannte DIV) */
                   36px   /* abstand nach links*/
                   0      /* abstand nach unten */
                   36px;  /* abstand nach rechts */
                          /* das sind MINDESTabstände !! */
            /**
             *  Der Abstand links UND rechts müssen syncron bleiben,
             *  sonst verschiebt sich die Mitte...
             *  ( Das "|" zwischen den Links rutscht in eine der beiden Richtungen) 
             */
        }
      -->
    </style>
  </head>
  <body>
  
  
  <div style="position: absolute; width: 800; height: 100px; z-index: 1; left: 440; border:1px solid #000000;" id="navi">  
    <a href="">link 1</a> |  
    <a href="">link 2</a> |  
    <a href="">link 3</a> |  
    <a href="">link 4</a> |  
    <a href="">link 5</a> |  
    <a href="">link 6</a>  
  </div>
  
  
  </body>
</html>

~Arano

Edit:
Na wie du siehst haben d4shoerncheN und ich das recht ähnlich gelöst ;)

@d4shoerncheN
Tzä ! Schon wieder bis du schneller gewesen...

Edit 2:
UPS, da fällt mir etwas wichtiges im Quelltext von d4shoerncheN auf !
Eine ID ist ein eindeutiger Identifizierer, er darf also nur ein einziges mal vorkommen - und nicht sechs mal ! (id="link")

Zitat von @Arano:

@d4shoerncheN
Tzä ! Schon wieder bis du schneller gewesen...

Lach

Also wenn Frontpage das da oben zusammengeschustert hat, sollte man Frontpage den Alkohol verbieten ^^ das ist ja grausig :P

Edit
@Arano bzgl. dem <div id="links"> hast du natürlich Recht. Es sollte eigentlich auch <div class="links"> werden und ist oben auch editiert. Danke für den Hinweis, sollte mir meinen Quelltext vorher noch mal angucken

Gruß

Hallo, @ischbindebaetmaen.

Habe hier nun noch einmal beide Varianten zusammengeworfen von Arano und mir. So könntest du es lösen.

index.html

<html>
    <head>
        <title>Ich mag Frontpage nicht :-P</title>
        <link href="style.css" type="text/css" rel="stylesheet" />  
    </head>
    <body>
        <div id="navi">  
            <a href="#">link 1</a> |  
            <a href="#">link 2</a> |  
            <a href="#">link 3</a> |  
            <a href="#">link 4</a> |  
            <a href="#">link 5</a> |  
            <a href="#">link 6</a>  
        </div>
    </body>
</html>

style.css

#navi {
    position: absolute;
    width: 800px;
    height: 100px;
    z-index: 1;
    left: 440px;
    border:1px solid #000000;
}
a { display:inline-block;
            margin:60px   /* abstand noch oben (innerhalb des DIVs = oberkannte DIV) */
                   36px   /* abstand nach links*/
                   0      /* abstand nach unten */
                   36px;  /* abstand nach rechts */
                          /* das sind MINDESTabstände !! */
            /**
             *  Der Abstand links UND rechts müssen syncron bleiben,
             *  sonst verschiebt sich die Mitte...
             *  ( Das "|" zwischen den Links rutscht in eine der beiden Richtungen) 
             */
        }

Gruß
@d4shoerncheN

das scheint so ganz gut so funktionieren. Wenn ich jetzt statt diesem normalen Strich eine Trennlinie aus Photoshop einfügen will, wie muss ich dass img in diesen Code einbinden?

Hallöchen,

anstelle von "|" schreibst du dann

<img src="pfad/zur/grafik.jpg">  

~Aramo

Hallo

Oder aber du setzt hinter jedem Link ein Hintergrundsbild.

z.B. in der CSS mit background-image: url(./images/trennlinie.png);

Hat einfach den Vorteil, dass dein Quelltext von der Hauptseite übersichtlich bleibt und die Formatierungen (wie es gewünscht ist) weiterhin in der CSS-Datei hinterlegt werden. Und du musst bei einer Änderung der Trennlinie nicht fünf Stellen, sondern nur noch eine Stelle editieren.

Könnte ungefähr so aussehen:

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">  
<title>Frontpage ist immer noch doof.</title>
<link href="style.css" rel="stylesheet" type="text/css">  
</head>

<body>
	<div id="content">  
    	<div id="navi">  
        <div class="menuepunkt"><a href="#">Link 1</a></div>  
        <div class="menuepunkt"><a href="#">Link 2</a></div>  
        <div class="menuepunkt"><a href="#">Link 3</a></div>  
        <div class="menuepunkt"><a href="#">Link 4</a></div>  
        </div>
    </div>
</body>
</html>

style.css

@charset "utf-8"; 
body {
	background-color: #339;
}

#content {
	float: left;
	position: relative;
	width: 800px;
	height: 500px;
	text-align: center;
}

#navi {
	float: left;
	position: relative;
    width: 800px;
    height: 30px;
}
.menuepunkt a {
	background-image: url(trennlinie.png);
	float: left;
	position: relative;
	display: block-inline;
	color: #000;
	width: 100px;
	height: 20px;
	top: 5px;
	text-decoration: none;
	color: #FFF;
	
}

Gruß

German Question Web Development Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 5 Comments

Wireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments