Antworten auf deine Fragen:
Neues Thema erstellen

div-container-höhe bis zum ende eines dokuments

E

exploit89

Noch nicht viel geschrieben

Hi leute.

ich hab ein kleines problem mit Div. Ich will den eigentlichen inhalt
der seite mit schatten hervorheben. dazu habe ich ein div in der mitte mit
meiner gewünschten seitenbreite (900px) und links und rechts daran hängen
zwei div's mit einer breite von 13px und einer höhe von 100% als hintergrundbild mein schatten.

Bild: divi9fr.jpg - abload.de

wenn der inhalt der seite aber größer wird als die bildschirmhöhe, also sich
scrollbalken bilden, Dann hört der schatten auf.

wie bekomm ich es hin das mein div nicht 100% hoch ist sondern so hoch wieviel inhalt mein dokument enthält

gruß
ext89
 

C

Con7

Noch nicht viel geschrieben

AW: div-container-höhe bis zum ende eines dokuments

Hallo,

nehm mal die 100% komplett raus, normalerweise passen sich Elemente ( div, Tabellen etc.) ihrem Inhalt an, wenn sie keine absolute oder prozentuale Größe zugewiesen bekommen.
 
S

Steve1405

ready

AW: div-container-höhe bis zum ende eines dokuments

Nur ist in dem div für den Schatten kein Inhalt. Du könntest auch einfach den Schatten als bg-Bild beim div für den Inhalt einfügen.

gruß
 
E

exploit89

Noch nicht viel geschrieben

AW: div-container-höhe bis zum ende eines dokuments

Steve1405 schrieb:
Nur ist in dem div für den Schatten kein Inhalt. Du könntest auch einfach den Schatten als bg-Bild beim div für den Inhalt einfügen.

gruß
Zum Vergrößern anklicken....

das wäre eine möglichkeit.. aber wenn nun der inhalt kleiner als die bildschirmhöhe ist. hört der schatten auch auf.

ich arbeite momentan aber auch mit ebenen. es wird also ein haupt div erstellt und zentriert. dann andere divs dran gehängt

gruß
ext89
 
W

waterwebdesign

Guest

AW: div-container-höhe bis zum ende eines dokuments

HTML: 
html, body {height: 100%;}
div {height: 100%;}

Wenn du so den Elementenb html und body die volle Höhe zuweist, kann auch ein Div die volle Fensterhöhe bekommen, sonst nicht. Beachte die Reihenfolge:
html -> body -> div
Sollte das Div noch einem anderen Element untergeordnet sein, braucht dieses natürlich auch 100%.
 
E

exploit89

Noch nicht viel geschrieben

AW: div-container-höhe bis zum ende eines dokuments

hat leider nicht funktioniert.

habe am anfang des css html, body, div 100% zugewiesen. jedoch keine
veränderung.
 
W

waterwebdesign

Guest

AW: div-container-höhe bis zum ende eines dokuments

Hm, dann wäre dein Code ganz hilfreich. Kannst du HTML- und CSS-Code mal komplett posten?
 
E

exploit89

Noch nicht viel geschrieben

AW: div-container-höhe bis zum ende eines dokuments

waterwebdesign schrieb:
Hm, dann wäre dein Code ganz hilfreich. Kannst du HTML- und CSS-Code mal komplett posten?
Zum Vergrößern anklicken....

war schon dabei.

da es sich zum teil um absulut positionierte divs handelt, und deshalb so evtl. die
vorstellungskraft sinkt. habe ich mal ein rar archiv gepackt die gleich die bilder etc enthalten

edit: der link xD


html:
Code: 
<!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" />
<title>Team Weizmann</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv7 {
    background-image: url(bilder/hauptbild/abnehmen.jpg);
}
#apDiv9 {
    position:absolute;
    left:228px;
    top:413px;
    width:404px;
    height:36px;
    z-index:12;
    font-size: 18px;
    color: #882424;
}
#apDiv10 {
    position:absolute;
    left:339px;
    top:469px;
    width:413px;
    height:62px;
    z-index:13;
    color: #65605C;
}



