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

[Anfänger] Lücke zwischen Grafik - HTML Problem?

P

PeterrrrP

Neues Mitglied
Hi Leute, ich hab nen kleines HTML problem.
Hab mir eine Seite gemacht mit Design. Ich habe nun eine index.html und eine style.css
Jetzt wird am Ende vom Content die Bilddatei und die Fußleiste nicht direkt "drangehängt" sondern es gibt ne komische Lücke, bei der ich nicht weiß, wie ich die Lücke wegbekomme.
Hier die passenden Stellen mit Bezeichnungen
"unten_content" und "fussleiste" sind die id's




PHP: 
      <div id="bild_content">
        <img src="HOUSE_21.gif" />
        <p>asdasd</p>
        <p>asdasd</p>
        <p>asdasd</p>
         <p>asdasd</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
    
    <div id="unten_content">
        <img src="HOUSE_09.gif" />
    </div>
    
    <div id="fussleiste">
        <img src="HOUSE_10.gif" /><a href="impressum.php" ><img  src="HOUSE_11.gif" border="0" onMouseOver="this.src='HOUSE_19.gif';" onMouseOut="this.src='HOUSE_11.gif';" /></a><a href=        "contact.php"><img src="HOUSE_12.gif" border="0" onMouseOver="this.src='HOUSE_20.gif';" onMouseOut="this.src='HOUSE_12.gif';" /></a>
    </div>


Achja, noch ne kleine Frage, wie bekomme ich diesen Rand hier weg? bzw diese Ränder?


Die Seite ist immoment nur auf meinem Computer, also noch nicht online.
Wäre nett wenn mir jemand helfen könnte.
MfG
PeterrrrP
 
margin ist bereits auf 0
hier die CSS datei:

PHP: 
@charset "utf-8";
/* CSS Document */

#page {
    background-color:#333333;
    text-align:center;
    margin:0px; 
    padding:0px;
    }
    
#bild_content {
    background-image:url('HOUSE_21.gif');
    background-repeat:repeat-y;
    background-position:center;
}
 
Also hab die komplette seite als div id="page" deswegen #page ...
ich probiers ma mit fussleiste dann margin:0px
werde dann gleich ma berichten :)
 




PHP: 
@charset "utf-8";
/* CSS Document */

#page {
    background-color:#333333;
    text-align:center;
    margin:0px; 
    padding:0px;
    }
    
#bild_content {
    background-image:url('HOUSE_21.gif');
    background-repeat:repeat-y;
    background-position:center;
}

#bild_content {
    margin:0px;
}

#text {
    margin:0px;
    padding:0px;
    color:#FFF;
}

#unten_content {
    margin:0px;
}

#fussleiste {
    margin:0px;
}
PHP: 
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="template.css" />
<link rel="shortcut icon" href="favicon.jpg" type="image/jpg" />
<title>ASDF</title>


</head>

<body>
<div id="page">

    <div id="header">
        <img src="HOUSE_01.gif" />
    </div>
    
    <div id="button_home">
      <a href="home.php"><img src="HOUSE_02.gif" border="0" onMouseOver="this.src='HOUSE_13.gif';" onMouseOut="this.src='HOUSE_02.gif';" /></a><a href="news.php"><img src="HOUSE_03.gif" border       ="0" onMouseOver="this.src='HOUSE_14.gif';" onMouseOut="this.src='HOUSE_03.gif';" /></a><a href="top15.php"><img src="HOUSE_04.gif" border="0" onMouseOver="this.src='HOUSE_15.gif';"        onMouseOut="this.src='HOUSE_04.gif';" /></a><a href="forum.php"><img src="HOUSE_05.gif" border="0" onMouseOver="this.src='HOUSE_16.gif';" onMouseOut="this.src='HOUSE_05.gif';" /></a><a         href="tuts.php"><img src="HOUSE_06.gif" border="0" onMouseOver="this.src='HOUSE_17.gif';" onMouseOut="this.src='HOUSE_06.gif';" /></a>
  </div>
    
    <div id="oben_content">
      <img src="HOUSE_07.gif" />
    </div>
    
      <div id="bild_content">
        <img src="HOUSE_21.gif" />
        <div id="text"
            <p>asdasd</p>
            <p>asdasd</p>
            <p>asdasd</p>
            <p>asdasd</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>

    </div>
    
    <div id="unten_content">
        <img src="HOUSE_09.gif" />
    </div>
    
    <div id="fussleiste">
        <img src="HOUSE_10.gif" /><a href="impressum.php" ><img src="HOUSE_11.gif" border="0" onMouseOver="this.src='HOUSE_19.gif';" onMouseOut="this.src='HOUSE_11.gif';" /></a><a href=        "contact.php"><img src="HOUSE_12.gif" border="0" onMouseOver="this.src='HOUSE_20.gif';" onMouseOut="this.src='HOUSE_12.gif';" /></a>
    </div>
    
