Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Mindesthöhe von 100% mit div und Hintergrund-gif“

papiertiger

Aktives Mitglied

Hallo Ihr!

Ich bräuchte mal eure Hilfe! Ich hab ein Layout mit Header und Content-Bereich. Den Header möchte ich oben als gif-Hintergrund einer div-Box haben. Nach diesem Header soll der Contentbereich anfangen, für den ich einen 10px großen gif-Streifen habe, der wiederholt werden soll.

Wenn wenig Text auf der Seite ist soll, der Streifen solange wiederholt werden, dass kein Hintergrund mehr zu sehen ist!

Wenn mehr Text auf der Seite ist, soll der Streifen solange wiederholt werden, wie der Text lang ist!

Wie mach ich das? Wär dankbar für Hilfe!

LG papiertiger
 

blackout

Schaf im Wolfspelz

Code:
<div> 
  <div style="width: XXXpx; height: YYYpx; background: url(deinbild.png);"></div> 
  <div style="width=XXXpx; background: url(derhintergrund.png);">
    hier kommt dein text oder content oder was auch immer
  </div>
</div>

"dass kein hintergrund mehr zu sehen ist" ist leider zu schwammig ausgedrückt als dass ich das einbeziehen könnte...
 

papiertiger

Aktives Mitglied

hi blackout!

Damit meinte ich, dass der letzte Streifen praktisch an den unteren Browserrand "geklebt" wird. zwischen Content und Browser also kein Hintergrund mehr zu sehen ist...

Mit Angaben in px kann ich nur nix anfangen, weil ich ja damit rechnen muss, dass nicht jeder die gleiche Auflösung hat! Und da wird es dann schwierig. Wenn ich allerdings min-height: 100% angebe klappt das nicht wie ich dachte!

LG papiertiger
 

Eskayp

Something

Du musst dem Body auch sagen, dass er 100% haben soll...

also:
Code:
<body style="height:100%"><div style="height:100%">...
 

papiertiger

Aktives Mitglied

Hi Ihr!

Das funktioniert irgendwie nicht so richtig...

Hier mal der Code, vielleicht fällt irgendwem was ins Auge, woran es liegen könnte!

Code:
html {   
   min-height: 100%;
   margin-bottom: 1px;
}

body {   
   background-color: #CCCCCC;
   color: #333333;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   text-align: left;
   margin: 0px;
   min-height: 100%;
}

#mid {      
   margin: auto;
   position: relative;
   width: 780px;
   height: auto;
}

#header      
{
   background-image:url(img/header.gif);
   background-repeat: no-repeat;
   width:780px;
   height:150px;
   left:0px;
   top:0px;
}

#content   
{
   background-image: url(img/content.gif);
   width:780px;
   position:absolute;
   left:0px;
   top:150px;
   min-height: 100%;
}

#footer      
{
   width:780px;
   height:30px;
   left:0px;
   bottom:0px;
}

.content {
   width: 650px;
   margin-left: 65px;
   margin-top: 15px;
   padding-bottom: 60px;
}

.footer {
   background-color: #666666;
   width: 680px;
   margin-left: 50px;
   color: #CCCCCC;
}

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="mid">
   <div id="header">test</div>
   
   <div id="content">
      <div class="content">
         <h1>Lorem Ipsum</h1>
         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.

         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>
      <div id="footer"><div class="footer">test</div></div>
   </div>

</div>
</body>
</html>

LG papiertiger
 
D

Daniela

Guest

mach mal deinen Gifstreifen nicht als BG in den Content sondern in deinen Body.

Dann geht das ding IMMER übers ganze Browserfenster.
 

papiertiger

Aktives Mitglied

Hi Daniela!

Ja, so hatte ich das auch schon ausprobiert... Allerdings hab ich dann das Problem, dass es nicht mehr zentriert ist :(

LG papiertiger
 

Eskayp

Something

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>test</title> 
<link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body>
  <div align="center" height="100%" style="height:100%">
    <table cellspacing="0" cellpadding="0" border="0" width="780" height="100%" style="height:100%">
      <tr>
        <td class="content" valign="top">
          <div class="header">test</div>
          <h1>Lorem Ipsum</h1> 
          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.
 
          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 class="footer">test</div>
        </td>
      </tr>
    </table>
  </div>
</body>
</body> 
</html>

Code:
html {    
  height:100%; 
} 

body {    
  height:100%; 
  background-color:#CCCCCC; 
  color:#333333; 
  text-align:left; 
  margin:0px; 
}
body,table,tr,td,div,input,select,option,textarea {
  font-family:Arial,Helvetica,sans-serif; 
  font-size:13px; 
}

td.content { 
  background-image:url(img/content.gif); 
} 
div.header {
  background-image:url(img/header.gif); 
  background-repeat:no-repeat; 
  height:150px; 
}
div.content {
  width: 650px; 
  margin-left: 65px; 
  margin-top: 15px; 
  padding-bottom: 60px; 
}
div.footer {
  background-color:#666666; 
  width:680px; 
  margin-left:50px; 
  color: #CCCCCC; 
  height:30px; 
}
 

papiertiger

Aktives Mitglied

crazybeelze schrieb:
dann zentrrier den streifen doch durch paading nach links rechts oben und unten jenachdem wie du es brauchst!

Wenn ich ein zentriertes Design hab, kann ich keine px oder Prozentangaben machen! ;)

Trotzdem Danke!

@Eskayp... Ich probier das gleich mal aus! Vielen Dank!

LG papiertiger
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben