HTML bekomme link nicht auseinander

Mogile · 03/11/2015, 21:13

Hallo

Kann mir jemand helfen. Bei meiner website bekomme ich die einzelnen links nicht weiter auseinander. Wenn ich die seite öffne, sind die alle so zusammen und haben nur wenig abstand

Index seite wo die links zu nah sind

Code:

 <div id="Navigation">
     <a href="index.html">Index</a>
     <a href="ueber_mich.html">Über mich</a>
     <a href="mein_praktikum.html">mein Praktikum</a>
     <a href="mein_praktikumbetrieb.html">mein Praktikumbetrieb</a>
 </div>

css

Code:

a:link {text-decoration: none; color:#575757}
a:visited {text-decoration: none; color:#575757}
a:hover {text-decoration: none; background-color: #19C61F;}
a:active {text-decoration:none; background-color: #efefef}

#Navigation {text-align: center; font-size: 100%; padding-bottom: 10px}

Dantox · 03/11/2015, 22:59

Benutz am besten eine "unordered list" kurz "ul". Du packst die einzelnen Punkte dann in <li>-Elemente und kannst die Liste dann mit CSS verändern.

checkhaa · 03/11/2015, 23:13

Quote:
Originally Posted by Mogile
Hallo

Kann mir jemand helfen. Bei meiner website bekomme ich die einzelnen links nicht weiter auseinander. Wenn ich die seite öffne, sind die alle so zusammen und haben nur wenig abstand

Index seite wo die links zu nah sind
Code:
 <div id="Navigation">
     <a href="index.html">Index</a>
     <a href="ueber_mich.html">Über mich</a>
     <a href="mein_praktikum.html">mein Praktikum</a>
     <a href="mein_praktikumbetrieb.html">mein Praktikumbetrieb</a>
 </div>
css
Code:
a:link {text-decoration: none; color:#575757}
a:visited {text-decoration: none; color:#575757}
a:hover {text-decoration: none; background-color: #19C61F;}
a:active {text-decoration:none; background-color: #efefef}

HTML Code:

#Navigation a {margin-right: xpx}

ArgonQQ · 03/11/2015, 23:15

dir weiter helfen!

LG TheArgon

Devsome · 03/12/2015, 00:56

Quote:
Originally Posted by Mogile
Hallo

Kann mir jemand helfen. Bei meiner website bekomme ich die einzelnen links nicht weiter auseinander. Wenn ich die seite öffne, sind die alle so zusammen und haben nur wenig abstand

Index seite wo die links zu nah sind
Code:
 <div id="Navigation">
     <a href="index.html">Index</a>
     <a href="ueber_mich.html">Über mich</a>
     <a href="mein_praktikum.html">mein Praktikum</a>
     <a href="mein_praktikumbetrieb.html">mein Praktikumbetrieb</a>
 </div>
css
Code:
a:link {text-decoration: none; color:#575757}
a:visited {text-decoration: none; color:#575757}
a:hover {text-decoration: none; background-color: #19C61F;}
a:active {text-decoration:none; background-color: #efefef}

#Navigation {text-align: center; font-size: 100%; padding-bottom: 10px}

Nicht getestet aber eine möglichkeit wäre dies.

Code:

 <div id="Navigation">
     <a href="index.html" class="linkRight">Index</a>
     <a href="ueber_mich.html" class="linkRight">Über mich</a>
     <a href="mein_praktikum.html" class="linkRight">mein Praktikum</a>
     <a href="mein_praktikumbetrieb.html" class="linkRight">mein Praktikumbetrieb</a>
 </div>

Code:

a:link {text-decoration: none; color:#575757}
a:visited {text-decoration: none; color:#575757}
a:hover {text-decoration: none; background-color: #19C61F;}
a:active {text-decoration:none; background-color: #efefef}
.linkRight{
 padding-right: 15px;
/* or 
 padding-left: 15px;
*/
}
#Navigation {text-align: center; font-size: 100%; padding-bottom: 10px}

c1rca12 · 03/12/2015, 18:09

Dank HTML5 kannst du auch <nav> nutzen

Adroxxx · 03/12/2015, 20:25

Mach die Navigation als ul. Dann kannste die li's easy stylen.

c1rca12 · 03/12/2015, 20:45

Quote:

Originally Posted by Adroxxx

Mach die Navigation als ul. Dann kannste die li's easy stylen.

Wenn man <nav> nutzt kann man li auch stylen

Adroxxx · 03/15/2015, 12:41

Quote:

Originally Posted by c1rca12

Wenn man <nav> nutzt kann man li auch stylen

Was du sagst ergibt leider keinen Sinn.
Der <nav> ist der semantische Tag für die Navigation. Der hat aber nichts mit Listen Item zu tun. Es ist zwar good practice semantische Tags zu benutzen,
aber der <nav> Tag, ersetzt in dem Fall einfach das <div id=navigation>.

Hilft aber keinesfalls, bessere Kontrolle über die einzelnen Menüelemente zu bekommen.

Hingegen, wenn man die Navigation als liste baut, hat man viel mehr Kontrolle über Position etc. der listen elemente.

Ob man die nun in den <nav> wrappt oder nicht, bleibt einem selbst überlassen.

Hyukisawa · 03/15/2015, 14:53

Hier mal ein bsp. wie du es machen könntest