Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
CSS Problem mit Wrapper
zurück: Grafik relativ in einem DIV positionieren geht nicht weiter: CSS menü unterschiedlich groß Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Antwort Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
dibuslaa
Gast


Verfasst am:
29. März 2012, 09:44
Rufname:

CSS Problem mit Wrapper - CSS Problem mit Wrapper

Nach oben
       

Hallo Zusammen

Ich hoffe ihr könnt mir da weiterhelfen.

Habe ein Problem mit meinem CSS script, der "wrap" ist immer 100% und der footer soll am unteren rand kleben, falls der content oder menu zuwenig text hat.
html:
Code:
<div id="wrap">
   <div id="header">HEADER</div>
   <div id="main">
      <div id="menu">menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br></div>
      <div id="content">content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br></div>
   </div>
</div>
<div id="footer">
footer
</div>
css:
Code:
html, body {height: 100%;}

#wrap {
   height: 100%;
width: 970px;
background-color:black;
margin: auto;
}

#main {
   padding-bottom:133px;
   background-color:green;
   width: 970px;
   margin: auto;
   overflow:auto;
}  /* must be same height as the footer */

#footer {position: relative;
   margin-top: -180px; /* negative value of footer height */
   height: 180px;
   background-color:grey;
   clear:both;
   width: 970px;
   margin: auto;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

#header {
width:100%;
height:100px;
background-color:yellow;
}

#menu {
float:left;
width:400px;
height:400px;
background-color:red;
}

#content {
float:left;
width:400px;
height:400px;
back

(Code editiert von womaninweb)
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
29. März 2012, 10:47
Rufname:
Wohnort: Aachen


AW: CSS Problem mit Wrapper - AW: CSS Problem mit Wrapper

Nach oben
       

Hallo dibuslaa,

als erstes: dein #content ist nicht korrekt geschlossen. Was den #footer betrifft, so solltest du die margin-Angaben in einer Anweisung schreiben. So, wie es jetzt aussieht überschreibst du mit der Angabe margin:auto die Angabe margin-top: -180px. Das CSS wird von oben nach unten interpretiert, insofern müsste es margin: -180px auto 0 auto; heißen. Die letzte margin-Angabe in #footer fällt dann natürlich weg.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - Slider-Effekt mit CSS 0 maninweb 6838 13. Feb 2009, 17:27
maninweb Tutorial - Slider-Effekt mit CSS
Keine neuen Beiträge HTML & CSS Forum: CSS Browser Compatibility Problem 1 frosenow 2244 19. Jul 2012, 09:30
PeterKarrenberger CSS Browser Compatibility Problem
Keine neuen Beiträge HTML & CSS Forum: CSS/HTML: Leere Fläche unterhalb der Tabellen 2 muhmaff 1739 26. Jun 2012, 18:25
muhmaff CSS/HTML: Leere Fläche unterhalb der Tabellen
Keine neuen Beiträge HTML & CSS Forum: CSS Formatierung 4 MonaLisa73 1206 24. Jun 2012, 21:08
MonaLisa73 CSS Formatierung
Keine neuen Beiträge HTML & CSS Forum: CSS menü unterschiedlich groß 14 Gast 1870 15. Apr 2012, 19:43
Gast CSS menü unterschiedlich groß
Keine neuen Beiträge HTML & CSS Forum: Bildgröße in CSS ausgliedern 1 Gast 1179 05. Okt 2011, 12:06
womaninweb Bildgröße in CSS ausgliedern
Keine neuen Beiträge HTML & CSS Forum: CSS: ul horizontal im elternelement zentrieren 5 losgehts 2324 18. März 2011, 10:57
losgehts CSS: ul horizontal im elternelement zentrieren
Keine neuen Beiträge HTML & CSS Forum: CSS urheberrechtlich schützbar? 2 HermanZ 1813 01. Feb 2011, 11:59
HermanZ CSS urheberrechtlich schützbar?
Keine neuen Beiträge HTML & CSS Forum: .css formatvorlage für 3 internetseiten verwenden 5 onurk 1484 28. Jan 2011, 20:47
MartinPent .css formatvorlage für 3 internetseiten verwenden
Keine neuen Beiträge MS Expression Web Forum: Formatieren ohne CSS 5 schreibi 3887 01. Apr 2010, 09:49
Gast Formatieren ohne CSS
Keine neuen Beiträge HTML & CSS Forum: CSS nur auf einem Client ausfuehren lassen 2 Brettvormkopp 863 12. Jun 2009, 08:27
Brettvormkopp CSS nur auf einem Client ausfuehren lassen
Keine neuen Beiträge MS Expression Web Forum: Navigation mit Css verbinden? 1 AnjaMoehle 1985 16. Nov 2008, 19:30
womaninweb Navigation mit Css verbinden?
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Word Serienbriefe