tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
8
ZUGRIFFE
450
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 03.01.12 12:06 #1
    akali akali ist offline Mitglied
    Registriert seit
    May 2011
    Beiträge
    14
    Hi Community,

    ich habe ein kleines aber nerviges Problem:

    ich möchte einen "wrapper" in einem "wrapper" via div machen.
    der sinn ist es, dass der innere schmaler ist als der äußere und ich dadurch einen andersfarbigen rand um den inneren wrapper legen kann.

    mein code

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    #outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
 
#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}


    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>website</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
    <div id="outerwrapper">
        
        
                <div id="innerwrapper">
    </div>
        
        
    </div>
 
    
</body>
 
</html>

    wieso funktioniert dass nicht so wie ich es mir dneke ?


    cheers akali
     
    Zitieren Zitieren
  2. 03.01.12 12:36 #2
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Du gibst Höhe und Breite jeweils prozentual an. Diese Werte haben aber keinen Bezug, da die umliegenden Elemente body und html keine Höhe und Breite zugewiesen bekommen haben. Die Breite sollte bei Blockelementen wie html und body ohnehin schon 100% sein. Ergänze mal

    Code :
    1

    html, body { height: 100%; }

    Dann sollten deine beiden <div>'s auch den ganzen Viewport ausfüllen.
     
    Zitieren Zitieren
  3. 03.01.12 12:52 #3
    akali akali ist offline Mitglied
    Registriert seit
    May 2011
    Beiträge
    14
    oh, tut mir leid habe das html und body css vergessen zu kopieren...

    das hatte ich schon mit den 100% im body...
    nun geht es so aber auch nicht!

    nun die komplette css:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    html,body
{
    background: #cdcdcd;
    margin: 0;
    padding: 0;
    height: 100%;
}
 
#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
 
#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
     
    Zitieren Zitieren
  4. 03.01.12 13:09 #4
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Ah, dein Problem ist glaube ich ein ganz anderes.

    Setz mal #outerwrapper auf "height: 100%;". Dann vererbt sich die Höhe auch an #innerwrapper. Es nimmt dann 100% der Höhe ein.

    Jetzt musst Du "nur" noch oben und unten den Abstand des #innerwrapper setzen. Das ginge z.B. über prozentuale Angaben für die Außenabstände von #innerwrapper für oben und unten.
     
    Zitieren Zitieren
  5. 03.01.12 13:35 #5
    akali akali ist offline Mitglied
    Registriert seit
    May 2011
    Beiträge
    14
    hmm, es funktioniert immer noch nicht !
    ich habe es jetzt so gemacht :

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    html,body
{
    background: #cdcdcd;
    margin: 0;
    padding: 0;
    height: 100%;
}
 
#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
 
#innerwrapper {
background-color: #000000;
margin: 0 5%;
overflow: hidden !important;
}

    könntest du mir das css für den innerwrapper geben ?


    edit:
    es soll am ende genau so hoch sein wie der outerwrapper aber ein bisschen schmaler , das habe ich jetzt mit margin 0 5% versucht zu realisieren

    edit2:
    wenn ich beim #innerwrapper die height auf z.b. 100px setze dann wird es angezeigt! aber bei % nicht...
    Geändert von akali (03.01.12 um 13:50 Uhr)
     
    Zitieren Zitieren
  6. 03.01.12 14:26 #6
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Code :
    1

    margin: 5% auto;

    wäre der richtige Wert denke ich. Beachte die Reihenfolge der 4 Parameter für margin:
    http://de.selfhtml.org/css/eigenscha...and.htm#margin

    Lass ggfs. auch min-height bei #outerwrapper weg. Ich habe das mit Firebug getestet und damit Erfolg gehabt.
     
    Zitieren Zitieren
  7. 03.01.12 14:43 #7
    akali akali ist offline Mitglied
    Registriert seit
    May 2011
    Beiträge
    14
    also,

    ich wäre dir sehr dankbar wenn du mir die css des innerwrapper komplett postest.
    Ich weiß nicht ob du was durcheinander gebracht hast oder ich komplett dumm bin :-D


    durch margin: 5% auto; wird doch der abstand von oben und unten im 5% verändert.
    ich möchte ja, dass es links und rechts jeweils 5% schmaler ist. und oben und unten über 100% geht sprich genau so hoch wie outerwrapper.

    ich habe nun in innerwrapper mal ein &nbsp eingetragen und nun bekomme ich eine zeile angezeigt, wo es von den außenabständen her passt, nur hat es noch keine 100% höhe******
    Ich wäre dir wirklich SEHR dankbar wenn du einfach das css vom innerwrapper posten könntest...

    cheers
     
    Zitieren Zitieren
  8. 03.01.12 15:58 #8
    akali akali ist offline Mitglied
    Registriert seit
    May 2011
    Beiträge
    14
    vielleicht ist es anschualicher wenn man es vor seinen augen hat.

    http://www.christlieb.eu/ct

    und um es einfach auszudrücken, dass weiße soll bis nach ganz unten gehen :-D

    Ich hoffe jemand weiß eine lösung.

    cheers eure akali
     
    Zitieren Zitieren
  9. 03.01.12 18:33 #9
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Bei deinem Link musste ich mit Firebug nur #outerwrapper von

    Code :
    1

    min-height: 100%;

    auf

    Code :
    1

    height: 100%;

    ändern, wie oben schon geschrieben.

    Den Außenabstand von #innerwrapper dann noch anzupassen, so dass Ränder entstehen ist jedoch dann nicht mehr wirklich möglich. Wenn Du statt dessen in #outerwrapper noch

    Code :
    1

    padding: 2% 0;

    ergänzt, sollte es passen.
     
    Zitieren Zitieren
« pseudoklasse :after auch außerhalb des headers | Div an größe des inneren Divs anpassen »

Ähnliche Themen

  1. C++ Wrapper für MFC
    Von thekiller im Forum C/C++
    Antworten: 1
    Letzter Beitrag: 23.11.11, 23:04
  2. Joomla Wrapper
    Von bauchinj im Forum Content Management Systeme (CMS)
    Antworten: 1
    Letzter Beitrag: 23.08.10, 08:38
  3. Supertoller Wrapper für Lua in PHP
    Von multimolti im Forum PHP
    Antworten: 6
    Letzter Beitrag: 28.06.10, 10:51
  4. COM-dll Wrapper
    Von meisteryoda im Forum Java
    Antworten: 1
    Letzter Beitrag: 17.05.08, 11:19
  5. C-API Wrapper
    Von Helpseaker im Forum C/C++
    Antworten: 1
    Letzter Beitrag: 07.02.07, 07:35