CSS Prozentangabe

Refus · 26.09.2009

So mal wieder ein kleines Problem: Die blaue Box soll sich bis ganz unten Strecken.

Problemseite

height: 100% funktioniert nicht, da dem Eltern-Element keine Höhe zugewiesen wird und sich die 100% damit in auto umwandeln. Die Höhe des Elternelement ist aber immer variable jenachdem wie lang der Eintrag im post_content ist.
post_content und post_user verhalten sich aber schon mal korrekt zu einander.
post_user direkt einen blauen Hintergrund geben funktioniert leider auch nicht, da nochmal ein weißer Rahmen drum rum muss.

Wenn nicht ganz klar ist wie das Ergebnis aussehen soll geb ich gerne nochmal die Vorlage raus.

cebito · 26.09.2009

AW: CSS Prozentangabe

Mach ein Hintergrundbild für .post_container mit repeat:y und fertig.

Refus · 26.09.2009

AW: CSS Prozentangabe

Und dann? das wirkt sich ja nicht auf .post_user aus.

Du kannst gerne jetzt mal gucken. Hab es ein bisschen erweitert.
Die beiden divs inner sollten immer die selbe Höhe haben, also voneinander abhängen bzw. einfach die Höhe ihres Eltern-Elements übernehmen, damit sie eben gleichlang sind. Aufgrund der äußeren Umrandung der weißen Linie geht das mit dem Hintergrundbild nicht, oder wich wüsste nicht wie.

cebito · 26.09.2009

AW: CSS Prozentangabe

Mach dein Bild 960px breit, 1px hoch, links blau, rechts in dem grauton, setz es als Hintergrund für .post_container:

Code:

.post_container {
width: 960px;
background-image:url(hintergrundbild.png);
background-repeat:repeat-y;
}

Refus · 26.09.2009

AW: CSS Prozentangabe

Wäre ein Lösungansatz, wenn die 1px Weiße Umrandung nicht wäre

Ich hab es mal gemacht, damit du siehst was dabei rauskommt: Test
Ich denke du sieht jetzt woran es liegt. Danke trotzdem.

HansHansa · 26.09.2009

AW: CSS Prozentangabe

Warum versuchen alle die Welt neu zu erfinden.

Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

http://www.stichpunkt.de/css/bereiche.html

Refus · 26.09.2009

HansHansa schrieb:
Warum versuchen alle die Welt neu zu erfinden.

Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

Stichpunkt CSS: Layout ohne Tabellen

Hey, warum kochen wenns der Italiener um die Ecke auch mach und das ohne das ich was mache?
Wahnsinn, danke für dein kompetente Antwort auf meine Frage.

Ich will verstehn, mein Wissen erweitern und anwenden können und das ohne YAML. Brauch ich nicht ist zu aufgeblasen, bietet mir nicht das was ich brauche. Ich brauche kein Framework ich brauche ein Lösung für mein Problem.

edit// Den zweiten Link lass ich mal unkommentiert, da er einfach 0 auf das oben beschriebene Problem eingeht.

Da taucht auch schon ein neues Problem zusätzlich auf, das mich grade bisschen verrückt macht.

Test

Wo zur Hölle kommt die weiße Lücke über <h2> her? Ich werd noch wahnsinnig :'(

cebito · 26.09.2009

AW: CSS Prozentangabe

Meiner Meinung nach machst du es dir viel zu kompliziert, hier mal eine von vielen möglichen Lösungen:

HTML:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">

<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Test</title>
    
<style type="text/css" media="screen">

#post_container {
width: 960px;
font-family: verdana;
border:1px solid #999999;
}
#whiteborder {
width: 956px;
margin:1px;
border:1px solid #FFFFFF;
background-color:#F5F5F5;
background-image:url(bg.jpg);
background-repeat:repeat-y;
}
#post_user {
width:  146px;
padding:9px;
float:left;
}
#post_content {
margin-left:164px;
width:776px;
padding:9px;
}
h2 {
color: #272727;
font-size: 16px;
}
.separator {
width: 776px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #fbfbfb;
border-left:  0px;
margin: 0 auto 10px auto;
}
.clearer {
clear:left;
}
</style>
</head>
<body>

<div id="post_container">
<div id="whiteborder">
    <div id="post_user">
            <p>wasd</p>
            <p>wasd</p>
            <p>wasd</p>
    </div>

    
    <div id="post_content">
            <h2>Headline des Posts</h2>
            <hr class="separator" />
            <p>tasdf</p>
            <p>tasdf</p>
            <p>tasdf</p>

            <p>tasdf</p>
            <p>tasdf</p>
            <p>tasdf</p>        
            <p>tasdf</p>                
            <hr class="separator" />
            <div class="clearer"></div>
    </div>
</div>
</div>


</body>
</html>

und noch das passende Hintergrundbild dazu:

Refus · 26.09.2009

AW: CSS Prozentangabe

Manchmal liegt es in der Natur der Sache, das die Dinge nicht so einfach sind wie sie scheinen. Ich geb dir mal einen Screenshot in Großerform, wo du erkennst warum meine Lösung so kompliziert ist und welche Auswirkung das hat.

http://files.trashware.eu/css_test/screen.jpg

Oben: Links eine blaue Umrandung, die rechts von einer grauen Abgelöst wird.
Unten: Durchgehend graue Umrandung.

Vielen danke trotzdem für deine Mühe, leider hilft es mir nicht weiter.

cebito · 26.09.2009

AW: CSS Prozentangabe

Auch das Problem lässt sich viel einfacher lösen...

HTML:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">

<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Test</title>
    
<style type="text/css" media="screen">
#oben {
width: 960px;
height:2px;
background-image:url(oben.jpg);
}
#post_container {
width: 960px;
font-family: verdana;
background-image:url(content.jpg);
background-repeat:repeat-y;
}
#unten {
width: 960px;
height:2px;
background-image:url(unten.jpg);
}
#post_user {
width:  146px;
padding:9px;
float:left;
}
#post_content {
margin-left:164px;
width:776px;
padding:9px;
}
h2 {
color: #272727;
font-size: 16px;
}
.separator {
width: 776px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #fbfbfb;
border-left:  0px;
margin: 0 auto 10px auto;
}
.clearer {
clear:left;
}
</style>
</head>
<body>
<div id="oben"></div>
<div id="post_container">
    <div id="post_user">
            <p>wasd</p>
            <p>wasd</p>
            <p>wasd</p>
    </div>

    
    <div id="post_content">
            <h2>Headline des Posts</h2>
            <hr class="separator" />
            <p>tasdf</p>
            <p>tasdf</p>
            <p>tasdf</p>
                
            <hr class="separator" />
            <div class="clearer"></div>
    </div>
</div>
<div id="unten"></div>
</body>
</html>

und die Bilder:

Refus · 26.09.2009

AW: CSS Prozentangabe

Hmm ok, das macht Sinn

Danke werds mir mal zurecht basteln. Daran hab ich natürlich mal wieder nicht gedacht in meinem DIV-Wahn.

cebito · 26.09.2009

AW: CSS Prozentangabe

Refus schrieb:
Wenn du mir verrätst wie ich das einfacher hin bekomme bin ich dir doch sehr dankbar, denn irgendwie bekomme ichs nicht einfacher zusammengebaut.

Hab ich grad (per Edit) gemacht... siehe einen Post über deinem