• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div-objecte mit CSS

B

BM2k

Neues Mitglied
Hallo,
ich probiere gerade eine Website mit div's zu gestallten in Dreamweaver sieht alles super aber sobald ich die Seite in FireFox, Chrome, Opera oder IE öffnet sieht sie graunhaft aus.

So sieht sie laut Dreamweaver CS5.5 aus:
dm.jpg


Und so sieht sie in den verschiedenen Browsern aus:
gc.jpg



HTML-Datei:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UI</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="rollover.js" type="text/javascript"></script>
<body onLoad="MM_preloadImages('rlogin.png')">
<div id="wrapper">
  <div id="content">
    <div id="login"><a href="login.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Login Button','','rlogin.png',1)"><img src="login.png" alt="Login" name="Login Button" width="68" height="30" border="0"></a></div>
  </div>
   
   <div id="avatar"></div>
<div class="footer" id="footer"><p>
  Not a registered user yet? <a href="signup.html">Sign up now!</a></div></p>
</div>
</body>
</html>

CSS-Datei (mit Tipp aus dem Forum):
Code: 
* {
margin:0px;
padding:0px;
}
#wrapper {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    height: 420px;
    width: 600px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 0px;
    margin-top: 0px;
}
#content {
    background-image: url(content.png);
    background-repeat: repeat-x;
    background-position: center;
    height: 250px;
    width: 400px;
    margin-top: 72px;
    margin-right: auto;
    margin-left: auto;
}
#avatar {
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    border: 1px solid #d8d8db;
    height: 108px;
    width: 108px;
    margin-right: auto;
    margin-left: auto;
    margin-top: -282px;
    margin-bottom: 204px;
    background-color: #000;
}
#login {
    height: 30px;
    width: 68px;
    margin-top: 190px;
    margin-right: 90px;
    margin-left: 240px;
}


#footer {
    background-color: #fff;
    background-position: center;
    text-align: center;
    margin-top: 20px;
    margin-right: auto;
    height: 45px;
    width: 400px;
    margin-left: auto;
    margin-bottom: 0px;
}
.footer {
    font-family: "Myriad Pro", "Times New Roman", Arial, Courier;
    font-size: 13pt;
    color: #999999;
    font-style: normal;
    font-weight: bold;
}
 
Webseiten baut man nicht mit "div's" sondern mit HTML-Code. Den schreibst Du schon relativ gut, hast hier aber einen Schnitzer:

HTML: 
<div class="footer" id="footer"><p>
  Not a registered user yet? <a href="signup.html">Sign up now!</a></div></p>

Da ist das </div> vor dem </p> falsch. Muss genau andersrum sein:

HTML: 
<div class="footer" id="footer"><p>
  Not a registered user yet? <a href="signup.html">Sign up now!</a></p></div>

Hier sieht man aber schon, dass Du nicht nur mit "div's" arbeitest sondern auch die Texte richtig auszeichnest. Ein Absatz als Absatz.

Die Probleme in der Browseransicht resultieren (neben dem o.g. HTML-Fehler) sicherlich auch an den mysteriösen Abständen die Du da definierst hast. Du solltest nicht versuchen per CSS Elemente zwanghaft irgendwohin zu schieben, weder mit absoluter Positionierung noch mit negativen oder/und riesengroßen margins. Das geht nach hinten los. Schreib den HTML-Code lieber in der Reihenfolge die die einzelnen Bestandteile der Seite im Browser ausgegeben werden sollen. Und verwende "float" um auch Elemente nebeneinander zu positionieren.
 
Danke für die schnelle Antwort. :D

Wie kann ich, denn Abstand von anderen Objekten bekommen die über einem anderen sind? (An der Y-Achse orientiert und nicht an der Z-Achse)

Edit: Die Elemente müssen alle "zwanghaft" festgesetzt sein.
 
Zuletzt bearbeitet:
Den Text im Footer kannst Du z.B. mit padding oder line-height in die Mitte des Footers bringen. margin ist dafür nicht notwendig.

Bei dem Login-Button verstehe ich nicht wieso der so einsam dort in der weißen Fläche stehen soll. Soll da nicht noch irgendetwas drummherum kommen? Text, Bild, irgendwas?
 
Dann bau das auch gleich mit ein, denn später müsstest Du deinen HTML- und vor allem CSS-Code dahingehend noch mehr anpassen. Lieber gleich alles einbauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben