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

Grafik auf 100% der Seite

Status
Für weitere Antworten geschlossen.
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?
 
Werbung:
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.
 
Werbung:
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?
 
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.
 
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 ^^
 
Werbung:
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
 
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
 
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
 
Werbung:
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.
 
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
 
Werbung:
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.
 
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
 
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
 
Werbung:
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?!
 
lad mal die beiden grafik dateien hoch so das man sie runterladen kann... dann versuch ich dir mal mit nem code zu helfen...
 
Werbung:
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
 
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 :(
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben