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

CSS vereinfachen / optimieren [100% height Problem]

B

befubo

Mitglied
Tach zusammen :D
Ich hätte da mal eine Frage zu meinem CSS...
Wenn ich jetzt ein Layout im CSS erstelle und z.B. sowas habe:
HTML: 
body {
background-image:url("http://glitzerpop.de/mh/background_002.png");
font-family:Trebuchet MS;
margin: 0px;
}

.head{
position: absolute;
margin-left: 35px;
width: 1000px;
height: 100px;
background-image:url("http://glitzerpop.de/mh/back.png");
}

.head_stripes{
position: absolute;
margin-left: 35px;
width: 1000px;
height: 100px;
background-image:url("http://www.glitzerpop.de/Glitza/daback.png");
z-index: 1;
}

.shadow_left{
position: absolute;
margin-left: 25px;
width: 10px;
height: 100px;
background-image:url("http://glitzerpop.de/mh/schattenlinks.png");
}

.shadow_right{
position: absolute;
margin-left: 1035px;
width: 10px;
height: 100px;
background-image:url("http://glitzerpop.de/mh/schattenrechts.png");
}

.nav_bar{
position: absolute;
top: 35px;
left: 15px;
height: 50px;
z-index: 2;
}

#nav_logo{
position: absolute;
height: 45px;
}

#nav_line{
position: absolute;
height: 45px;
left: 230px;
top: -3px;
}

#btn1{
position: absolute;
height: 45px;
left: 250px;
top: 10px;
}

#btn2{
position: absolute;
height: 45px;
left: 345px;
top: 10px;
}

Klappt ja grundsätzlich gut :D
http://befubo.ch/glitzerpop/love.php (Das ist eine Seite eines Bekannten, ich möchte da gerne am css etwas rumwerkeln)

Kann ich das jetzt nicht vereinfachen, dass ich nicht alle Buttons einzeln definieren muss? Grundsätzlich, könnte man den Code schöner schreiben?

Vielen Dank und liebe Grüsse
befubo
 
Werbung:
Also ich persönlich verwende ID's gar nicht in CSS, sondern nur für JS. Das macht aber jeder anders und über die verschiedenen Techniken/Methoden kann man Bücher drüber schreiben

Bei deinen Buttons bieten sich gut mehrere Klassen an. Ich versuche das Ganze immer schön abstrakt und gut wartbar zu gestalten.
Als Beispiel:
http://jsfiddle.net/a2r42/2/

Vor allem solltest aber nicht jedes Element absolut positionieren, sondern mit floats arbeiten. Da sparst du dir 'ne Menge Arbeit im Nachhinein.
 
Hmm, aber mit float kann ich doch die position nicht exakt bestimmen.
Weil die Buttons müssen um ein paar px runtergesetzt werden, dass es gut aussieht, wie kann ich das den mit float? Weil float setzt mir das element ja einfach an den endpunkt vom vorhergehenden...
 
Werbung:
Floaten musst du ja nur da, wo es auch Sinn macht. Ansonsten lässt du es weg.
Abstände bekommst du mit margin, padding, line-height usw.
 
EDIT2:
Ich hab jetzt folgendes:
HTML: 
html{
height: 100%;
}

body {
background-image:url("http://glitzerpop.de/mh/background_002.png");
font-family:Trebuchet MS;
margin: 0px;
height: 100%;
}

.content_main{
margin-left: 35px;
width: 950px;
min-height: 100%;
z-index: 2;
background-image:url("http://glitzerpop.de/mh/back.png");
}

.head{
margin-left: 35px;
margin-bottom: 0px;
width: 950px;
height: 80px;
background-image:url("http://glitzerpop.de/mh/back.png");
z-index: 3;
}

.head_stripes{
margin: opx;
width: 950px;
height: 80px;
background-image:url("http://www.glitzerpop.de/Glitza/daback.png");
z-index: 4;
}

.shadow_left{
position: fixed;
margin-left: 25px;
width: 10px;
min-height: 100%;
background-image:url("http://glitzerpop.de/mh/schattenlinks.png");
}

.shadow_right{
position: fixed;
margin-left: 985px;
width: 10px;
min-height: 100%;
background-image:url("http://glitzerpop.de/mh/schattenrechts.png");
}

.nav_bar{
top: 35px;
left: 15px;
height: 50px;
z-index: 2;
}

#nav_logo{
float: left;
margin-top: 15px;
height: 45px;
}

#nav_line{
float: left;
margin-left: 10px;
margin-top: 10px;
height: 45px;
}

#btn1{
float: left;
margin-left: 10px;
margin-top: 24px;
height: 45px;
}

#btn2{
float: left;
margin-left: 15px;
margin-top: 24px;
height: 45px;
}

.content{
margin-bottom: 80px;
float: left;
margin-left: 20px;
margin-top: 20px;
width: 600px;
z-index: 2;
background-color: #ffffff;
}

.footer{
margin-left: 35px;
margin-bottom: 0px;
width: 950px;
height: 80px;
background-image:url("http://glitzerpop.de/mh/back.png");
z-index: 3;
}

.footer_stripes{
margin: opx;
width: 950px;
height: 80px;
background-image:url("http://www.glitzerpop.de/Glitza/daback.png");
z-index: 4;
}

