inhalt nicht im Contentbereich

dabu

Hallo,
habe mich eben hier angemeldet weil ich ein Problem habe und nicht mehr weiter komme.

Ich habe eine Internetseite mit HTML und CSS erstellt.
Als ich meine Navigation mittels CSS angepasst und verschönert habe hat sich der Inhalt, der in einer Tabelle ist aufeinmal neben die Navi gesetzt.
Ich habe mal einen Screenshot angehangen wo Ihr mein Problem sehen könnt.

Hier ist auch der HTML Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <head>
        <title>Start</title>
        <link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
<body id="start">

<div id="wrapper">








        <div id="kopf">

        <img src="bilder/kopf.png">    
        </div>


<div id="navi">
<li id="navi01"><a href="poster.html">Poster</a></li>
<li id="navi02"><a href="illustration.html">Illustration</a></li>
<li id="navi03"><a href="fotos.html">Fotografie</a></li>
<li id="navi04"><a href="animation.html">Animation</a></li>
<li id="navi05"><a href="art.html">Art</a></li>
<li id="navi06"><a href="links.html">Links</a></li>
<li id="navi07"><a href="kontakt.html">Kontakt</a></li>
<li id="navi08"><a href="../index.html">Start</a></li>
<li id="navi09"><a href="index.html">Blog</a></li>
</div>


<div id="inhalt">
<table border="1px" width="600px" cellspacin="0px" cellpadding="0px">
<tr>
<td>
Blog
</td>
<tr>
<td>
<img src="art/art01.jpg">
</td>
</tr>
</table>


</div>
<div id="fuss">
<img src="bilder/fuss.png">    
</div>
</div>


    </body>
</html>

Alles anzeigen

Und Hier der CSS Code:

Code

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-image: url(bilder/background.jpg);


}




#wrapper {
margin-right:auto;
}
#kopf{
}
#inhalt {
background-color: #ffffff;
padding-top:5px;
padding-right:30px;
padding-bottom:20px;
padding-left:10px;
border-bottom:2px outset #939393;
}
#navi {
  list-style-type: none;
  width: 100%;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  letter-spacing: 3px;
  font-size: 13px;
  margin: 0;
  padding: 5px 0 0 0;
  background-color: #ffea00;
}
 
#navi li {
  display: block;
  float:left;
  margin: 0 0 0 4px;
}
 #navi li a {
  display: block;
  padding: 8px 10px;
  color: #693100;
  background-image: url(bilder/button.jpg);
  text-decoration: none;
  border-left: 3px outset #ff7e00;
  border-right: 2px outset #ff7e00;
  border-top: 3px outset #ff7e00;
  background-color: #ffffff;
}
#navi li.active a,
#navi li a:hover {
  border-left: 3px inset #ff7e00;
  border-right: 2px inset #ff7e00;
  border-top: 3px inset #ff7e00;
  background-color: #ffffff;
  color: #ffffff;
}


fuss{
}
form{
background-color: orange;
width: 300px;
padding: 20px
border: 1px solid #ffffff;
margin-top: 10px;
margin-right:auto;
margin-bottom:10px;
margin-left: auto;
}
label{
display: block;
cursor: pointer;
}
input#absender,
textarea{
width: 200px;
border: 1px solid black;
margin-bottom: 1em;
}
textarea{
height: 7em;
}
input#absender:focus,
textarea:focus {
background-color: #ffffff;
}

Alles anzeigen

Wäre super wenn Ihr mir helfen könntet.

webdesigner

width: 200px; (mögliche Angaben: Px,%,Pt oder Em), das sollte generell jedem Element erst mal zugewiesen werden.
Zudem hast du im Html,PHP Dokument einen fehler, was soll das denn bewirken?

HTML

<body>
<body id="start">
<!--Hier dein Restlicher Code-->
</body>

Für was soll das sein?

Zudem ist der restliche Code auch nicht sehr sinnvoll, Tables in Div definieren, für was. Entweder Table oder Div, zumal für dich divs besser wären.

Grevas

ich wüsste nicht warum er da feste angaben machen soll.

