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

layout wird nicht richtig angezeigt??

K

Kingmagister

Neues Mitglied
Hi Leute ich mache momentan eine eigene Homepage ... aber das layout welches in css erstellt habe funktioniert nicht so wie ich das möchte...
die ganzen div-tags werden irgendtwie nicht richtig angezeigt.

Was also mache ich falsch

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Björn Bojara</title>
  <link rel="stylesheet" type="text/css" href="layout.css"
</head>
<body>
<div class="container">
  <div class="header"><a href="#"><img src="" alt="Hier ist das Logo" name="Bild_Logo" width="25%" height="200" style="background: #8090AB; display:block;" /></a>
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
    </ul>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>&nbsp;</h1>
    <!-- end .content --></div>
  <div class="sidebar2">
    <h4>&nbsp;</h4>
    <!-- end .sidebar2 --></div>
  <div class="footer">
    <p>&nbsp;</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

HTML: 
a img { /* Dieser Seleektor entfrent den Tahmen um Bilder*/
        border: none;
}
a:link {
        color:#414958;
        text-decoration: underline;
a:visited {
        color: #4E5869;
        text-decoration: underline;
}
/* Der container umschließt alle anderen div tags  */
.container {
        width: 80%;
        max-width: 1260px;
        min-width: 780px;
        background: #FFF;
        margin: 0 auto; /* Durch diesen Wert wird das Layout zentriert */
}
.header {
        background: #6F7D94;
        height:200px;
}
.sidebar1 {
        float: left;
        width: 25%;
        background: #93A5C4;
        padding-bottom: 10px;
}
.content {
        padding: 10px 0;
        width: 55%;
        float: left;
}
.sidebar2 {
        float: left;
        width: 20%;
        background: #93A5C4;
        padding: 10px 0;
}
ul.nav {
        list-style: none;
        border-top: 1px solid #666;
        margin-bottom: 15px;
}
ul.nav li {
        border-bottom: 1px solid #666; /* Mit diesem tag werden die einzelnen Schaltflächen getrennt */
}
ul.nav a, ul.nav a:visited {
        padding: 5px 5px 5px 15px;
        display: block; /* Hiermit wird die Blockeigenschaft angegeben  */
        text-decoration: none;
        background: #8090AB;
        color: #000;
}
 
.footer {
        padding: 10px 0;
        background: #6F7D94;
        position: relative;
        clear: both;
}
 
...irgendwie kommt mir das bekannt vor.
<link rel="stylesheet" type="text/css" href="layout.css"
Zum Vergrößern anklicken....
da fehlt die Klammer zum Schluss: ..href="layout.css">

XHTML-Code im 4er HTML:
<img src="" alt="Hier ist das Logo" name="Bild_Logo" width="25%" height="200" style="background: #8090AB; display:block;" />
Zum Vergrößern anklicken....
Der Slash an der schliessenden Klammer ist falsch.

Auch im css ist was im argen:
bei a:link
color:#414958; text-decoration: underline;
Zum Vergrößern anklicken....
fehlt die schliessende Klammer
 
Naja, das logo scheint wunschgemäß angezeigt zu werden, doch das ist html.
Die Navi wird vom css gar nicht beachtet, was mich zu der Vermutung verleitet, dass Deine css falsch verlinkt ist. Überprüfe, ob sie
a.) im richtigen Verzeichnis abgelegt ist
b.) korrekt geschrieben ist (je nach OS kann auch Gross-/Kleinschreibung eine Rolle spielen)

Eines kannst Du noch weiterhin machen: da Du offenbar Phase5 verwendest, kannst Du dort einen anderen als den Standard-Phase5-Browser implementieren. Das geht irgendwie und recht problemlos, über Extras, meine ich. Such mal ´nen büschen, deaktiviere den Standard-Browser und verwende anstelle dessen den/die bei Dir installierten Browser. Der Phase5-Browser ist, sehr freundlich formuliert, ´ne Krücke.
 
jap die css liegt im gleichen verzeichnis ....

kannst du mir sagen warum es jetzt mit meinem neuen code geht ???

neue codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bj&ouml;rn Bojara</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="" alt="Hier ist das Logo" name="Bild_Logo" width="25%" height="200" style="background: #8090AB; display:block;"></a>
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Zum Vergrößern anklicken....


body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}

a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
}

.header {
background: #6F7D94;
height:200px;
}

.sidebar1 {
float: left;
width: 25%;
background: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 55%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background: #93A5C4;
padding: 10px 0;
}

.content ul, .content ol {
padding: 0 15px 15px 40px;
}

ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}

.footer {
padding: 10px 0;
background: #6F7D94;
position: relative;
clear: both;
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Zum Vergrößern anklicken....
 
Weiss ich nich, bin nebenbei noch bei ftp zu gange (verliere). Trotzdem bin ich immer noch der Meinung, das irgendwas mit Rechtschreibung oder Verlinkung nicht stimmte. Auffällig war schon die grundsätzlich fehlerhafte Formatierung der li´s.
Ich bin nicht so gut im "Trockencode-Lesen", aber einen grundsätzlichen Fehler habe ich nicht gesehen. Daher mein o.g. Tipp.
 
Bei deinem ersten Code (Startposting dieses Topics) fehlt hier

Code: 
<link rel="stylesheet" type="text/css" href="layout.css"

ein > am Ende.

Code: 
<link rel="stylesheet" type="text/css" href="layout.css"[COLOR="red"]>[/COLOR]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben