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

Weiteres Margin Problem

U

UnknownSoldier

Neues Mitglied
Quellcode:

HTML: 
body {
background: url("../img/bg.jpg");
background-repeat: repeat;
font-family:arial;
}
#content {
width:900px;
margin:30px auto;
background-color: #D5D5D5;
border:1px solid black;
}
#inside {
    width:700px;
    height:401px;
}
#right {
    background-image:url("../img/rechts.jpg");
    width:219px;
    height:401px;
    float:right;
    margin: 0px;
    padding:0px;
}
#header {
width:708px;
height:152px;
float:right;
}
#header1 {
float:left;
}
#left {
float:left;
background-image:url("../img/links.jpg");
width:192px;
height:423px;
}
ul {
margin-left:0px;
padding-left:0px;
margin-top:50px;
width:192px;
}
ul li {
background-image:url("../img/button.jpg");
background-repeat: no-repeat;
width:192px;
height:21px;
list-style-type:none;
color:black;
margin-top:1px;
}
ul li a {
    padding-left:118px;
    text-decoration:none;
    color:black;
    display:block;
    text-transform:uppercase;
}
#textcontent {
    width:700px;
    color:#E77919;
}
#buttonleiste {
    background-image: url("../img/buttonleiste.jpg");
    color:white;
    height:22px;    
}
#leftmenue {
padding:0px;
margin-top:30px;
}

Das ist die CSS Datei^^

Nun die HTML- Datei:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hp</title>
<link rel="stylesheet" type="text/css" media="screen" href="inc/style.css" />
</head>

<body>

<div id="content">

<span id="header1"><a href="index.php"><img src="img/logo.jpg" alt="logo" border="0" /></a></span>

<div id="header"><img src="img/header1.jpg" alt="header1" border="0" /></div>
<div style="clear:both"></div>

<div id="left">
<ul>
<li><a href="index.php">Testit</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
<li><a href="#">Test6</a></li>
<li><a href="#">Test7</a></li>
</ul>
</div>

<div id="buttonleiste">
test test test test
</div>

<div id="right">
</div>

<div id="inside">
<div id="textcontent" style="margin-left:30px;">TEXT</div>
</div>
<div style="background-color:black;width:900px;height:40px;clear:both;"></div>
</div>
</body>
</html>

Nun will ich den textcontent links wegrücken, aber das klappt nicht!
margin-top klappt aber nicht margin-left und auch kein padding...
Vllt kann mir ja jemand helfen?
Das wäre klasse.
Vielen Dank
MfG
 
Hallo,

du solltest den Quelltext erst mal gründlich aufräumen. CSS-Angaben sollten ausschließlich in der CSS-Datei bzw. im head-Bereich der Seite stehen. Durch die zusätzlichen Angaben im Quelltext ist kaum nachvollziehbar, was eigentlich geschehen soll bzw. wo du Einstellungen wie padding änderst.

Nebenbei: Im IE6 sieht es teilweise ganz anders aus als im Firefox und entspricht wahrscheinlich gar nicht mehr deinen Vorstellungen.

Auf geänderte padding- und margin-Werte reagiert der Browser schon, aber wohl anders als von dir erwartet.

Wie soll die Seite den überhaupt aussehen?

Links oben ein Logo, rechts daneben ein Kopfbereich, unter dem Logo in gleicher Breite wie das Logo eine linke Spalte, unter dem Kopfbereich in gleicher Breite eine Navi-Leiste und darunter in gleicher Breite ein Text- bzw. Inhaltsbereich?

Gruss

MrMurphy
 
Ja genau,

die css befehle in der html datei sind nur da weil ich was ausprobiert habe^^
Kommen dann wieder in die css datei.

Aber warum sieht das im IE anders aus?
Woran liegt das?

Vielen Dank
MfG
 
Das mit dem aufräumen ist ne gute Idee, vielleicht klärt sihc dann dein Problem auch einfacher.

Bsp:

divs sind zum gruppieren von Elementen.

div "header" ist ebenso überflüssig wie div "left".

div "right" ist komplett leer, wofür brauchst du ihn? Ein leerer div hat im Quellcode nichts zu suchen. Bevor man eine Webseite erstellt, braucht man Inhalt oder zumindest mal Platzhalter für ebenjenen.

So viel zum Aufräumen.


Dann solltest du nochmal die Verwendung von "float" kontrollieren.

Du floatest die Navigation nach links, demnach wird alles, was danach kommt, direkt an der Navigation rechts angebunden.

Dort liegt auch die Lösung deines Problems: Gib auch den darauffolgenden Elementen ein float mit, sonst "stehen" die so im Raum herum.
Wenn der float-Effekt nicht mehr erwünscht ist, vergiss nicht z.B. mit einem <br /> wieder zu clearen.

Greetz
Toast
 
Toastbrot schrieb:
Dann solltest du nochmal die Verwendung von "float" kontrollieren.

Du floatest die Navigation nach links, demnach wird alles, was danach kommt, direkt an der Navigation rechts angebunden.

Dort liegt auch die Lösung deines Problems: Gib auch den darauffolgenden Elementen ein float mit, sonst "stehen" die so im Raum herum.
Wenn der float-Effekt nicht mehr erwünscht ist, vergiss nicht z.B. mit einem <br /> wieder zu clearen.

Greetz
Toast
Zum Vergrößern anklicken....

Klasse! Vielen Dank.
Bin normalerweise PHP Progger und brauche daher html / css gelegentlich ;) :)
Vielleicht kannst du mir ja auch bei dem anderen Problem helfen.

Vielen Dank
MfG
Unknown
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben