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

PeterrrrP · 17. Oktober 2009 um 11:54

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

http://img5.imagebanana.com/img/a2nzmxha/thumb/Luecke.jpg

[PHP]

asdasd

<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>
[/PHP]

Achja, noch ne kleine Frage, wie bekomme ich diesen Rand hier weg? bzw diese Ränder?
http://img5.imagebanana.com/img/euw6bxjx/thumb/Rand.jpg

Die Seite ist immoment nur auf meinem Computer, also noch nicht online.
Wäre nett wenn mir jemand helfen könnte.
MfG
PeterrrrP

XraYSoLo · 17. Oktober 2009 um 16:41

margin auf 0 setzen.

Nils aka XraYSoLo

PeterrrrP · 17. Oktober 2009 um 20:19

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;
}

[/PHP]

DD-Stylz · 17. Oktober 2009 um 20:22

und untern_content und fussleiste auch?

PeterrrrP · 17. Oktober 2009 um 20:29

Also hab die komplette seite als div id=„page“ deswegen #page …
ich probiers ma mit fussleiste dann margin:0px
werde dann gleich ma berichten

XraYSoLo · 17. Oktober 2009 um 20:36

das KOMPLETTE, also den -tag damit formatieren.

Nils aka XraYSoLo

PeterrrrP · 17. Oktober 2009 um 20:45

http://img5.imagebanana.com/img/6h7r2ulw/thumb/einteilungjpg.jpg

http://img5.imagebanana.com/img/fdkaz0r/thumb/einteilungjpg2.jpg

[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][PHP]

ASDF

<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 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>

[/PHP] so schauts jetzt momentan aus.

prm · 18. Oktober 2009 um 06:45

Lücke am unteren Bildrand

PeterrrrP · 18. Oktober 2009 um 10:56

Es hat nun tatsächlich geklappt, allerdings nicht mit diesem Lösungsweg.
Ich hab einfach im Code den Text mit dem vertauscht.

jetzt sieht beides wiefolgt aus:

[PHP]

House Music

<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 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>

[/PHP]

[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;
}[/PHP]

aber nun ein neues Problem, hier ein Bild dazu:

http://img5.imagebanana.com/img/nskuxnn5/thumb/bla.jpg

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.

Timmer · 18. Oktober 2009 um 11:59

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…

PeterrrrP · 18. Oktober 2009 um 13:17

Joo danke, Timmer, hat geklappt. Hier der aktuelle Code

[spoiler=Codes]
[PHP]

House Music

<div id="header">

  <img src="/templates/House_Music3/HOUSE_01.gif" />
</div>

  <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 id="oben_content">

  <img src="/templates/House_Music3/HOUSE_07.gif" />
</div>

</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>

[/PHP][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;
}
[/PHP][/spoiler]

Nun hab ich wieder ein neues kleines Problem xD

http://img5.imagebanana.com/img/dn5952c1/thumb/prob.jpg

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]

<jdoc:include type=„component“ style=„xhtml“ />

</div>[/HTML]

Viel Dank für die Hilfe die ich bis jetzt bekommen habe und bekommen werde

Timmer · 18. Oktober 2009 um 13:57

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.

PeterrrrP · 18. Oktober 2009 um 14:08

Ok hast ne PM.

Timmer · 18. Oktober 2009 um 14:18

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;

}
[/CODE]

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.

WAY_KOW · 18. Oktober 2009 um 17:31

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 …
statt
<img …