Aber wer floatet muss auch clearen...

/P.S. das es falsch ist Body mit einer ID zu versehen ist mir auch neu... (es ist egal, dass die ID nicht existiert, ids kann man auch für andere zwecke benutzen - nicht nur CSS)

webdesigner

Zitat von Grevas

ich wüsste nicht warum er da feste angaben machen soll.

Aber wer floatet muss auch clearen...

/P.S. das es falsch ist Body mit einer ID zu versehen ist mir auch neu... (es ist egal, dass die ID nicht existiert, ids kann man auch für andere zwecke benutzen - nicht nur CSS)

Ich meine nicht feste Angaben, sondern width. Verzeih wenn es etwas unverständlich geschrieben war;)

Grevas

Zitat von webdesigner

width: 200px; (mögliche Angaben: Px,%,Pt oder Em), das sollte generell jedem Element erst mal zugewiesen werden.
[...]

Da steht aber das es jedem Element zugewiesen werden soll - damit ist es eine Festsetzung der größe. Und das muss man nicht machen (oft ist es auch nicht sinnvoll...). Wenn du einem Element eine Breite angibst, dann setzt du sie fest.

Das Problem hat auch nichts damit zu tun.. Das Problem ist das die Navi Float hat, es aber danach kein clear: left; gibt. Also wird - wie denn auch sonst - der Inhalt auch daneben gesetzt...

dabu

Erstmal danke für die raschen Antworten.

Webdesigner
Naja ich habe mir gedacht das ich die Inhalte mit Tabellen besser gestalten kann. Abstände zwischen den Inhalten und so weiter.

Das mit der Body ID habe ich aus einen Buch, das besagt dass man die Body ID für die Gestaltung der Navi benutzt um anzuzeigen auf welcher Site sich der Besucher befindet.

Grevas
Könntest du mir das nächer erklären mit dem Befehl "clear"
Wo muss ich den einfügen?

webdesigner

Alles was du table zuweissen kannst, geht in divs auch.

Wenn du einzelne elemente float: left; gegeben hast, musst nach allen sachen mit float:left ein

HTML

<div class="clear"></div>

und css

HTML

div.clear {
clear: both;
}

machen.

Body id für navi , kann sein aber ich habe es noch nicht gesehen oder gehört, zumindest nicht in html. ich weiß ja nicht was für ein Buch das ist.

Grevas

Also am einfachsten wärs wenn du...

HTML

#inhalt {
clear: left;
background-color: #ffffff;
padding-top:5px;
padding-right:30px;
padding-bottom:20px;
padding-left:10px;
border-bottom:2px outset #939393;
}

Machst..

/p.s. du hast kein <html> tag gesetzt.
uuund...

HTML

<body>
<body id="start">

ich hab nichts gegen eine ID im body.. aber 2 mal ist einfach falsch.

uuund es geht weiter... Warum hab ich nur den code bei mir ins prog reingeschmissen *kopfschüttel*

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

Nimm das lieber als DOCTYPE, deiner bringt nichts - zumindest arbeitet bei mir Firefox damit im Quirks

wenn du <li> benutzt musst du noch ein <ul> drum machen wenns denn valide sein soll.

HTML

<ul>
<li>bla</li>
<li>bla</li>
</ul>

Fehler nummer X:

HTML

<table border="1px" width="600px" cellspacin="0px" cellpadding="0px">

cellspacing

Und wenn du den DOCTYPE schon geändert hast:
last but not least:

HTML

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">

statt

HTML

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />

Jetzt fehlen nur noch die alt attribute bei jedem IMG (kannst sie ja auch leer lassen: alt="") und dein ENCODING
z.B.

HTML

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<-- kommt in den <head> bereich

und nu...
This document was successfully checked as HTML 4.01 Transitional!

dabu

Webdesigner,
Das Buch heißt little boxes Band 1.

Grevas,

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Ich arbeite mit dem HTML Editor Tacco. Der Schreibt das von selber auf jeder neuen Seite.

Vielen Dank für die Hilfe.
Gruß
dabu

Tags