</div>



</body>
</html>
so schauts jetzt momentan aus.
 
Es hat nun tatsächlich geklappt, allerdings nicht mit diesem Lösungsweg.
Ich hab einfach im Code den Text mit dem <img> vertauscht.

jetzt sieht beides wiefolgt aus:

PHP: 
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="template.css" />
<link rel="shortcut icon" href="favicon.jpg" type="image/jpg" />
<title>House Music</title>


</head>

<body id="body">

    <div id="header">
    
        <img src="HOUSE_01.gif" />
    </div>
    
    <div id="button_home">
    
      <a href="home.php"><img src="HOUSE_02.gif" border="0" onMouseOver="this.src='HOUSE_13.gif';" onMouseOut="this.src='HOUSE_02.gif';" /></a><a href="news.php"><img src="HOUSE_03.gif" border       ="0" onMouseOver="this.src='HOUSE_14.gif';" onMouseOut="this.src='HOUSE_03.gif';" /></a><a href="top15.php"><img src="HOUSE_04.gif" border="0" onMouseOver="this.src='HOUSE_15.gif';"        onMouseOut="this.src='HOUSE_04.gif';" /></a><a href="forum.php"><img src="HOUSE_05.gif" border="0" onMouseOver="this.src='HOUSE_16.gif';" onMouseOut="this.src='HOUSE_05.gif';" /></a><a         href="tuts.php"><img src="HOUSE_06.gif" border="0" onMouseOver="this.src='HOUSE_17.gif';" onMouseOut="this.src='HOUSE_06.gif';" /></a>
  </div>
    
    <div id="oben_content">
    
      <img src="HOUSE_07.gif" />
    </div>
    
      <div id="bild_content">
        <div id="content_text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </div>
       
        <img src="HOUSE_21.gif" />
    </div>
    
    <div id="unten_content">
    
        <img src="HOUSE_09.gif" />
    </div>
    
    <div id="fussleiste">
    
        <img src="HOUSE_10.gif" /><a href="impressum.php" ><img src="HOUSE_11.gif" border="0" onMouseOver="this.src='HOUSE_19.gif';" onMouseOut="this.src='HOUSE_11.gif';" /></a><a href=        "contact.php"><img src="HOUSE_12.gif" border="0" onMouseOver="this.src='HOUSE_20.gif';" onMouseOut="this.src='HOUSE_12.gif';" /></a>
    </div>
   
</body>
</html>

PHP: 
@charset "utf-8";
/* CSS Document */

#body {
    background-color:#333333;
    text-align:center;
    }
    
#bild_content {
    background-image:url('HOUSE_21.gif');
    background-repeat:repeat-y;
    background-position:center;
}

#content_text {
    color:#FFF;
}


aber nun ein neues Problem, hier ein Bild dazu:



Den Text so ausrichten, dass er normal linksbündig ist, abr halt im Contentbereich.
Also im Bereich "bild_content"
wenn ich jetzt margin vom text beispielsweise auf 15px stelle, bekomme ich wieder eine Lücke, diesmal nach oben hin.
 
Gib dem #content_text eine feste Breite und eine Mindesthöhe (min-height).

Dann kann der Text nur nach unten ausweichen.

Außerdem ist Margin der Außenabstand, hier musst du mit Padding, dem Innenabstand, arbeiten. Ist alles genauso wie bei Margin, nur dass es eben in die andere Richtung geht...
 
Joo danke, Timmer, hat geklappt. Hier der aktuelle Code

PHP: 
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="/templates/House_Music3/css/template.css" />
<link rel="shortcut icon" href="/templates/House_Music3/favicon.jpg" type="image/jpg" />
<title>House Music</title>


</head>

<body id="body">

    <div id="header">
    
      <img src="/templates/House_Music3/HOUSE_01.gif" />
    </div>
    
