zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVS zentrieren + 100% Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.04.2007, 11:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard DIVS zentrieren + 100% Höhe

Hallo

also erstmal muss ich sagen das ich wirklich schon sauviel gegoogled hab und auch seiten zu dem thema gefunden hab aber die codes die dort stehen zeigen irgendwie nicht die gewünschte wirkung

also ich habe im großen und ganzen 3 divs
ein div oben als header
darunter 2 divs nebeneinander (links menü, rechts inhalt)

probleme
1. das gesamte konstrukt soll 100% seitenhöhe haben
im firefox hat es aber 100% + header und im IE vergrößern sich die unteren divs garnicht

2. das gesamte konstrukt soll zentriert werden
im IE wird der header zwar zentriert aber der rest nicht, im firefox wird garnix zentriert

hier der html code
Code:
<div id="wrap">
<div id="head">
Hier is der Header
</div>

<div id="menu">
        <p>
                 <ul>
                          <li><a href="index.php">Startseite</a></li>
                          <li><a href="index.php">Fitness</a></li>
                          <li><a href="index.php">Krafttraining</a></li>
                          <li><a href="index.php">Kurse</a></li>
                          <li><a href="index.php">Boxen</a></li>
                          <li><a href="index.php">Kick- + Thaiboxen</a></li>
                          <li><a href="index.php">Realfight</a></li>
                          <li><a href="index.php">Personal Training</a></li>
                          <li><a href="index.php">Senior Fit 50+</a></li>
                          <li><a href="index.php">Heavy Kids</a></li>
                          <li><a href="index.php">Kontakt</a></li>
                          <li><a href="index.php">Impressum</a></li>
                 </ul>
            </p>
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
hier die css datei
Code:
*{
font-size: 100%;
color: #FFFFFF;
}
body{
text-align: center;
height: 100%;
padding 0;
margin: 0px auto;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
}

wrap{
text-align: left;
width: 900;
}

#head{
width: 900px;
height: 178px;
background-image: url(images/header.gif);
}

#content{
float:left;
width: 700px;
height: 100%;
padding-left: 30px;
padding-right: 30px;
background-image: url(images/right.gif);
}
html>body #content {
width: 640px;
}

#menu{
float:left;
width: 200px;
height: 100%;
padding-left: 25;
padding-right: 25;
background-image: url(images/left.gif);
}
html>body #menu {
width: 150px;
}
ul{
text-align: left;
}
li{
font-weight: bold;
list-style: square;
}

a{
text-decoration:none;
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.04.2007, 11:06
Benutzerbild von ViktorR
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.11.2006
Ort: Nürnberg
Beiträge: 122
ViktorR befindet sich auf einem aufstrebenden Ast
Standard

Ohne mich jetzt genauer eingelesen zu haben, würde ich es mit einem div probieren der die drei anderen Bereiche einschließt. Dem gibst du 100%Höhe und zentrierst ihn mit margin: auto;
__________________
http://www.studio-nineteen.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.04.2007, 11:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard

so ein div is ja schon eingebaut (wrap)

hab jetzt mal das getestet was du gesagt hast

wrap{
margin: auto;
height: 100%;
text-align: left;
width: 900;
}

geht aber leider auch nicht.

edit: uuuppps hab die raute vorm wrap vergessen! mal eben schaun
edit2: ok super das zentrieren klappt jetzt aber es sind immernoch mehr als 100% höhe
Mit Zitat antworten
  #4 (permalink)  
Alt 06.04.2007, 16:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard

also es ist vl etwas unverständlich geworden:

ich möchte das alle divs zusammen (header fixe größe + die 2 darunter flexibeL) 100% seitenhöhe einnehmen.

wenn ich aber 100% einstelle bei den unteren beiden wird das zu hoch weil die höhe vom header nich abgezogen wird. was mach ich da?
Mit Zitat antworten
  #5 (permalink)  
Alt 06.04.2007, 21:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
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 rady Beitrag anzeigen
was mach ich da?
"faux columns" anwenden. Siehe FAQ.
Dort findest du auch Informationen zu 100%-Höhe.

Dein Code oben ist weder valide noch vollständig.
Lies bitte: http://xhtmlforum.de/40080-fuer-frag...twortende.html
Validatoren:
The W3C Markup Validation Service
The W3C CSS Validation Service
Mit Zitat antworten
  #6 (permalink)  
Alt 08.04.2007, 10:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard

hm bei faux collums steht was, was ich garnich brauche
"F: Wie kann ein Container die Höhe eines anderen Containers annehmen, der je nach Inhalt verschiedene Höhen hat?"

steht ja nu nix von 100% höhe.... und die beiden beispielseiten bei 100% höhe raff ich nicht ganz... hab mal versucht son footer einzubaun aber funktioniert hat das ganze leider nich
Mit Zitat antworten
  #7 (permalink)  
Alt 08.04.2007, 10:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.04.2007
Beiträge: 311
ct2oo4 befindet sich auf einem aufstrebenden Ast
Standard

Hi,
Also du erstellt zunächst ein großes div, das alles umfasst (height:100%;).
Dann erstellt du ein weiteres div, für deinen header, dabei schreibst du aber height:???px mit rein (höhe vom bild). Als nächstes erstellst du darunter einfach zwei weitere divs mit float:left; dabei schreibst du bei height wieder 100% und fertig.

MfG
__________________

Geändert von ct2oo4 (08.04.2007 um 11:04 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.04.2007, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard

hallo danke für deine antwort.

das vergrößert die Seite zwar, aber ZU groß!
das ganze hat dann ne höhe von 100% PLUS headerhöhe

hier nochmal der code.. wrap umfasst alles

Code:
#wrap{
margin: auto;
text-align: left;
height:100%;
width: 900;
}

#head{
width: 900px;
height: 178px;
background-image: url(images/header.gif);
}

#content{
height: 100%;
float:left;
width: 700px;
padding-left: 30px;
padding-right: 30px;
background-image: url(images/right.gif);
}
html>body #content {
width: 640px;
}

#menu{
height: 100%;
float:left;
width: 200px;
padding-left: 25;
padding-right: 25;
background-image: url(images/left.gif);
}
html>body #menu {
width: 150px;
}
Mit Zitat antworten
  #9 (permalink)  
Alt 08.04.2007, 12:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
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:
hm bei faux collums steht was, was ich garnich brauche
Doch, du brauchst faux columns. Du willst gleich lange Spalten.

Zitat:
steht ja nu nix von 100% höhe....
Bitte lies in den FAQ weiter. Es gibt dort sehr viel mehr Einträge als nur den einen.

Zitat:
Zitat von rady Beitrag anzeigen
das ganze hat dann ne höhe von 100% PLUS headerhöhe
Genau. Es geht so nicht. Das steht auch in den FAQ. Und dort befindet sich auch ein Beispiel für deinen Layoutwunsch.
Deine Inhalte brauchen keine 100%-Höhe. Es genügt, wenn der umgebende Container die 100% Mindesthöhe (siehe FAQ!) hat und das Hintergrundbild aus "faux columns" bekommt.

Dein Codebeispiel ist noch immer nur ein Schnipsel und nicht valide!

Geändert von fricca (08.04.2007 um 12:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.04.2007, 12:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2007
Beiträge: 7
rady befindet sich auf einem aufstrebenden Ast
Standard

ahh super geht ja doch einfacher als ich dachte mit den faux colums!
funktioniert jetzt!

danke
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
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
div mit u. ohne flexibler Höhe kombinieren und horizontal zentrieren heftpflaster CSS 14 30.08.2009 17:31
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 01:25
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 16:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:03 Uhr.