Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] Div mit maximaler ausdehnung aber nicht 100%

reox

Nicht mehr ganz neu hier

Ich hab folgendes Problem bei einer Webseite:
Die Seite ist so gegliedert:
<div class="wrapper">
<div class="w_header">
<div class="c_header">
<h1>
</h1>
</div>
<div class="c_primary">
<ul class="links primary-links">
</ul>
</div>
</div>
<div class="w_content">
</div>
</div>


Das CSS für den Header Wrapper:
.w_header{
height:51px;
width:100%;
border-top:1px solid white;
}

Das CSS für den linken Block:
.c_primary{
background-image:url(gfx/grafik_02.jpg);
background-repeat:no-repeat;
float:left;
width:668px;
height:51px;
color:white;
font-size:14px;
text-align:center;
line-height:51px;
}

Das CSS für den rechten Block
.c_header{
width:282px;
height:51px;
float:right;
background-image:url(gfx/grafik_03.jpg);
background-repeat:no-repeat;
color:white;
font-size:18px;
text-align:center;
}


Jetzt soll der c_primary aber nicht eine bestimmte breite haben, sondern die maximale ausdehnung, also im prinzip bildschirmgröße-282px. 100% geht da aber net, da dann wirklich 100% des bildschirms genommen wird... Wie geht das? Ich komme einfach auf keine gescheite Lösung...
 

M

MaedeG

Guest

AW: [CSS] Div mit maximaler ausdehnung aber nicht 100%

du könntest die breite ja 100% machen und sagen und dann ein margin-left:50px; setzen. dir fehlt noch ein clear:both; wegen dem float.
 

Herr_D

offline

AW: [CSS] Div mit maximaler ausdehnung aber nicht 100%

Gar keine Breite angeben... nimmt sich den Platz der übrig ist...


wenn du nur 2 Elemente hats, dann kannst du dir ein clear: schenken... nimm clear: right dann sollte es funzen (Reihenfolge der div beachten)



Code:
		<style type="text/css">
<!--
.w_header{
    height:51px;
    width:100%;
    border-top:1px solid white;
}


.c_primary{
    background-image:url(gfx/grafik_02.jpg);
    background-repeat:no-repeat;
    background-color:#444; /* kann wieder raus, war nur zum Testen */
    height:51px;
    color:white;
    font-size:14px;
    text-align:center;
    line-height:51px;
}


.c_header{
    width:282px;
    height:51px;
    float:right;
    background-image:url(gfx/grafik_03.jpg);
    background-repeat:no-repeat;
    color:white;
    font-size:18px;
    text-align:center;
}
-->
</style>

HTML:
<div class="wrapper">
        <div class="w_header">
                <div class="c_header">
                        <h1></h1></div>
                <div class="c_primary">
                        <ul class="links primary-links"></ul>
                </div>
                <div style="clear:both"></div>
        </div>
        <div class="w_content"></div>
</div>
 
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

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben