HTML bekomme link nicht auseinander

03/11/2015 21:13 Mogile#1
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}
03/11/2015 22:59 Dantox#2
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.
03/11/2015 23:13 checkhaa#3
Quote:
Originally Posted by Mogile View Post
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}
03/11/2015 23:15 ArgonQQ#4
[Only registered and activated users can see links. Click Here To Register...]dir weiter helfen!

LG TheArgon
03/12/2015 00:56 Devsome#5
Quote:
Originally Posted by Mogile View Post
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}
03/12/2015 18:09 c1rca12#6
Dank HTML5 kannst du auch <nav> nutzen :)

[Only registered and activated users can see links. Click Here To Register...]
03/12/2015 20:25 Adroxxx#7
Mach die Navigation als ul. Dann kannste die li's easy stylen.
03/12/2015 20:45 c1rca12#8
Quote:
Originally Posted by Adroxxx View Post
Mach die Navigation als ul. Dann kannste die li's easy stylen.
Wenn man <nav> nutzt kann man li auch stylen :)
03/15/2015 12:41 Adroxxx#9
Quote:
Originally Posted by c1rca12 View Post
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.
03/15/2015 14:53 Hyukisawa#10
Hier mal ein bsp. wie du es machen könntest
[Only registered and activated users can see links. Click Here To Register...]