mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 05.12.2016 15:40 Benutzername: Passwort: Auto-Login

Thema: [CSS] DIV Navigation vom 05.07.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] DIV Navigation
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Mi 05.07.2006 17:04
Titel

[CSS] DIV Navigation

Antworten mit Zitat Zum Seitenanfang

Servus!

It's me again.

Schaut euch die Seite hier bitte mal an:
www.shoefiller.de/beta/index2.html

Im Feuerfox stimmt alles - die Navigation "klebt" an dem DIV mit dem Inhalt.
Im Internet Explorer dagegen schwebt die Navigationsleiste in der Luft und die Buttons haben auch nicht die richtige Größe.

Whats my fault?
Besten Dank im voraus.

CSS:
Code:
/* CSS Document */
   
#page {
   text-align:left;
   margin:0 auto;
   width:704px;
   }

#inhalt{
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   text-align: left;
   width: 644px;
   padding: 20px 20px 20px 20px;
   background-color:#F5F1F1;
   border-left: 30px solid #FFFFFF;
   border-right: 30px solid #FFFFFF;
   border-bottom: 30px solid #FFFFFF;
   border-top: 30px solid #FFFFFF;
   float:left;


/*   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   opacity:0.5; */
   }
      
#navcontainer {
   height: 25px;
   }
   
#navlist ul {
   margin-left: 0;
   padding-left: 0;
   white-space: nowrap;
}

#navlist li {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   display: inline;
   list-style-type: none;
}

#navlist a { padding: 7px 12px;}

#navlist a:link, #navlist a:visited {
   color: #000000;
   background-color: #FFFFFF;
   text-decoration: none;
}

#navlist a:hover {
   color: #FFCC33;
   background-color: #FFFFFF;
   text-decoration: none;
}

h1 {
   font-size:16px;
   }


HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles2.css" />
<title>SHOEFILLER</title>
<style type="text/css">
<!--
body {
   background-image: url(img/hintergrund.jpg);
   background-attachment:fixed;
}
-->
</style></head>
<body>
<div id="page">
<div id="navcontainer">
<ul id="navlist">
   <li><a href="#" title="Produkt">PRODUKT</a></li>
   <li><a href="#" title="Bestellen">BESTELLEN</a></li>
   <li><a href="#" title="Impressum">IMPRESSUM</a></li>
   <li><a href="#" title="Shoefiller">SHOEFILLER</a></li>
</div>
</ul>
   <div id="inhalt">
   Teeeeeext!
   </div>
</div>
</body>
</html>


Zuletzt bearbeitet von Xaven am Mi 05.07.2006 17:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 05.07.2006 17:52
Titel

Antworten mit Zitat Zum Seitenanfang

hier.. ich hab mal ein wenig ausgemistet und so.

Code:
body {
   font-family: Arial, Helvetica, sans-serif;
   padding-top: 20px;
   }
#page {
   margin: 0px auto;
   width: 704px;
   }
#inhalt {
   border: 30px solid #fff;
   padding: 20px;
   font-size: 11px;
   width: 644px;
   background-color: #f5f1f1;
   }
ul#navlist  {
   display: block;
   width: 704px;
   height: 25px
   padding: 0;
   margin: 0;
   line-height: 25px;
   margin-left: 0;
   padding-left: 0;
   }
ul#navlist li {
   padding: 0;
   display: inline;
   font-size: 14px;
   list-style-type: none;
   background-color: #fff;
   margin-right: 2px;
   }
ul#navlist a {
   text-decoration: none;
   padding: 7px 12px 7px 12px;
   color: #000;
   background-color: #fff;
   }
ul#navlist a:hover {
   COLOR: #fc3;
   }
h1 {
   FONT-SIZE: 16px
   }



Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>SHOEFILLER</title>
   <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
   <link href="styles2.css" type="text/css" rel="stylesheet">
   <style type=text/css>body {
      background-attachment: fixed;
background-image: url(img/hintergrund.jpg/hintergrund.jpg)
   }
   </style>
</head>
<body>
   <div id=page>
      <ul id=navlist>
         <LI><A title=Produkt href="http://www.shoefiller.de/beta/index2.html#">PRODUKT</a></li>
         <LI><A title=Bestellen href="http://www.shoefiller.de/beta/index2.html#">BESTELLEN</a></li>
         <LI><A title=Impressum href="http://www.shoefiller.de/beta/index2.html#">IMPRESSUM</a></li>
         <LI><A title=Shoefiller href="http://www.shoefiller.de/beta/index2.html#">SHOEFILLER</a></li>
      </ul>
      <div id=inhalt>
         <h1>Headline</h1>Total viel Text!
      </div>
   </div>
</body>
</html>


da war einiges unnötige dabei (etwa das containerdiv für die navi) und ein paar kleine fehler bzw. unschöner / unnötiger code.

vergleich einfach mal vorher und nachher.


Zuletzt bearbeitet von sahnemuh am Mi 05.07.2006 20:16, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Do 06.07.2006 08:46
Titel

Antworten mit Zitat Zum Seitenanfang

sahnemuh hat geschrieben:
hier.. ich hab mal ein wenig ausgemistet und so.
da war einiges unnötige dabei (etwa das containerdiv für die navi) und ein paar kleine fehler bzw. unschöner / unnötiger code.

vergleich einfach mal vorher und nachher.


Saugeil. Funzt wunderbar. Vielen Dank!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS - div container, navigation
Horizontale Navigation mit CSS und DIV layern
CSS Frage : Body div /div div ?
[CSS] Probleme mit CSS-Navigation und Rolloverbildern
Navigation / Zentrieren / Div / IE und FIrefox
[CSS] DIV im DIV - Grafik rechts unten postionieren?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.