#apDiv11 {
    position:absolute;
    left:248px;
    top:459px;
    width:624px;
    height:477px;
    z-index:26;
}
#apDiv15 {
    position:absolute;
    left:228px;
    top:942px;
    width:495px;
    height:27px;
    z-index:27;
    font-size: 14px;
}
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2">
  <div class="stil3" id="apDiv15">Für eine persönliche Beratung kontaktieren sie eine unserer Studios</div>
  <div class="stil1" id="apDiv11">Mehr als 100 Experten Studien des &quot;FPZ: Deutschland stärkt den Rücken&quot; führten zur Erkenntnis, dass die wirbelsäulenstabilisierende Muskulatur eine Schlüsselfunktion für die Vorbeugung und Beseitigung von Rückenschmerzen hat.<br />
    <br />
    Das FPZ KONZEPT gliedert sich in aufeinander folgende Maßnahmen:<br />
    <br />
    1) Die Analyse ihres &quot;Rücken-Profiles&quot; (Dauer: ca. 60 Minuten)
    <br /><ul><li>Schmerzwerdegang, pers&ouml;nliches Profil</li>
    <li>genaue Messung der Beweglichkeit von Rumpf und Halswirbels&auml;ule</li>
    <li> genaue Messung der Kraft aller wichtigen Muskelgruppen</li> </ul>
    <p>2) Individuelle Therapieplanerstellung anhand Ihrer Messdaten,<br />
 Umpfang, Dauer und Häufigkeit der Trainingstherapie werden festgelegt und auf Ihrem<br />
 Trainingschip (am Handgelenk zu tragen) gespeichert<br />
 <br />
 3) Trainingstherapie (10 - 24 Therapieeinheiten á 60 Minuten)
 <br />
 Im Vordergrung steht die Optimierung der wirbelsäulenstabilisierenden Muskulatur mittels High-Tech- Geräten. Ergänzend werden Dehnungsübungen sowie Übungen zur mechanischen Entlastung der Wirbelsäule unter individueller Betreuung durchgeführt.
 <br />
 <br />
 4) Danach ... sollte man eine Trainingseinheit alle 7 Tage absolvieren<br />
 <br />
 <br />
 Die vorhandenen Rückenschmerzen verbessern sich deutlich bei 93,5 % der Patienten. Vorbildliche private und gesetzliche Krankenkassen ermöglichen ihren Versicherten eine Teilnahme an dem FPZ- Konzept</p></div>
<div class="stil3" id="apDiv24">Rückenkonzept</div>
<div class="stil1" id="apDiv9">Wie das FPZ-Rückenkonzept Ihnen hilft ...</div>
  <div id="apDiv8"></div>
  <div id="apDiv7"></div>
  <div id="apDiv6">
    <div id="hauptnavigation">
      <div align="center"><a href="team.htm">Team</a><a href="jobs.htm">Jobs</a><a href="impressum.htm">Impressum</a></div>
    </div>
  </div>
  <div id="apDiv3">
    <div id="apDiv4"></div>
  </div>    
    <div id="menu">
      <ul class="level1">
      <li><a href="index.htm">Willkommen</a></li>
        <li><a href="abnehmen.htm">Abnehmen</a></li>
        <li><a href="training.htm">Fitness-Training</a></li>
        <li><a href="physio.htm">Physiotherapie</a></li>
        <li><a href="ruecken.htm">R&uuml;ckenkonzept</a></li>
        <li><a href="seminare.htm">Seminare </a></li>
        <li><a href="vibration.htm">Vibrationstraining</a></li>
        <li><a href="kurse.htm">Kurse</a></li>
        <li><a href="haut.htm">Hautzumverlieben</a></li>
        <li><a href="beauty.htm">Beauty &amp; Wellness</a></li>
        <li><a href="zeiten.htm">Öffnungszeiten</a></li>
        <li><a href="kontakt.php">Kontakt</a></li>
        <li><a href="news.htm">News</a></li>
        <li><a href="links.htm">Partner Links</a></li>
      </ul>
  </div></div>
</body>
</html>
css:
Code: 
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:url(bilder/opaque.png); padding:1px 1px 0 1px;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul {position:absolute; left:-9999px; z-index: 7;}
#menu ul.level1 {position:absolute; left:5px; top:134px; width: 200px; height:380px}
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-bottom:1px solid #fff;} 
#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-24px; margin-left:0px;}
#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li a:hover {background:#9a9b9a;} 
#menu li:hover > a {background:#9a9b9a;}
#menu li a.fly {background: url(bilder/arrow.gif) no-repeat right top;}
#menu li a.fly:hover {background:#9a9b9a url(bilder/arrow.gif) no-repeat right top;} 
#menu li:hover > a.fly {background:#9a9b9a url(bilder/arrow.gif) no-repeat right top;}
#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

