zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.04.2007, 16:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2006
Beiträge: 55
Dwarf befindet sich auf einem aufstrebenden Ast
Standard Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite

Hallo Forum,



ich versuche gerade eine eigentlich (?) simple Aufgabe. Ich möchte am unteren Browserrand etwas Gras positionieren. Der Div mit dem Gras soll also immer am unteren Ende des Fensters sitzen und sich über die volle Breite des Fensters ziehen.

An sich ok, nur sobalt der Inhalt mal größer als das Fenster ist, man also scrollen muss, gehen die Probleme los. Der Div ist dann mal nicht breit genug oder sitzt in der Höhe falsch.

Wie muss man das angehen?
Hier mein Versuch:

PHP-Code:
html{
    
position:absolute;
}

#gras{
    
position:absolute;
    
bottom:-52px;
    
left:0;
    
height:46px;
    
width:100%;
    
background:url(../images/gras.gifrepeat-x;


Das lässt sich doch irgendwie umsetzen, oder?

Vielen Dank für jede Hilfe!!



Gruß,
Sascha
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.04.2007, 16:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html

Stichwort "Footer Stick Alt"

Robin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.06.2007, 11:33
Neuer Benutzer
neuer user
 
Registriert seit: 23.03.2007
Beiträge: 8
wiseguy befindet sich auf einem aufstrebenden Ast
Standard

Hallo, hab das gleiche Problem. Hab mir diese Seite angeschaut und versucht zu verstehn...

Aber ich seh irgendwie keine Angabe, die mir diese Formatierung des footer-Divs ermöglicht, obwohl es auf der Seite ja richtig ausschaut.

Es soll ja so sein: Wenn der Text kürzer als die Höhe des Browserfensters ist, dann soll das DIV am untersten Rand des Browserfensters stehen. Ist der Text aber länger und muss folglich auf der Seite gescrollt werden, dann soll das footer-Div unter dem Text angezeigt werden (also erst muss man halt scrollen und am untersten Rand, wenn der Text zuende ist, ist dann der footer.

Die Angabe des footer Divs aus oben genannter Beispielseite lautet ja:
Code:
#footer
{
	width: 710px;
	margin-left: 25px;
	padding-bottom: 1.5em; /* ich dachte erst, dass hier ists... aber wars nicht */
	background-color: #003366;
	font-size: 85%;
	color: #A6B8CA;
	text-align: center;
	line-height: 1.5em;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 12.06.2007, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Die für das Prinzip relevanten CSS-Angaben stehen im Styleelement des von dir verlinkten Beispiels.
Die Erklärung zu FooterStickAlt ist auch in den FAQ verlinkt.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.06.2007, 16:54
Neuer Benutzer
neuer user
 
Registriert seit: 23.03.2007
Beiträge: 8
wiseguy befindet sich auf einem aufstrebenden Ast
Standard

Ich bekomms nicht hin.

Die Seite: bibelgemeinde-fulda.de

Ich hab alles mögliche ausprobiert - so wies auf der Seite stand.

Mein non-footer heißt website und der footer heißt footer.
Derzeit steht im CSS:
Code:
html { height: 100%; }
body { height: 100%; }

#website { position: relative; min-height: 100%; }
* html #website { height: 100%; }

#footer { position: relative; margin-top: -30px; height: 30px; }
der html-code dazu:
Code:
...
<div id="website">
    <!-- Inhalt der Webseite -->
    ...
</div>

<div id="footer">
    <!-- Die Footer Angaben -->
    ....
</div>
...
Bei mir ist der Footer genau grade nicht mehr auf der Webseite zu sehen; Man muss also erst scrollen um den sehen zu können. Wenn der Inhalt der Webseite länger ist, dann ist alles wie gewünscht.

Kann mir jemand sagen, was ich falsch mache bzw. was ich ändern muss, damits so ist, wie ichs haben will?
Mit Zitat antworten
  #6 (permalink)  
Alt 12.06.2007, 16:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Auf der Seite hat der Footer margin-bottom
Mit Zitat antworten
  #7 (permalink)  
Alt 12.06.2007, 17:51
Neuer Benutzer
neuer user
 
Registriert seit: 23.03.2007
Beiträge: 8
wiseguy befindet sich auf einem aufstrebenden Ast
Standard

okay, jetzt scheints fast schon zu klappen.

Ein Problem hab ich aber noch: Der Footer verdeckt einen kleinen Teil des unteren Bereichs des Hauptinhalt (des "website"-DIVs).

Und zwar immer dann, wenn ich das Browserfenster in der Höhe weit genug verkleinere.

Woran liegt das? Warscheinlich kommt das ja durch das "margin-top: -??px".
Aber wenn ich das weg lasse, hab ich das Problem von vorhin...
Mit Zitat antworten
  #8 (permalink)  
Alt 12.06.2007, 18:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von themaninblue
For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content.
Nachzulesen bei der bereits bekannten Erklärung zu footerStickAlt.
Mit Zitat antworten
  #9 (permalink)  
Alt 12.06.2007, 18:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von wiseguy Beitrag anzeigen
Warscheinlich kommt das ja durch das "margin-top: -??px".
So sieht's aus Gib #content oder #content2 (eines von beiden ist übrigens überflüssig) passendes padding-bottom.

Und validiere auch mal.

EDIT: zu langsam
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.06.2007, 18:15
Neuer Benutzer
neuer user
 
Registriert seit: 23.03.2007
Beiträge: 8
wiseguy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
eines von beiden ist übrigens überflüssig
Das ist für einen anderen Skin aber notwendig
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div mit fixem Abstand und variabler Breite tc-burgi CSS 0 28.08.2010 17:33
Header entfernen tripple CSS 17 15.06.2010 16:41
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12
Breite und overflow bei DIV AuthanRam CSS 5 12.01.2008 00:01
html tabelle in div steht im firefox rechts neben div Holger (HMR) CSS 2 08.01.2005 19:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:30 Uhr.