Immer noch für http://befubo.ch/glitzerpop/love.php

Jetzt möchte ich unten noch einen Footer machen, der über die ganze breite geht und dann soll das Content-Div Immer mind. so lange sein bis zu footer und wenns mehr text als Platz hat, soll sich das ganze nach unten strecken...
Daran sitze ich schon so lange (Jahre besser gesagt) und kriege es noch immer nicht hin -.-
 
Zuletzt bearbeitet:
Jetzt möchte ich unten noch einen Footer machen, der über die ganze breite geht und dann soll das Content-Div Immer mind. so lange sein bis zu footer und wenns mehr text als Platz hat, soll sich das ganze nach unten strecken...
Daran sitze ich schon so lange (Jahre besser gesagt) und kriege es noch immer nicht hin -.-
Zum Vergrößern anklicken....

Suche mal nach "sticky footer"
 
Werbung:
Also ich bin grade etwas ausgepowert...
Nochmal dass es sicher das aktuelle ist. Das ist mein CSS:
HTML: 
html{
height: 100%;
}

body {
background-image:url("http://glitzerpop.de/mh/background_002.png");
font-family:Trebuchet MS;
margin: 0px;
height: 100%;
}

.content_main{
margin-left: 35px;
width: 950px;
min-height: 100%;
z-index: 2;
background-image:url("http://glitzerpop.de/mh/back.png");
border: 3px solid #fff000;
}

.head{
margin-left: 35px;
margin-bottom: 0px;
width: 950px;
height: 80px;
background-image:url("http://glitzerpop.de/mh/back.png");
z-index: 3;
}

.head_stripes{
margin: opx;
width: 950px;
height: 80px;
background-image:url("http://www.glitzerpop.de/Glitza/daback.png");
z-index: 4;
}

.shadow_left{
position: fixed;
margin-left: 25px;
width: 10px;
min-height: 100%;
background-image:url("http://glitzerpop.de/mh/schattenlinks.png");
}

.shadow_right{
position: fixed;
margin-left: 985px;
width: 10px;
min-height: 100%;
background-image:url("http://glitzerpop.de/mh/schattenrechts.png");
}

.nav_bar{
top: 35px;
left: 15px;
height: 50px;
z-index: 2;
}

#nav_logo{
float: left;
margin-top: 15px;
height: 45px;
}

#nav_line{
float: left;
margin-left: 10px;
margin-top: 10px;
height: 45px;
}

#btn1{
float: left;
margin-left: 10px;
margin-top: 24px;
height: 45px;
}

#btn2{
float: left;
margin-left: 15px;
margin-top: 24px;
height: 45px;
}

.content{
margin-left: 20px;
margin-top: 20px;
width: 600px;
z-index: 2;
background-color: #ffffff;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px; /* the bottom margin is the negative value of the footer's height */
}

.push{
width: 950px;
height: 80px;
}

.footer{
margin-bottom: 0px;
width: 950px;
height: 80px;
background-image:url("http://glitzerpop.de/mh/back.png");
z-index: 3;
}

.footer_stripes{
margin: opx;
width: 950px;
height: 80px;
background-image:url("http://www.glitzerpop.de/Glitza/daback.png");
z-index: 4;
}

Das ist das HTML dazu:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
     
<html>
    <head>
        <title>GLITZERPOP // Das Musikmagazin</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div class="shadow_left">
        </div>
        <div class="shadow_right">
        </div>
            <div class="head">
                <div class="head_stripes">
                    <div class="nav_bar">
                        <div id="nav_logo">
                            <img src="http://glitzerpop.de/mh/logoversion2kl.png">
                        </div>
                        <div id="nav_line">
                            <img src="http://glitzerpop.de/mh/linie2.png">
                        </div>
                        <div id="btn1">
                            <a href="#"><img src="http://www.glitzerpop.de/Glitza/0102.png" alt="News" onmouseover="src='http://www.glitzerpop.de/Glitza/0101.png'" onmouseout="src='http://www.glitzerpop.de/Glitza/0102.png'" border="0"/></a>
                        </div>
                        <div id="btn2">
                            <a href="#"><img src="http://www.glitzerpop.de/Glitza/0202.png" alt="Forum" onmouseover="src='http://www.glitzerpop.de/Glitza/0201.png'" onmouseout="src='http://www.glitzerpop.de/Glitza/0202.png'" border="0" /></a>
                        </div>
                    </div>   
                </div>
            </div>
        <div class="content_main">
            <div class="content">
                Text text text<br>
                Text text text<br>
                Text text text<br>
                Text text text<br>
            </div>
            <div class="push">
            </div>
            <div class="footer">
                <div class="footer_stripes">
                </div>
            </div>
        </div>

    </body>
   
</html>

Jetzt sieht es so aus: http://befubo.ch/glitzerpop/love.php

Mein Ziel ist es jetzt, den content (weiss) bis an den footer zu ziehen, egal wie lange der Inhalt ist. Und falls der Inhalt über den Footer hinaus gehen würde, soll sich die Seite selber verlängern...
Aber ich kann mit heigh:100% / auto und allem anderen rumexperimentieren wie ich will, es klappt einfach nicht.
 
..Wenn ich in der Entwickler Umgebung jeweils die Position:relative raus nehme passiert leider eben so nichts.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben