[erledigt][CSS] tabelle zu div

Ambience · Beitrag von **Ambience** » 24.02.2007 22:55

ich hab IE7 installiert.. sollte eigentlich so installiert werden das ich auch noch 6 habe, aber das wollte xp patu nicht machen...

wie gesagt, hier mein code, wäre dir sehr dankbar wenn du mir das umbschnipseln könntest. Als gegenleistung kann ich nüx bieten auser meinen Körper, aber den willst du vermutlich nicht.

Farben sind schon richtig angegeben.. vllt. schaffst du es sogar das ganze noch ein wenig zu verkürzen? - Bei mir funktionierts eigentlich jetzt schon, aber ich will es möglichst browserkompatibel und valide... W3C meckert auf jedenfall mal nichtmehr.

Code: Alles auswählen

/* Navigation */             
ul.navigation 
{
	display: block;
	float: left;
	margin: 10px;
	padding: 0;
	position: absolute;
	left: 0px;
	top: 135px;
}

ul.navigation li 
{
	background-color: #e0e0e0;
  border: 1px solid #c0c0c0;
  font-weight: bold;
	display: block;
	list-style-type: none;
	margin: 0 0 2px;
	padding: 0;
	overflow: hidden;
}

ul.navigation a 
{
	color: #000000;
	display: block;
	padding: 7px 7px;
	text-decoration: none;
	width: 170px;
}

ul.navigation :hover 
{
  border-color: #0a246a;
	background-color: #cbd0de;
	color: black;
	text-decoration: none;
}
/* Navigation end */

Beitrag von **S2B** » 25.02.2007 00:01

Könntest du evtl. mal die Seite verlinken, auf der du die Navigation einsetzt?

Ambience · Beitrag von **Ambience** » 25.02.2007 00:30

nope, hab zurzeit kein space und das ist ein browsergame.. deshalb sollte es ja möglichst in allen browsern kompatibel sein..

Opera, Netscape, FF, IE7 dort ist das schon kompatibel.. Nur mit IE6 weiß ich leider nicht.

Beitrag von **S2B** » 25.02.2007 12:33

Ambience hat geschrieben:Opera, Netscape, FF, IE7 dort ist das schon kompatibel.. Nur mit IE6 weiß ich leider nicht.

Ich kann es aber noch weniger überprüfen, wenn ich keine Datei habe...

Ambience · Beitrag von **Ambience** » 25.02.2007 12:36

nimmst du das:

Code: Alles auswählen

/* Navigation */              
ul.navigation 
{ 
   display: block; 
   float: left; 
   margin: 10px; 
   padding: 0; 
   position: absolute; 
   left: 0px; 
   top: 135px; 
} 

ul.navigation li 
{ 
   background-color: #e0e0e0; 
  border: 1px solid #c0c0c0; 
  font-weight: bold; 
   display: block; 
   list-style-type: none; 
   margin: 0 0 2px; 
   padding: 0; 
   overflow: hidden; 
} 

ul.navigation a 
{ 
   color: #000000; 
   display: block; 
   padding: 7px 7px; 
   text-decoration: none; 
   width: 170px; 
} 

ul.navigation :hover 
{ 
  border-color: #0a246a; 
   background-color: #cbd0de; 
   color: black; 
   text-decoration: none; 
} 
/* Navigation end */

und den html teil:

Code: Alles auswählen

<ul class="navigation">
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Registrieren</a></li>
      <li><a href="#">Rangliste</a></li>
      <li><a href="#">Story</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Hilfe</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Statistik</a></li>
    </ul>

dann sollte das eigentlich schon im standalone funktionieren, das die navi links auf der seite ist, mit hover effekt

Beitrag von **S2B** » 25.02.2007 12:38

Ich weiß aber nicht, wie die Navigation in die Seite eingebunden ist, also bringt mir das zuerst mal gar nichts...

Ambience · Beitrag von **Ambience** » 25.02.2007 13:46

häh? so ist das eingebunden:

Code: Alles auswählen

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>xxx - browserbasiertes Online-Spiel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="templates/Crystal/Crystal.css" />
  </head>
  <body>
    <h1>v1.0.alpha</h1>
    
    <div id="clock">{TIME}</div>
    
    <ul class="navigation">
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Registrieren</a></li>
      <li><a href="#">Rangliste</a></li>
      <li><a href="#">Story</a></li>
      <li><a href="#">Hilfe</a></li>
      <li><a href="#">Statistik</a></li>
    </ul>
    
    <div class="content">
</div>
</body>
</html>

und dazu noch das css sonst ist da nix..

Beitrag von **S2B** » 25.02.2007 14:28

OK, das hilft mir weiter.

Teste mal das hier:

Code: Alles auswählen

/* Navigation */
ul.navigation, ul.navigation li {
	padding: 0
}

ul.navigation
{
   float: left;
   margin: 10px;
   position: absolute;
   left: 0px;
   top: 135px;
}

ul.navigation li
{
   font-weight: bold;
   list-style-type: none;
   margin-bottom: 2px;
   overflow: hidden;
}

ul.navigation a
{
   display: block;
   padding: 7px;
   width: 170px;
   color: black !important;
   text-decoration: none !important;
   border: 1px solid #c0c0c0;
   background-color: #e0e0e0;
}

ul.navigation a:hover
{
   border-color: #0a246a;
   background-color: #cbd0de;
}
/* Navigation end */

Eine Frage noch: Ist es Absicht, dass die Navigation absolut positioniert wird? Wenn ja, dann kannst du das Float gleich auch noch weglassen. Wenn nein, dann nimm das position, das left und das top raus und positioniere mit float und margin.

Edit: Ach ja, wenn du irgendwelche Fragen dazu hast, einfach fragen.

Ambience · Beitrag von **Ambience** » 25.02.2007 15:11

nein das position absolute habe ich schon zu fixed gemacht.. die navigation sollte immer an der gleichen stelle bleiben wie sie jetzt ja schon ist.

und dein code funktioniert auch wunderbar.. sprich, ist das jetzt auch IE6 kompatibel? -> In Opera, Netscape, FF und IE7 funzt es wunderbar..

Danke

Beitrag von **S2B** » 25.02.2007 19:32

Ich hab das ganze gerade mal mit ein paar alten Browsern getestet, es funktioniert mit:

IE5, IE5.5, IE6
Opera 7.5 - 9
Safari 1 + 2

Firefox sollte normal auch funktionieren, habe ich jetzt aber nicht speziell getestet.