#apDiv1 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:5px;
    z-index:5;
    background-image: url(bilder/oben.jpg);
}
#apDiv2 {
    position: absolute;
    height: 100%;
    width: 900px;
    top: 20px;
    left: 50%;
    margin-left: -450px;
    top:0px;
    z-index: 2;
}
#apDiv3 {
    position:absolute;
    left:-13px;
    top:0px;
    width:13px;
    height:100%;
    z-index:5;
    background-image: url(bilder/schatten-l.jpg);
}
#apDiv4 {
    position:absolute;
    left:913px;
    top:0px;
    width:13px;
    height:100%;
    z-index:4;
    background-image: url(bilder/schatten-r.jpg);
}
#apDiv5 {
    position:absolute;
    left:26px;
    top:25px;
    width:150px;
    height:84px;
    z-index:9;
    background-image: url(bilder/logoneu.jpg);
}
#hauptnavigation a {
    font: normal 11px verdana,arial,sans-serif;
    color: #959E9B;
    background-color: #fff;
    display: block;
    height: 15px;
    width: 75px;
    padding-top: 3px;
    padding-left: px;
    text-align:center;
    text-decoration: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
    margin-top: 0.0px;
    margin-bottom: 0.0px;
}
#hauptnavigation a:hover {
    color: #fff;
    background-color: #959E9B;;
}
#apDiv6 {
    position:absolute;
    left:672px;
    top:6px;
    width:228px;
    height:15px;
    z-index:10;
}
#apDiv7 {
    position:absolute;
    left:208px;
    top:134px;
    width:691px;
    height:254px;
    z-index:11;
}
#apDiv8 {
    position:absolute;
    left:0px;
    top:389px;
    width:100%;
    height:106px;
    z-index:6;
    background-image: url(bilder/verlauf.jpg);
}
#apDiv12 {
    position:absolute;
    left:12px;
    top:529px;
    width:180px;
    height:40px;
    z-index:14;
}
#apDiv13 {
    position:absolute;
    left:0px;
    top:50px;
    width:180px;
    height:40px;
    z-index:14;
}
#apDiv14 {
    position:absolute;
    left:0px;
    top:50px;
    width:180px;
    height:40px;
    z-index:14;
}
#apDiv24 {
    position:absolute;
    left:671px;
    top:104px;
    width:205px;
    height:23px;
    z-index:25;
    font-size: 16px;
    text-align: right;
}
.stil1{    
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    color: #5D5855;
}
.stil2 {
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
}
.stil3 {
    font-size: 12px;
    color: #882424;
    font-family: Verdana, Geneva, sans-serif;
}
 
Zuletzt bearbeitet:
W

waterwebdesign

Guest

AW: div-container-höhe bis zum ende eines dokuments

Herje, erstmal sieht das ja nach Chaos aus. Warum 1 Div für den linken Schatten, 1 für den Rechten und dann noch für den Inhalt? Wenn der Bereich sowieso eine fixe Breite hat, mach doch ein Div, mit einem langen Hintergrundbild.
Jede Menge leere Divs, wozu? Den Abstand oben (5px) kriegt man doch auch anders hin als mit so einem Platzhalter.

Das Problem, warum mein Vorschlag nicht funktioniert hat: Ich hab vergessen zu erwähnen, das dass Div noch ein overflow:auto; braucht. Aber durch deine Verschachtelung, lässt sich das nicht ohne weitere einbauen.
Da am besten einem langen Container, der bekommt die breite Hintergrundgrafik mit beiden Schatten. Dann funktiert auch die Kombination aus 100% und overflow.
 
S

sh0ck

PST-SURVIVOR

AW: div-container-höhe bis zum ende eines dokuments

hier eine einfache, aber funktionierende lösung ohne overflow:auto, da bei dieser variante das übergeordnete element einen scrollbalken bekommt.

lösungsansatz:
mit kurzen inhalt:
mit langen inhalt:

Code: 
<!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>
<title>background repeat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <style type="text/css">
         <!--
         html, body {
         	 [COLOR="Red"]margin:0px; padding:0px;[/COLOR]
                 [COLOR="Red"]height:100%;[/COLOR] background-color:#999999;
                 }
         .background {
         	 width:800px; [COLOR="Red"]height:100%;[/COLOR]
                 margin:0px auto; padding:0px;
         	 background-image: url(bg.jpg);
 		 [COLOR="Red"]background-repeat: repeat-y;[/COLOR]
                 }

         .background p {
         	 font-family:Verdana, Tahoma, Helvetica, sans-serif;
 		 font-size:12pt; color:#000000;
                 margin:0px; padding:25px 75px;
                 background-image: url(bg.jpg);
 		 [COLOR="Red"]background-repeat: repeat-y;[/COLOR]
                 }
         -->
         </style>
</head>
<body>

<div class="background">
	<p>content</p>

	<p>content</p>
</div>

</body>
</html>

der trick besteht darin, das hintergrundbild sowohl im übergeordneten div mit der klasse "background" als auch im "p-tag" sich wiederholen zu lassen.

gruss chris
 
Zuletzt bearbeitet:
E

exploit89

Noch nicht viel geschrieben

AW: div-container-höhe bis zum ende eines dokuments

@ water.. die leeren divs sind bilder. ich richte sie als hintergrundbild meines
divs und kann so mein bild nach belieben positionieren. wie sollte man denn
die obere linie besser darstellen?

@ shock. danke die lösung hat funktioniert. ich kann sie so in die bestehende seite einfügen ohne das komplette gerüst zu verändern.


danke für die hilfen
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 123 (Mitglieder: 6, Gäste: 117)
Robots: 736

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben