0800 - SPACEQUADRAT

Links mit verschiednen Hovern | Tabelle oder DIV ?

 1 2 > 
Neuen Beitrag schreiben
deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 16:53 Uhr

Hallo,

ich habe zwei Probleme:
Zum einen möchte ich eine Navigation mit Links erstellen die jeweils einen eigenen Hover effekt haben. Ich habe versucht dies mit Klassen zu verwirklichen, das will aber nicht so recht, weiß auch garnicht ob das so überhaut geht:
Link3 soll dann einen ich glaub grünen Hover haben, aber er ist genauso wie der von Home und Link2

  1.  
  2. #navi a {
  3.  color: #999;
  4.  font-family: Verdana, Geneva, sans-serif;
  5.  font-size: 20px;
  6.  text-decoration: none;
  7. }
  8.  
  9. #navi a:hover {
  10.  color: #000;
  11. }
  12.  
  13. .nav_link3 a:hover {
  14.  color: #6d9f25;
  15. }
  16.  

  1.  
  2. <div id="navi">
  3.   <a href="?page=home">Home</a> 
  4.   <a href="?page=link2">Link2</a> 
  5.   <a class="nav_link3" href="?page=link3">Link3</a> 
  6.  </div>
  7.  

Zum anderen möchte ich eine Homepage mit Content und Sidebar machen, die Sidebar ist links und soll genau so hoch sein wie der content.
Nehm ich dafür jetzt eine Tabelle, ich hab gelesen die nimmt man für ein Design eigentlich nicht, oder dann Divs, aber damit bekomme ichs nicht hin dass sie gleich hoch sind.

Gruß Deezigns

sstrempel1989
User
images/avatars/5de25f3366fba32fc6873508c34184a0.jpg
Beiträge: 78
Spacecoins: 84

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:21 Uhr

versuchs mal so:

  1. a.nav_link3:hover
  2. {
  3.   color: #6d9f25;
  4. }

__________________

Alles strikt nach Standard, Standard-XHTML, Standard-CSS, Standard-Kaffee...ach ne doch nich ^^
www.dark-devil-designz.de
http://www.dark-devil-designz.de/banner/banner2small.gif

XMMX
Tutorial Leitung
images/default_ava.png
Beiträge: 662
Spacecoins: 695

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:26 Uhr

Das wird nichts, weil er sie vorher überschreiben hat ;)

default.css

  1. * {
  2.   margin:0;
  3.   padding:0;
  4.   }
  5.  
  6. html,body {
  7.   height:100%;
  8.   }
  9.  
  10. #navi a {
  11.  
  12.   font-family: Verdana, Geneva, sans-serif;
  13.   font-size: 20px;
  14.   text-decoration: none;
  15. }
  16.  
  17. .nav_link1:hover{color:red;}
  18. .nav_link2:hover{color:blue;}
  19. .nav_link3:hover{color:green;}
  20.  
  21. #navi {height:100%;float:left; background-color:red;}
  22. #content {height:100%; background-color:green;}

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html >
  3.  
  4.   <head>
  5.  
  6.  <link rel="stylesheet" type="text/css" href="default.css" />
  7.  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" >
  8.  
  9.  <title>Test</title>
  10.  
  11.  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  12.  
  13.  
  14.  
  15.   </head>
  16.  
  17.   <body>
  18.  
  19.  <div id="navi">
  20.    <a class="nav_link1" href="?page=home">Home</a>
  21.    <a class="nav_link2" href="?page=link2">Link2</a>
  22.    <a class="nav_link3" href="?page=link3">Link3</a>
  23.  </div>
  24.  <div id="content">
  25.  
  26.    test
  27.  
  28.  </div>
  29.  
  30.   </body>
  31.  
  32. </html>

__________________

Verdiene deine Träume
"Immer wenn mein PC langsam wird, mache ich einen neuen Benutzer"

sstrempel1989
User
images/avatars/5de25f3366fba32fc6873508c34184a0.jpg
Beiträge: 78
Spacecoins: 84

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:29 Uhr

wo isn da am anfang die klasse überschrieben^^

Edit by XMMX: Da er sie mit grey von Anfang an deklariert hat, passiert da nichts mehr mit dem Hover ;) Kannst es ja mal testen.

__________________

Alles strikt nach Standard, Standard-XHTML, Standard-CSS, Standard-Kaffee...ach ne doch nich ^^
www.dark-devil-designz.de
http://www.dark-devil-designz.de/banner/banner2small.gif

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:33 Uhr

Jetzt warst du schneller als ich.
Man muss das

  1. a.nav_link3:hover {
  2. color: #6d9f25 !important;
  3. }

einfach vor das 

  1. #navi a:hover

setzen, dann funktionierts.

Firebug ruld :D

XMMX
Tutorial Leitung
images/default_ava.png
Beiträge: 662
Spacecoins: 695

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:36 Uhr

Naja du kannst auch ein !important setzen ;)

Aber dann sollten deine Fragen ja geklärt sein.

__________________

Verdiene deine Träume
"Immer wenn mein PC langsam wird, mache ich einen neuen Benutzer"

sstrempel1989
User
images/avatars/5de25f3366fba32fc6873508c34184a0.jpg
Beiträge: 78
Spacecoins: 84

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:49 Uhr

@XMMX:

sry übersehen^^'

__________________

Alles strikt nach Standard, Standard-XHTML, Standard-CSS, Standard-Kaffee...ach ne doch nich ^^
www.dark-devil-designz.de
http://www.dark-devil-designz.de/banner/banner2small.gif

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 17:59 Uhr

Dann noch zu meiner anderen Frage:

Zum anderen möchte ich eine Homepage mit Content und Sidebar machen, die
Sidebar ist links und soll genau so hoch sein wie der content.

Nehm ich dafür jetzt eine Tabelle, ich hab gelesen die nimmt man für ein
Design eigentlich nicht, oder dann Divs, aber damit bekomme ichs nicht
hin dass sie gleich hoch sind.

sstrempel1989
User
images/avatars/5de25f3366fba32fc6873508c34184a0.jpg
Beiträge: 78
Spacecoins: 84

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 18:04 Uhr

Die divs kannst du über klassen steuern.
In etwa so:

  1. div.sidebar
  2.  
  3. {
  4.  
  5.  height: 700px;
  6.  
  7.  width: 250px;
  8.  
  9.  float: left;
  10.  
  11. }
  12.  
  13. div.content
  14. {
  15.  
  16.  height: 700px;
  17.  
  18.  width: 750px;
  19.  
  20.  float: left;
  21.  overflow: auto;
  22.  
  23. }
  24.  

Das Overflow veranlasst den content dann dazu, das wenn der inhalt größer als die 750x700 ist einfach scrollbars anzuzeigen.
Eventuell packst du das alles noch in nen großen container (div)

__________________

Alles strikt nach Standard, Standard-XHTML, Standard-CSS, Standard-Kaffee...ach ne doch nich ^^
www.dark-devil-designz.de
http://www.dark-devil-designz.de/banner/banner2small.gif

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: Links mit verschiednen Hovern | Tabelle oder DIV ?

am 12.04.2011 um 18:06 Uhr

Das ginge schon, jedoch lässt sich dann der Text im Content nicht verschieben und ausserdem soll die Breite von beiden zusammen variabel sein.

 1 2 >