Mandorlo in Fiore
Threadersteller
Dabei seit: 25.10.2010
Ort: Mönchengladbach
Alter: 42
Geschlecht: 
|
Verfasst Do 25.08.2011 09:22
Titel Ich werde wahnsinnig :( |
  |
|
Hallöchen alle zusammen..
Ich bin momentan bei einer Firma als Praktikantin angestellt und soll meine erste Webseite entwerfen.
Layout ist quasi schon erstellt und hab in HTML alles fertig geschrieben, was ich brauche.
Jetzt mache ich mich grade daran, dass mit CSS zu bearbeiten, allerdings komme ich mit der Navigation nicht zurecht.
Ich hätte sie gerne vertikal ausgerichtet und die einzelnen Navigationsbuttons sollen gleich groß sein, die Inhalte sich anpassen.
Das klappt bei mir aber nicht, sie werden immer unterschiedlich groß.
Kann mir da jemand einen Tipp geben?
Habe im Internet schon gesucht und soviel ausprobiert, aber irgendwie ändert sich bei mir da gar nix.
Hier mal mein Quellcode:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>miranto.de - Online-Shop für Fotografen</title>
<link href="miranto.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="login">
<ul>
<li>Benutzer</li>
<li><input type="text" name="benutzername"></li>
<li>Passwort</li>
<li><input type="password" name="passwort"></li>
<li><input type="submit" value="anmelden"></li>
</ul>
<a href="">Passwort vergessen?</a>
</div>
<!--ende login-->
<ul id="navi">
<li><a href="http://www.miranto.de/index.php">HOME</a></li>
<li><a href="http://www.miranto.de/ouroffer.php">UNSER ANBEBOT</a></li>
<li><a href="http://www.miranto.de/products.php">PRODUKTE</a></li>
<li><a href="http://www.miranto.de/goon.php">ABLAUF</a></li>
<li><a href="http://www.miranto.de/overview.php">ÜBERSICHT</a></li>
<li><a href="http://www.miranto.de/faq.php">HÄUFIGE FRAGEN</a></li>
</ul>
<!--<p><img src="logo.jpg" alt="logo_miranto"></p>-->
<p><img src="grafik_miranto.png" alt="grafik_miranto"></p>
<div id="willkommen">
<p> Willkommen bei miranto.de -<br/> dem Web-Shop-System für Fotografen.</p> <p> Sie sind Fotograf und wollen schnell und einfach Ihre Fotos aus verschiedenen Aufträgen Ihren Kunden
im eigenen Web-Shop präsentieren und zu eigenen Preisen verkaufen? Am besten noch über Ihre eigene Homepage, in Ihrem Design? Ohne Stress und Aufwand? Das Ganze in Top -
Qualität? Prima - dann gehören Sie zur Zielgruppe von miranto.de ... </p>
<input type="submit" value="» mehr Informationen">
</div>
<!--ende willkommen-->
<div id="auflistung">
<p> Profitieren Sie von:</p>
<ul>
<li> Online-Shop für Ihre Homepage.</li>
<li> Beliebig viele Galerien für Ihre Projekte.</li>
<li> Keine laufenden Gebühren, kein Abo.</li>
<li> Faire Abrechnung und monatliche Auszahlung Ihrer Erlöse.</li>
<li> Hohe Produktvielfalt für Ihre Kunden.</li>
<li> Profiqualität bei Fotoabzügen und Prints.</li>
<li> Sparen Sie Zeit und Geld mit Ihrem miranto.de Galerie-Shop.</li>
</ul>
<input type="submit" value="» mehr Informationen">
</div>
<!--ende auflistung-->
<div id="kostenlos">
<p> Kostenlos anmelden und loslegen</p> <p>Melden Sie sich jetzt kostenlos und unverbindlich an.Sie können für Ihren persönlichen Galerie-Shop kostenlos Galerien mit jeweils 1.000 MB
Speicherplatz einrichten und nutzen. Es fallen lediglich Produktionkosten und geringe Systemgebühren an, sofern Verkäufe über miranto.de abgewickelt werden.</p>
<input type="submit" value="Jetzt anmelden...">
</div>
<!--ende kostenlos-->
<div id="footer">
</p><a href="http://www.hussen.net">Hussen</a> · <a href="http://www.miranto.de/contact.php">Kontakt</a> · <a href="http://www.miranto.de/press.php">Pressebereich</a> ·
<a href="http://www.miranto.de/suchmaschinenoptimierung-fuer-fotografen.php">Suchmaschinenoptimierung</a> · <a href="http://www.miranto.de/imprint.php">Impressum</a> ·
<a href="http://www.miranto.de/agb.php">AGB</a> · <a href="http://www.miranto.de/datenschutz.php">Datenschutz</a></p>
</div>
<!--ende footer-->
</body>
</html>
CSS:
body{
width:1024px;
height:950px;
background-color:#393939;
font-family:Arial;
color:#d1d1d1;
}
#login li{
list-style-type:none;
float:left;
color:#e61c7b;
margin: 0px 10px 0px 6px;
}
ul#navi {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul#navi li {
padding: 0px;
margin: 5px;
width: 20%;
}
ul#navi li a:link {
display: block;
border: 1px solid #000;
background-color: #00FFCC;
padding: 10px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}
ul#navi li a:hover {
display: block;
border: 1px solid #54993f;
background-color: #727165;
color: #fff;
}
#willkommen{
width:280px;
float:left;
}
#auflistung{
width:280px;
float:left;
}
#kostenlos{
width:280px;
float:left;
}
Ist sicher nicht vorbildlich, aber ich bin ja n Frischling 
Vielen Dank schonmal vorab.
Liebe Grüße
Vanessa
|
|
Willkommen auf dem Portal für Mediengestalter
