Antworten auf deine Fragen:
Neues Thema erstellen

CSS Prozentangabe

Refus

aka Noisy

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.
 

Refus

aka Noisy

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

undefined

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

aka Noisy

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.
 

Refus

aka Noisy


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 :'(
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

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

aka Noisy

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.
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

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:
 
Zuletzt bearbeitet:

Refus

aka Noisy

AW: CSS Prozentangabe

Hmm ok, das macht Sinn :D

Danke werds mir mal zurecht basteln. Daran hab ich natürlich mal wieder nicht gedacht in meinem DIV-Wahn.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.485
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben