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

Verschachteltes Layout im Hintergrund: Fehler

  • Ersteller Ersteller ohrflieger
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
O

ohrflieger

Guest
Hallo vor den Bildschirmen,
ich habe mir ein CSS-basiertes Layout gebastelt, aber es will nicht so, wie ich will. Hier ein erster Eindruck:

http://leinwandag.de.vu/Medien/GRUND.php

Hier die Stylesheets zu der Datei:
HTML: 
body,html{font-family:Verdana;font-size:10pt;color:#2263a0;} 
a{text-decoration:none;color:#ffffff;}
a:hover{color:#645d50;}
.bgpad{
padding-left:60px;
padding-right:60px;
}
.bgfill {
background:url(Bild/bg_fill.png) top left no-repeat;
}
.bgtop {
background:url(Bild/bg_top.png) top left no-repeat;
width:800px;
}
.bgmid {
background:url(Bild/bg_mid.png) left repeat-y;
}
.bgunt {
background:url(Bild/bg_unt.png) bottom left no-repeat;
}

Und der Einbindungscode:
HTML: 
<div class="bgmid">
<div class="bgfill">
<div class="spectop">
<div class="bgtop">
<div class="bgunt">
<div class="bgpad">

<font size="-2"><a href="index.php">Startseite</a>&nbsp;|&nbsp;<a href="index.php?impressum">Impressum</a></font><br>
<div style="float:right;">
<a href="index.php"><img src="Bild/spacer.gif" width="250" height="180" alt="" border="0"></a>
</div>
<a href="m_schneck.php"><img src="Bild/spacer.gif" width="400" height="140" alt="" border="0"></a><br>
<font size="+1">Die offiziellen Medienseiten</font><br clear="all">

<p>Willkommen! Willkommen!</p>

</div></div></div></div></div></div>

Warum positioniert sich das Ende (Klasse ".bgunt") nicht ganz unten, sondern mitten im Bild? Welche Angabe fehlt?
 
Zuletzt bearbeitet von einem Moderator:
Ich weiß nicht, was Du willst .... .bgunt positioniert sich doch unten. Oder hast Du das Bildchen bg_unt.png etwa falsch gemacht? Z.B. einen riesigen transparenten Bereich unten dem Ende?

Die Ausrichtung Bottom richtet sich nach den Bild-Daten, nicht nach den Bild-Inhalten ;-)

Gruß,
Jumper, the II.
 
Hast du dir die Seite mal angesehen?
Bei Firefox UND IE macht er es falsch. Das Bild bg_unt.png hängt mitten in der Seite an der falschen Stelle!!!
Es soll ganz unten sein und den Kasten mit den runden Ecken abschließen. tut es aber nicht. Und das Bild bg_unt.png sieht so aus:

bg_unt.png


Ist der Leerraum das Problem?
 
Hallo,

natürlich habe ich mir die Seite angesehen ... ich habe sogar etwas Zeit investiert und den Fehler gefunden .... und ich habe ihn Dir sogar schon genannt.

Jetzt habe ich wieder etwas Zeit investiert .... und erkläre es Dir ausführlich:

Das ist Dein Orginal:
var1.gif


Das ist die bg_unt.png (mit Rahmen zum Erkennen des Leerraums ....):
bg_unt.gif


Das ist die Version mit dem gekürzten bg_unt.png .... ich habe sie mal bg_unt2.png genannt:
var2.gif


Sieht schon mal besser aus ... aber so richtig ist es immer noch nicht. Hier nochmal die überarbeitete bg_unt.png alias bg_unt2.png (wieder mit Rahmen):
bg_unt2.gif


Und ich gehe davon aus, so möchtest Du es:
var3.gif


und das ist der Quellcode inkl. den für den Fehler recht einfach nachvollziehbaren HTML-Code:
HTML: 
<html>
 <head>
  <title>0008</title>

<style>

body , html {
  font-family:Verdana;
  font-size:10pt;
  color:#2263a0;
} 

a {
  text-decoration:none;
  color:#ffffff;
}

a:hover {
  color:#645d50;
}

.bgpad {
  padding-left:60px;
  padding-right:60px;
}

.bgfill {
  background:url(Bild/bg_fill.png) top left no-repeat;
}

.bgtop {
  background:url(Bild/bg_top.png) top left no-repeat;
  width:800px;
}

.bgmid {
  background:url(Bild/bg_mid.png) left repeat-y;
}
.bgunt {
  background:url(Bild/bg_unt2.png) bottom no-repeat;
  height:20px;
  width:800px;
}

</style>

 </head>
 <body>


  <div class="bgmid"> 
   <div class="bgfill"> 
    <div class="spectop"> 
     <div class="bgtop"> 
      <div class="bgpad"> 
       <font size="-2">
        <a href="index.php">Startseite</a>&nbsp;|&nbsp;
        <a href="index.php?impressum">Impressum</a>
       </font>
       <br> 
       <div style="float:right;"> 
        <a href="index.php"><img src="Bild/spacer.gif" width="250" height="180" alt="" border="0"></a>
       </div> 
       <a href="m_schneck.php"><img src="Bild/spacer.gif" width="400" height="140" alt="" border="0"></a><br>
       <font size="+1">Die offiziellen Medienseiten</font>
       <br clear="all"> 
       <p>Willkommen! Willkommen!</p> 
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="bgunt"> 
  </div>

 </body>
</html>

So, jetzt noch Fragen?

Gruß,
Jumper, the II.
 
Zuletzt bearbeitet:
Wow

Wow.... Das sich jemand wegen mir solche Mühe macht.... Danke! Echt toll! :wink:

Also ist es ganz einfach... Ich muss das Bild einfach anhängen oder, wenns nicht transparent wäre, kürzen. Das Bild hat sich also mit dem transparenten Bereich unten in die Ecke gezwängt und dann ist der Bereich, den ich auf dem Bild oben gezeichnet habe, natürlich auch oben...

Das einzige Problem ist dieses Loch beim Firefox:

forum.jpg


Wie soll man das Stopfen? Das entsteht nämlich durch den Abstand zwischen dem ersten Bereich und dem zweiten Bereich. Ich hab schon einiges Versucht, aber es klappt nichts...

EDIT:
Und die Angabe "left" muss überall rein, da er sonst nicht alles passgenau aneinander legt.

EDIT2:
Hat sich erledigt :wink:

Hier der Code, mit Stylesheets (hab jetzt noch das extradesign* dazugenommen):

Stylesheets:
HTML: 
.bgpad{
padding-left:60px;
padding-right:60px;
}
.bgfill {
background:url(Bild/bg_fill.png) top left no-repeat;
}
.bgfill2 {
background:url(Bild/bg_fill.png) top left no-repeat;
}
.bgtop {
background:url(Bild/bg_top.png) top left no-repeat;
width:800px;
}
.bgmid {
background:url(Bild/bg_mid.png) left repeat-y;
}
.bgunt {
background:url(Bild/bg_unt.png) top left no-repeat;
height:100px;
width:800px;
}
.spectop{
background:url(Bild/bg_spec.png) top left no-repeat;
}
.specmid {
background:url(Bild/bg_specmid.png) left repeat-y;
}
.specunt {
background:url(Bild/bg_specunt.png) top left no-repeat;
}

Und der Quelltext:
HTML: 
<div class="specmid">
<div class="bgmid">
<div class="bgfill">
<div class="spectop">
<div class="bgtop">
<div class="bgpad">
...blablabla...Der Inhalt...
</div></div></div></div>
<div class="bgfill2"><div class="specunt"><div class="bgunt"><div class="bgpad">
Hier kann noch etwas Text hin,der ganz unten steht.....
</div></div></div></div></div></div>

Die Lösung ist, dass der sich wiederholende Hintergrund für den Mittelteil über die ganze Seite gezogen wird, aber im Endteil durch das Bild bg_fill.png überdeckt wird, sodass das ganze auch noch mit einem wechselbaren Rahmen hinterlegt werden kann, was mein Ziel war :)

So sieht's aus (der Rahmen wird noch geändert):
http://www.leinwandag.de.vu/Medien/GRUND.php

Danke für die Hilfe!
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben