CSS: Lücke geht nicht weg

D

Darii

Aktives Mitglied
Thread Starter
Dabei seit
24.02.2004
Beiträge
2.106
Reaktionspunkte
132
kann mir jemand sagen, woher diese Lücke zwischen der Überschrift und dem Text herkommt?

Ich habe schon alle margins auf Null gesetzt.
 
Erstens hast Du einen DIV-Container zwischen dem Header und dem Content:

PHP: 
    <div id="navigation">
        <a href="index.html">Home</a>
    </div>

Und zweitens ist deine Content-Box nicht absolut positionert. Ausserdem stimmen Deine "margin" Attribute nicht, erst legst Du alle mit 0 fest und danach sagst Du, das rechts 150px Platz sein soll. Mach es so:

PHP: 
#content 
{
position: absolute;
	padding-right: 150px;
	clear: both;
	background-color:Fuchsia;
}

Gruß,

Frank
 
2ndreality schrieb:
Erstens hast Du einen DIV-Container zwischen dem Header und dem Content:
Zum Vergrößern anklicken....
Ja ich weiß, die bewirkt noch eine kleine zusätzliche Lücke aber auch, wenn ich den Container lösche bleibt eine Lücke bestehen.
Und zweitens ist deine Content-Box nicht absolut positionert. Ausserdem stimmen Deine "margin" Attribute nicht, erst legst Du alle mit 0 fest und danach sagst Du, das rechts 150px Platz sein soll. Mach es so:
Zum Vergrößern anklicken....
Die Box soll ja auch nicht absolut positioniert sein. Das mit dem Margin stimmt schon so, das wird dann zu margin: 0 150px 0 0;

@no_n@me: das bezieht sich auf Bilder von denen ich keine habe.
 
Ohne NaviBox und mit absoluter Positionierung ging es bei mir ohne Lücke :)

Frank
 
2ndreality schrieb:
Ohne NaviBox und mit absoluter Positionierung ging es bei mir ohne Lücke :)

Frank
Zum Vergrößern anklicken....
Das zerreißt mir das Design, da die Box aus dem Textfluss herrausgenommen wird. Interessanterweise ist diese Lücke bei jedem Browser, irgendwas übersehe ich.
 
Die Box der Navigation liegt zwischen der des Headers und des Contents, nur leider hast du die floats nicht ganz korrekt gemacht. Du hast den clear im Content gesetzt, ich vermute dass darin der Fehler besteht.

So funktioniert es:

CSS
body
{
font-family: Verdana;
background-color: #949494;
font-size: 62.5%;
}

h1
{
color: #ffffff;
font-weight: normal;
margin-bottom: 0;
}

#header
{
background-color: #284E6B;
margin-bottom: 0;
}

#box
{
background-color: #ffffff;
width:80em;
margin:auto;
}

#navigation a:link, a:visited, a:active, a:hover
{
display: block;
}

#navigation
{
float: right;
width:15em;
}

#content
{
float:left;
background-color:Fuchsia;
width:65em;
}

.clean
{
visibility:hidden;
clear:both;
}
Zum Vergrößern anklicken....

XHTML:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de-de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Homepage</title>
<link rel="Stylesheet" media="screen" href="screen.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="box">
<div id="header">
<h1>Homepage</h1>
</div>
<div id="navigation">
<a href="index.html">Home</a>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut dapibus volutpat sapien.
Integer sed purus. Praesent consequat ullamcorper elit. Vivamus volutpat sagittis
eros. Phasellus in lectus. Vestibulum et tellus ac est rhoncus sollicitudin. Ut
commodo. Praesent ante eros, adipiscing vitae, eleifend a, molestie eu, libero.
Aliquam erat volutpat. Pellentesque eu arcu quis diam iaculis laoreet. Curabitur
pulvinar rutrum velit.
</p>
<p>
Vestibulum feugiat, orci sit amet placerat consectetuer, justo risus tincidunt enim,
ut tincidunt risus mauris tristique leo. Aenean condimentum faucibus nisl. Donec
a enim in arcu aliquet tristique. Praesent porta lectus vel pede. Vestibulum in
augue ornare tortor feugiat imperdiet. Aliquam commodo mauris et libero. Donec feugiat.
Mauris ut nibh eu eros mollis posuere. Duis ullamcorper commodo sapien. Phasellus
eleifend accumsan mauris. Etiam vestibulum elit. Suspendisse justo felis, aliquet
sed, tristique ac, molestie at, est. Nulla facilisi. Nam at magna ut ligula consequat
tempus. Vivamus tellus. Curabitur molestie neque. Vivamus sapien leo, vulputate
eget, rhoncus at, posuere eget, est. Mauris in tellus. Pellentesque venenatis purus
sit amet arcu.
</p>
<p>
Donec interdum purus. Mauris arcu libero, ullamcorper eu, pretium ac, tempor eget,
nibh. Curabitur quis est ac nibh semper imperdiet. Aenean lobortis sapien sed ipsum.
Quisque lobortis, magna id mattis facilisis, purus lorem consequat tortor, id facilisis
leo dui sit amet massa. Sed accumsan. In cursus tellus in diam. Donec erat risus,
fermentum et, dignissim in, placerat et, sem. Fusce laoreet. Proin quis pede. Nunc
elementum egestas orci. Suspendisse eu mauris. Curabitur aliquam hendrerit arcu.
Cras ut mi.
</p>
<p>
Praesent iaculis laoreet neque. Nullam molestie arcu quis massa. Sed feugiat dui
nec ipsum. Morbi arcu. Proin nec ligula. Aenean lectus ipsum, fermentum eu, ornare
in, aliquam eget, diam. Vestibulum nunc sem, fermentum vel, gravida id, malesuada
eu, nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Praesent ac mauris sit amet ipsum faucibus ornare. Nam eget
magna eget purus iaculis fermentum. Donec pede. Phasellus sapien. Fusce ipsum nibh,
pellentesque vel, suscipit nec, viverra quis, metus. Ut ac magna.
</p>
<p>
Nam commodo leo sit amet ligula. Pellentesque fringilla tincidunt turpis. Nam ipsum.
Sed at quam. Ut arcu. Maecenas vehicula. Curabitur malesuada magna ac risus. Praesent
in mi. Proin ligula. Nulla facilisi. Duis tempor nunc nec eros.
</p>
</div>
<br class="clean" />
</div>
</body>
</html>
Zum Vergrößern anklicken....
 
<div id="box">
</div>

nimmst du raus, dann ist der Abstand weg.
 
Ja das clear war eine Sache, aber den Abstand zur Headerbox bekomme ich so trotzdem nicht weg.

Ich habe jetzt mal "* { margin: 0; padding: 0; } " verwendet, jetzt gehts keine Ahnung, wo ich noch etwas vergessen hatte.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten