CSS Unterstützung bei Tab-Menü

Pelzameise

Sachse
Dabei seit
Apr. 2008
Beiträge
5.221
Hi,
ich brauche eure Hilfe bei einer Tabnavigation. Und zwar soll sich das Ganze in einem DIV abspielen in dem der komplette Inhalt ist. Dieser Container bekommt dann von mir eine feste Größe.
Eigentlich soll das Ganze ähnlich wie hier auf CB aussehen. Wenn ich mit das Maus über einen Listeneintrag fahre, soll sich das Bild ändern. Die Bilder mach ich später da ich noch nicht weiss, wie sie aussehen sollen. Deshalb machen wir das erstmal mit Farben.

Mein Ansatz:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta name="author" content="huebsch">
<meta name="editor" content="Windows Editor">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<style type="text/css"> 

div#inhalt{
border: 1px solid black;
width: 800px;
position: absolute;
left: 40px;
}

.tabmenue
{
	font-size: 12pt;
	border: 1px solid #808080;
	height: 52px;
	width: 100%;
	text-align: center;
}

.tabmenue ul
{
	margin: 0px;
	padding: 0px;
}

.tabmenue ul li
{
	line-height: 50px;
	width: 100px;
	border: 1px solid #003366;
	background: #66CCFF;
	list-style-type: none;
	float: left;
}

</style>
<div id="inhalt">
    <div class="tabmenue">
        <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
        </ul>
    </div>
</div>


</body>
</html>
Wie bekomm ich das hin, dass wenn die Maus drüber ist, sich die Farbe/das Bild ändert?
Außerdem will ich das Ganze schön ins Center.
Und natürlich soll der Listeneintrag, der zu der aktuellen Seite gehört, hervorgehoben werden, wobei das sicher kein Problem darstellt.

Danke schon mal.
 

Crizzo

Commander
Dabei seit
Juli 2005
Beiträge
2.122

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
--> pn
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
@ Crizzo:
Danke für die Links, hab ich alles durchgelesen, hat mir sehr geholfen.
@ petap:
Wie gesagt trotzdem Danke :)

Jetziger Stand:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta name="author" content="huebsch">
<meta name="editor" content="Windows Editor">
<link href="format.css" type="text/css" rel="stylesheet" />
<link rel="SHORTCUT ICON" href="bilder/icon.ico" type="image/x-icon">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<div id="inhalt">
 <div id="ia">
    <div id="tabmenue">
        <ul>
            <li><a align="center" class="ca" title="Seite 1" href="#">Seite 1</a></li>
            <li><a align="center" class="cb" title="Seite 2" href="#">Seite 2</a></li>
            <li><a align="center" class="cc" title="Seite 3" href="#">Seite 3</a></li>
            <li><a align="center" class="cd" title="Seite 4" href="#">Seite 4</a></li>
        </ul>
    </div>
 </div>	
</div>



</body>
</html>
Code:
div#inhalt{
border: 1px solid black;
text-align: center;
width: 780px;
}

#tabmenue {
   background-color: #fff;
   text-align: left;
   margin: auto;
   }
   
#tabmenue LI {
   background-color: #be6;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 195px;
   display:inline;
   }

#tabmenue UL {
   background-color: #6be;
   padding: 0;
   margin: 0;
   }   


#tabmenue A {
   font: bold 1em sans-serif;
   color: #000;
   text-decoration: none;
   display:block;
   padding: 0;
   margin: 0;
   width: 191px;
   float:left;
   }

#tabmenue A:link,
#tabmenue A:visited {
   background-color: #9c9;
   padding: 0;
   border: 2px solid #9c9;
   border-radius: 5px;
   }

#tabmenue A:hover,
#tabmenue A:focus {
   background-color: #ded;
   padding: 0;
   border: 2px solid black;
   border-radius: 5px;
   }
   
#ia #tabmenue A.ca,
#ib #tabmenue A.cb,
#ic #tabmenue A.cc,
#id #tabmenue A.cd {
   background-color: #f6ffff;
   padding: 0;
   border-left: 7px #909;
   margin: 0;
   }
