Grafik auf 100% der Seite

DrunkenDX · 31 Mai 2007

feritge mal en screen an und verlinke ihn, das wir wissen wie du dir das vorstellst...
ich weiss gar echt net was dein endprodukt werden soll...

ich hab das so verstanden das du eine grafik immer bis zum unteren rand der seite haben willst.... oder?

Cheffu · 31 Mai 2007

Ja, es soll immer bis unten zum Rand gehen, aber alle vorschläge haben bisher das Ziel nicht erfüllt, sondern der Kasten ist immer über die 100% hinaus.

Aber hier mal ein Screen:
http://www.cheffu.de/problem/screen.jpg

und hier habe ich mal die HTML-Seite dammt der 2 Grafiken gepackt, damit ihr es euch offline anschauen könnt oder so:
http://www.cheffu.de/problem/problem.zip

Danke schonmal für die ganze Mühe bisher

JumperII · 31 Mai 2007

Hallo,

HTML:

body {
 height:100%;
 margin:0%;
 padding:0%;
 overflow: hidden;
}

Aber es bedingt, dass der Text entweder in einer eigenen Box seinen eigenen Scrollbalken bekommt oder sicher gestellt ist, dass der Text nicht zu viel wird.

Ansonsten lass Dir ein anderes Design einfallen :-) Oder JavaScript ;-)

Gruß,
Jumper, the II.

Cheffu · 31 Mai 2007

Ich habe das jetzt mal so probiert und per Divs habe ich das ganze in 3 Bereiche aufgeteilt. Es funktioniert nun wirklich, dass die Scrollbalken weg sind, aber wie du auch schon gesagt hast dasrf der Text nicht länger sein als die Seite hoch ist:Unbenanntes Dokument
Wie Bau ich dem Text rechts in ner eigenen Box einen Scrollbalken. Mir fällt da nur ein Frame ein, aber ist dies auch anderst möglich?

Weil wenn ich so etwas rein schreibe, sieht man den Text ja schon nichtmehr, wenn man nur mit einer kleineren Auflösung die Seite anschaut und der text etwas zu hoch ist.

Ist dies mit JavScript möglich weil du davon redest Jumper?

JumperII · 31 Mai 2007

Möglich ja .... sinnvoll? m.E. nein. per JavaScript könnte man die Auflösung des Browser-Fensters ermitteln und in Abhängigkeit des Browsers die Höhe des Balkens (bzw. auch das komplette Ausblenden) dynamisch steuern. Aber es nur bei aktivierten JavaScript, abgesehen, dass es nicht universell ist.

Besser ist ein anderes Layout oder eine andere Technologie ... z.B. Flash ...

Gruß,
Jumper, the II.

Cheffu · 31 Mai 2007

Mh oje ^^
Ein anderes Layout wäre naütlich möglich, aber jetzt habe ich daran scho so lange rumgebaut ^^
Flash wäre möglich wenn ich es könnte ^^ Habe zwar Adobe Flash CS3, aber keine Ahnung wie man da was machen kann ^^

N43 · 1 Juni 2007

Hallo,

wenn ich dich richtig verstanden geht das mit nem umgebenden div, das quer.gif enthält.

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" /> 
<title>Unbenanntes Dokument</title> 
<style> 
html {height:100%;} 
body { 
 height:100%; 
 margin:0%; 
 padding:0%; 
} 
 
#wrapper {
    position:relative;
    min-height:100%;
    
    background-image:url(./quer.gif);
    background-repeat:repeat-y;
}

#header {
    width:100%;
    height:24px;

    color:#5F71AB;
    text-decoration:none;
}

#navigation {
    width:187px;
    float:left;
    color:white;
    margin-left:15px;
}

#content {
   margin-left:187px;
   padding-left:15px;
}

#clearer {
    height:1px;
    clear:both;
    overflow:hidden;
}
 
</style> 
</head> 
 
<body>
        <div id="wrapper"> 
            <div id="header"> 
                <img src="./obenkomplett.gif" alt="Page Banner" /> 
            </div> 
             
            <div id="navigation"> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br />
        </div>
        <div id="content">
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
      </div>
      <div id="clearer"></div>        
</body> 
</html>

Das hat immer mindestens 100% der Seite, ohne zu scrollen. Wenn der Text aber länger ist kommt der Scrollbalken dazu.

N43

Cheffu · 1 Juni 2007

Hallo N43
Das ist schonmal ganz gut. Das einzige problem ist, das der Kasten an sich von vom top der Seite noch etwas weg sein muss.
Wenn ich dein Quelltext richtig verstehe msus also in dein #wrapper dies ncoh rein: margin-top:100px;
Wenn ich dies nun aber mache, dann kommt jetzt schon ein Scrollbalken und dies darf nicht sein ^^
Sorry, dass ich solche Anforderungen stelle, aber ich will über den Kasten eben noch eine Grafik

N43 · 1 Juni 2007

Hallo,

setz die Grafik einfach in das Header-div ein und pass dessen Höhe an. Dabei wird zwar nur das darunterliegende, also quer, verdeckt, aber das sollte ja reichen.

N43

Cheffu · 1 Juni 2007

Ok,
ich weis was du meinst und das würde im Notfall mit etwas Aufwand auch funktionieren.
Das Problem ist nur, dass selbst die Grafik die darüber noch kommt weder ganz am Seiten top, noch direkt am Kasten abschließen soll und dies würd mit deiner Lösung so passieren. Ich könne weiße Grafiken dazwischen schnipseln, aber dies ist ja nicht besonders elegant.

DrunkenDX · 1 Juni 2007

ich dachte sie soll die seite zu 100% füllen?

mach doch einfach mal en pic wie die seite aussehn greetz

Cheffu · 2 Juni 2007

Es soll nciht zu 100% füllen, sondern ab dem Punkt, von dem der kasten losgeht bis zum unteren Ende der Seite.

Insgesamt sol es dann so aussehn:
Fahrschule Fuhry

Nur der linke kasetn, andem hier die ganze zeit rumgeschraubt wird soll halt nur immer bist zum unteren Ende der Seite gehen

DrunkenDX · 2 Juni 2007

das geht doch dann mit divs...

wie zuvor schon gesagt das div auseinander scheiden und den oberenteil mit den rundungen anzeigen lassen...
im zweiten div wird dann der zweite teil des bildes hat dann eine höhe von einem px und den lässt du dann vertikal wiederholen.

Cheffu · 2 Juni 2007

Sorry, bin noch ein vollkommener Neuling auf dem Div-Gebiet, deshalb versteh ich nicht ganz wie du das machen willst, denn es ist nun ja schon so das die 2 Gerafikengeteilt sind un das dasd eine Repeatet wird, aber eben überdas Seitenende hinaus.

Ich habe das Querteil nun mal mit deinem Code verbunden, aber es geht aber nun über das Seitenende hinaus:
Unbenanntes Dokument

DrunkenDX · 2 Juni 2007

in der oberen grafik hast du die runden ecken und noch ein oder zwei px mehr nach unten?
die zweite grafik, welche wieder holt werden soll hat eine höhe von einem pixel?

gruss

Cheffu · 3 Juni 2007

Die Grafik und per margin-top sist sie von der Decke weg und die untere runde ecke wiederrum per margin-top von der anderen Grafik weg.
Wenn ich bei der wiederholenden Grafik eine Höhe von 1px einstell wiederholt es sich gannichtmehr, weil es ja als Background-image eingebunden ist?!

DrunkenDX · 3 Juni 2007

lad mal die beiden grafik dateien hoch so das man sie runterladen kann... dann versuch ich dir mal mit nem code zu helfen...

Cheffu · 4 Juni 2007

Hier hab ich mal die HTML Seite, sammt den Grafiken hochgeladen.
http://www.cheffu.de/problem/problem2.zip

Danke für die Mühe

N43 · 7 Juni 2007

Hallo,

ich hab dir mal den Code erstellt, die Abstände sind etwas gekünstelt, da border-top und -bottom nicht lief (im FF) und margin zu scrollen führt.

HTML:

<!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>Unbenanntes Dokument</title> 
<style> 
html {height:100%;} 
body { 
height:100%; 
margin-top:0%; 
margin-bottom:0%; 
margin-left:0%; 
margin-right:0%; 
padding:0%; 
} 
 
#a { 
 background-color:#FFF;
 height:165px; 
} 
 
#wrapper { 
    margin-left:50px; 
    margin-top:0px; 
    position:relative; 
    min-height:100%; 
    background-image:url(quer.gif); 
    background-repeat:repeat-y; 
} 
 
#header { 
    width:100%; 
    height:24px; 
} 
 
#navigation { 
    width:187px; 
    float:left; 
    color:white; 
    margin-left:15px; 
} 
 
#content { 
   margin-left:187px; 
   padding-left:15px; 
} 
 
#clearer { 
    height:1px; 
    clear:both; 
    overflow:hidden; 
} 
 
</style> 
</head> 
 
<body> 
        <div id="wrapper">
           <div id="a">
               <div style="height:25px;"></div>
               
               <div style="background-color:#000;">
                  <img src="kasteno2.gif" />
               </div>
           </div> 
         
            <div id="header">             
                <img src="obenkomplett.gif" alt="Page Banner" /> 
            </div> 
              
            <div id="navigation"> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
        </div> 
        <div id="content"> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
            hallo<br /> 
 
 
      </div> 
      <div id="clearer"></div>         
</body> 
</html>

N43

Cheffu · 7 Juni 2007

Habe mich gerade schon gefreut das alles geht und musst dann feststellen:
In Firefox geht es, aber nicht im IE :(
Im IE erscheint eine Scrollleiste, mit der oberen Grafik stimmt was mit der Höhe nicht und der Navigatonstext ist nicht da wo er sein soll :(

Grafik auf 100% der Seite

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied