✔ Div's werden verschoben

alex130 · 8. Mai 2008

Hi
Ich hab ein Problem und zwar wird mein rechter Div .content ein Stück nach unten verschiben.
Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#container {
width: 800px;
margin:0 auto;
}

#header {
width: 800px;
height: 147px;
background:url(images/header.jpg);
}

.navi {
width: 235px;
float: left;
}

.navi .head {
height: 31px;
background:url(images/navi_head.jpg);
}

.navi .body {
background: url(images/navi_bg.jpg);
}

.navi .foot {
height: 16px;
background:url(images/navi_bg.jpg);
}

.content {
width: 553px;
margin-left: 22px;
float: right;
}

.content .head {
height: 40px;
background: url(images/content_head.jpg);
}

.content .body {
background: url(images/content_bg.jpg);
}

.content .foot {
height: 7px;
background: url(images/content_bg.jpg);
}

/* Clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}
</style>
</head>

<body>

<div id="container" class="clearfix">
	<div id="header"></div>
	<div id="topnavi"></div>
	<div class="navi">
		<div class="head"></div>
		<div class="body"></div>
		<div class="foot"></div>
	</div>
	<div class="content">
		<div class="head"></div>
		<div class="body"></div>
		<div class="foot"></div>
	</div>
</div>

</body>
</html>

Kann mir bitte jemand helfen?
Danke

Loomis · 8. Mai 2008

.content:

Code:

width: 553px;
margin-left: 22px;

und
.navi:

Code:

width: 235px;

Sind 810px.

In .container hast du 800px angegeben.
Also ist entweder .navi oder .content 10 Pixel zu breit. Oder .container 10 Pixel zu schmal.
Wenn nicht, bitte nicht böse sein

alex130 · 8. Mai 2008

Stimmt, daran lags.
Danke

Maik · 8. Mai 2008

alex130 hat gesagt.:
Kann mir bitte jemand helfen?

Das nächste Mal einfach zum Rechenschieber greifen, und deinen Rechenkünsten ein Update gönnen.

alex130 · 16. Mai 2008

So und wieder mal ein Problem, diesmal is es kein Rechen Fehler

Und zwar is der rechte Div zu weit unten....
Screen:
http://img3.imagebanana.com/img/trv0t2ks/fehler.png
Und hier der Code:

HTML:

body, html {
background: #fff;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 12px;
margin:0;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:link, a:active, a:visited {
font-size: 14px;
color: #4c5e78;
text-decoration: none;
}

a:hover {
font-size: 14px;
color: #4c5e78;
text-decoration: underline;
}

#container {
width: 810px;
background: url(../images/content_bg.png);
margin: 0 auto;
height: 100%;
min-height:100%;
height:auto !important; /* moderne Browser */
}

#header {
width: 780px;
margin:0 auto;
height: 116px;
background:url(../images/header.png);
}

.topline {
background:#ece9e9;
height:20px;
width: 772px;
margin:0 auto;
padding: 3px;
}

.leftCol {
width: 170px;
float left;
margin-left: 25px;
}

.rightCol {
float: right;
width: 560px;
background:red;
margin: 0 25px 0px 10px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}


/* MENU */
 #menue {
width: 175px;
font-size: 80%;
}
.menuekopf {
font-weight: bold;
color: #000000;
width: 163px;
padding: 5px;
border: 1px solid #000000;
}
#menue ul {
list-style-type: none;
padding: 0px;
border: 1px solid #fff;
margin: 2px 0px;
}
#menue li {
display: block;
background: #f6f6f6;
border-bottom: 1px solid #fff;
}
#menue li a, #menue li a:link {
text-decoration: none;
display: block;
color: #000000;
width: 163px;
padding: 5px;
font-size: 11px;
background: #f6f6f6;
}
#menue li a:visited {
color: #0066FF;
background-color: #EBEBEB;
}

#menue li a:hover, #menue li a:active, #menue li a:focus {
color: #ffcc00;
background-color: #818181;
}

und der html code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="css/admin.css" />
</head>

<body>

<div id="container" class="clearfix">
	<div id="header"></div>
	<div class="topline">
		<table width="780px">
			<tr>
				<td>{$welcome}</td>
				<td>{$username} [abmelden]</td>
			</tr>
		</table>
	</div><br />
	
	<div class="leftCol">
	<div id="menue">
		<div class="menuekopf">Men&uuml; 1</div>
		<ul>
		<li><a href="#">Hyperlink 1.1</a></li>
		<li><a href="#">Hyperlink 1.2</a></li>
		<li><a href="#">Hyperlink 1.3</a></li>
		<li><a href="#">Hyperlink 1.4</a></li>
		<li><a href="#">Hyperlink 1.5</a></li>
		</ul>
		</div>
	</div>
	
	<div class="rightCol">
		<br /><br /><br />
	</div>	
</div>

</body>
</html>

Maik · 17. Mai 2008

Hi,

nach der float-Eigenschaft fehlt der Doppelpunkt - solch einen Syntax-Fehler solltest du mittlerweile aber auch von selbst erkennen:

Code:

.leftCol {
width: 170px;
float: left;
margin-left: 25px;
}

Und damit im IE6 sein "Doubled-Margin-Bug" nicht zum Vorschein tritt, was ebenfalls zum Umbrechen der rechten Spalte führt, notierst du hier zusätzlich display:inline:

Code:

.leftCol {
width: 170px;
float: left;
margin-left: 25px;
display:inline;
}

.rightCol {
float: right;
width: 560px;
background:red;
margin: 0 25px 0px 10px;
display:inline;
}

Desweiteren solltest du für den IE die "clearfix"-Technik vervollständigen:

Code:

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

und die Regeln für die Mindesthöhe in der richtigen Reihenfolge notieren:

Code:

min-height:100%;
height:auto !important; /* moderne Browser */
height: 100%;

Achja, in den HTML-Attributen, wie z.B. width, wird keine Einheit angegeben.

Maik · 26. Juni 2008

alex130 | PN hat gesagt.:
Hallo,
zuerst einmal möchte ich mich dafür entschuldigen, dass ich dich per PN nerve, allerdings wollte ich den LInk nicht öffentlich posten, da ich noch an dem Script arbeite...
Nun meine Frage, weißt du woran das mit dem Content liegt?
http://***.net/
Danke
LG Alex

Im IE6 tritt erneut der "Doubled Margin-Float Bug" in Erscheinung - Lösung wie gehabt:

Code:

.leftCol { /* linke Spalte */
width: 160px;
float: left;
margin: 15px 0px 0px 15px;
display:inline;
}

.rightCol { /* rechte Spalte */
width: 600px;
float: right;
margin: 15px 15px 0px 0px;
display:inline;
}

Die Klasse .clearfix muss in diesem Modell im DIV#subcontainer aufgerufen werden, da a) dieses Element die Floatblöcke unmittelbar umschliesst und b) es das Hintergrundbild enthält, das derzeit in den standardkonformen Browsern nicht in der vollständigen Höhe angezeigt wird:

Code:

<div id="container" class="clearfix"><!-- Klasse hier entfernen -->
        
        <div id="subcontainer" class="clearfix"><!-- und stattdessen hier aufrufen -->

Das nächste Mal wende dich mit deinen Fragen bitte direkt an das Forum, und wenn du den Link zur Seite nicht veröffentlichen möchtest, postet du eben den Quellcode. Vielen Dank!

mfg Maik

✔ Div's werden verschoben

alex130

Erfahrenes Mitglied

Loomis

Mitglied Bunt

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

Maik

Neue Beiträge