Das Problem:
Ich will den Inhalt-DIV in die Mitte haben. Im CSS funktioniert align="center" nicht. Und warum wird der Border nur oben angezeigt?
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
kannst du uns mal nen Link zur Seite geben?
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Erstens habe ich noch keinen Hoster und zweitens ist das bis jetzt die komplette Seite. Ich weiss ja noch gar nicht, wie der Inhalt aussehen soll. Bis jetzt soll ich erstmal das Layout entwerfen und dort wo der Content hinsoll einen eingerahmten DIV platzieren. :)
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
Setz mal margin: 0 auto; in die Beschreibung für den inhalt-div.

Wenn du mit Display an Elementen rumschraubst, dann muss das Element ne Höhe haben.

Dann noch ein grundsätzlicher Tipp: Guck dir mal das Addon für Firefox mit dem Namen Firebug an. Damit siehst du sehr gut wo welcher Abstand herkommt und welches Element welchen Platz beansprucht.
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Ja, das hat geholfen. ich hab jetzt die Höhe auf 30px fixiert. Nur wie bekomm ich die Links vertikal in die Mitte?
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
gar nicht. Das geht nur in einer Tabelle. Regel die Abstände über Margin.
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Mit Margin kann ich die Abstände der Buttons zueinander einstellen.

Hab grade gemerkt, dass der Firefox align="center" im a-Tag nicht annimmt, d.h. die Beschriftung der Buttons ist links, was oberhässlich ist.

Und warum hat mein Content-DIV nur oben seinen Rahmen?

EDIT: Firefox kennt anscheinend auch border-radius nicht.
 
Zuletzt bearbeitet:

Timdaroxxa

Lieutenant
Dabei seit
März 2009
Beiträge
954
Hey

text-align: Center;

moz-border-Radius: 15px;


Sollte so funktionieren!




Gruß von ner iPhone-"Tastatur"

edit: natuerlich alles CSS was oben steht,dh

<A href="" style="hiercss"></à>
 
Zuletzt bearbeitet:

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Dass das CSS ist, erkenne ich grade noch so. ;)
text-align macht was es soll, vor das moz musste aber noch ein Minus.

Jetzt muss nur noch der IE spuren. :(
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
...und da hast du auch schon das spannende Thema beim Webdesign gefunden: Verschiedene Browser zeigen gleichen Code verschieden an. Oder anders gesagt: Der IE zeigt Seiten einfach anders an als alle anderen. Das war immer so und das wird wahrscheinlich auch immer so bleiben.
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Ja, der IE wird es vllt. ab Version 9 unterstützen, vorher anscheinend nur mit transparenten PNGs möglich.

Seis drum, es gibt schlimmeres.
Aber die Beschriftung der Buttons muss ich noch in die Mitte (vertikal) bekommen. Gibt es ein vertical-text-align?
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
ne. das gibt es, wie gesagt, nur in Tabellen. Mach das über feste Abstände.
 

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
Wo kann ich die abgeben? Mit margin unter A geht er nicht.

IE7:


IE6:


Wie kann ich das verhindern?

Beim IE6 kann ichs verhindern, indem ich die Buttons kleiner mache. Vllt. binde ich über Conditional Comments eine Extra-IE6-CSS ein.

Und nochwas:
Dadurch, dass jetzt im Inhalt DIV alles zentriert ist, steht dann natürlich auch der Text in der Mitte. Der sollte aber eigentlich linksbündig stehen.


EDIT: Bis auf die erste Frage hab ich alle Probleme gelöst. :)
 
Zuletzt bearbeitet:

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
Was genau willst du verhindern?
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Hallo,
um den Text in eigenen Buttons auch vertikal zu zentrieren, schau dir mal

line-height

an.

So sieht bei mir ne Nav-CSS aus:

Code:
.nav a:visited {
display:block;
width:100px;
height:25px;
margin-left:0px;
text-align:center;
text-decoration:none;
font-family:arial, verdana, arial, sans-serif;
font-size:14px;
color:#000000;
line-height:25px;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
}
Gruß

HD
 
Zuletzt bearbeitet: (Ergänzung)

Pelzameise

Sachse
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
5.221
@ petap:
Ich hab schon alles verhindert, siehe EDIT.

@ HansDampf38:
Danke, das hat geholfen.
 
Top