<div id="menue">
    
      <a href="home.php"><img src="/templates/House_Music3/HOUSE_02.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_13.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_02.gif';" /></a><a href="news.php"><img src="/templates/House_Music3/HOUSE_03.gif" border       ="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_14.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_03.gif';" /></a><a href="top15.php"><img src="/templates/House_Music3/HOUSE_04.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_15.gif';"        onMouseOut="this.src='/templates/House_Music3/HOUSE_04.gif';" /></a><a href="forum.php"><img src="/templates/House_Music3/HOUSE_05.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_16.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_05.gif';" /></a><a         href="tuts.php"><img src="/templates/House_Music3/HOUSE_06.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_17.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_06.gif';" /></a>
  </div>
    
    <div id="oben_content">
    
      <img src="/templates/House_Music3/HOUSE_07.gif" />
    </div>
    
<div id="bild_content">
        <div id="content_text">
                <jdoc:include type="component" style="xhtml" />
       </div>
       
  <img src="/templates/House_Music3/HOUSE_21.gif" />
    </div>
    
    <div id="unten_content">
    
        <img src="/templates/House_Music3/HOUSE_09.gif" />
    </div>
    
    <div id="fussleiste">
    
        <img src="/templates/House_Music3/HOUSE_10.gif" /><a href="impressum.php" ><img src="/templates/House_Music3/HOUSE_11.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_19.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_11.gif';" /></a><a href=        "contact.php"><img src="/templates/House_Music3/HOUSE_12.gif" border="0" onMouseOver="this.src='/templates/House_Music3/HOUSE_20.gif';" onMouseOut="this.src='/templates/House_Music3/HOUSE_12.gif';" /></a>
    </div>
   
</body>
</html>
PHP: 
@charset "utf-8";
/* CSS Document */

#body {
    background-color:#333333;
    }

#header {
    text-align:center;
}

#menue {
    text-align:center;
}

#oben_content {
    text-align:center;
}
    
#bild_content {
    background-image:url('/templates/House_Music3/HOUSE_21.gif');
    background-repeat:repeat-y;
    background-position:center;
}

#unten_content {
    text-align:center;
}

#fussleiste {
    text-align:center;
}

#content_text {
    color:#FFF;
    padding:12px;
    padding-left:460px;
    padding-right:460px;
    min-height: 400px;
    min-width: 600px;
    text-align:center;
}

#contentheading {
    text-align:center;
}

#buttonheading {
    border:none;
}

#modifydate {
    text-align:right;
}

Nun hab ich wieder ein neues kleines Problem xD



Ich weiß nicht wo das Bild jetzt herkommt, ob es ein Fehler in der index.php an der Stelle hier, oder im CSS irgendwo:

HTML: 
<div id="bild_content">
        <div id="content_text">
                <jdoc:include type="component" style="xhtml" />
       </div>
       
  <img src="/templates/House_Music3/HOUSE_21.gif" />
    </div>

Viel Dank für die Hilfe die ich bis jetzt bekommen habe und bekommen werde :)
 
Am besten wäre es, wenn du die Seite schnell irgendwo uploaden würdest, dann kann ich die Seite live bearbeiten und dir sagen, wo das Problem liegt.

Ach ja, ich sehe gerade, du hast min-width angegeben. 1. Verursacht das Probleme bei IE (soviel ich weiß) und 2. ist es nicht gut, da deine Seite ja eine feste Breite hat und nicht in die Breite wachsen soll. Tausch das min-width gegen width aus.
 
Zentrieren tust du nicht mit Padding, sondern mit Margin, und zwar so:

margin:0 auto;

Das ist die horizontale Zentrierung einer Seite.

Ander bitte Folgendes:

Code: 
#content_text {
color:#FFFFFF;
margin:0 auto;
min-height:400px;
padding:12px;
text-align:center;
width:730px;


}

Der schwarze Streifen ist das Bild "/templates/House_Music3/HOUSE_21.gif". Gib dem Bild eine Klasse/ID und definiere hier auch margin:0 auto; oder setz es in den Div "content_text".

Damit müsste alles funktionieren.
 
Ih hoffe ich weiderhole nichts:)

Hi
Hab nicht alle antworten durchgelesen.

Paading und Margin auf Null setzen ist ja klar.

Zusätlich kannst du noch versuchen den Zeilenumbruch zu verhindern.
Der Ie hat damit manchmal ein Problem.

Also der Quellcode <img /><img ....
statt <img />
<img ...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben