zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box in Box und width 100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.11.2010, 01:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.11.2010
Beiträge: 10
tylerdurden befindet sich auf einem aufstrebenden Ast
Standard Box in Box und width 100%

Hi, bin neu in der CSS Materie und stolpere ständig über Dinge, die von der Logik her so eigentlich nicht sein dürften. Aktuelles Beispiel:

Ich möchte in eine Box 1 eine weitere Box 2 setzen, wobei Box 1 automatisch seine Höhe anpasst, wenn Box 2 größer wird.

css:
#box1 {
margin: 5px 0 0 0;
padding: 20px 30px 20px 30px;
height: 100%;
background-color: #FFFFFF;
text-align: left;
}
#box1 {
float:right;
padding: 30px;
background-color:#DDCFBB;
}

html:
<div id="box1">
<div id="box2">
haha<br />haha<br /><br /><br />
</div>
</div>

Das Ergebnis im FF, Box1 wächst nicht mit und Box2 verschiebt alles
ff.JPG

Und im IE alles richtig komischerweise
ie.JPG


Verstehs echt nich mehr, Hilfe!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.11.2010, 01:41
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Die Codeschnipsel sind doch bestimmt falsch zusammenkopiert.
Zeige besser einen Link.
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.11.2010, 01:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.11.2010
Beiträge: 10
tylerdurden befindet sich auf einem aufstrebenden Ast
Standard

was meinst du mit falsch zusammenkopiert?
ich hab das ding von grund auf nun schon zum dritten mal neu angefangen.
was solls, hier die url
agsedv
Mit Zitat antworten
  #4 (permalink)  
Alt 02.11.2010, 02:03
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

In deinem ersten Post hast du #box1 mit #box1 überschrieben.
Auf deiner Seite ist in #mitte die gefloatete #box1. #mitte wächst nur im IE<8 mit.
Siehe css-faq2
__________________
MfG
Jens
Mit Zitat antworten
  #5 (permalink)  
Alt 02.11.2010, 02:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.11.2010
Beiträge: 10
tylerdurden befindet sich auf einem aufstrebenden Ast
Standard

da hatte ich mich wohl verschrieben oben, sorry.

bedeutet das also ich muss dieser floating box explizite größenangaben verpassen? aus dem clearing werde ich auf die schnelle nicht schlau.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.11.2010, 03:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.11.2010
Beiträge: 10
tylerdurden befindet sich auf einem aufstrebenden Ast
Standard

ok, so weit verstanden und danke erstmal!

habs geändert und nun reagiert zumindest meine fußzeile auf die höhe der "floating box", weil es ja das nachfolgende element ist (wie du schon beschrieben hast).

leider ändert das noch nichts für die box, in der sich die floating box gefindet, denn diese passt ihre höhe nach wie vor nicht an. was kann man da machen?
Mit Zitat antworten
  #7 (permalink)  
Alt 02.11.2010, 08:14
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

height:100% bleiben wirkungslos, weil der Vorfahre keine definierte Höhe hat.

div#mitte schließen den Float erst ein, wenn entweder div#mitte auch floatet, oder z.B. direkt nach dem Ende von div#box1 gecleart wird.
Das geht mit einer < hr class="clear" /> und entsprechender Formatierung.

Du hast Float/clear leider noch nicht verstanden. Da solltest du dich belesen..
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 03.11.2010, 01:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.11.2010
Beiträge: 10
tylerdurden befindet sich auf einem aufstrebenden Ast
Standard

besten dank hubspe, so klappts!

es wäre ja grundsätzlich kein problem gewesen, wenn das die floating box nich in nem 100% div gehangen hätte.

die idee mit der hr zum beispiel wäre mir nie gekommen.
ich setze also die hr in weiß ans ende vom #mitte div und direkt nach dem div der box1. läuft perfekt.

merkwürdig nur, dass man sich solcher tricks bedienen muss, oder is das normal?
warum liest man nichts darüber, denn so speziell kann mein fall ja nu nich sein.
Mit Zitat antworten
  #9 (permalink)  
Alt 03.11.2010, 09:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von tylerdurden Beitrag anzeigen
merkwürdig nur, dass man sich solcher tricks bedienen muss, oder is das normal?
Ja, das ist normal.
Es gibt viele Dinge in CSS, die man intuitiv nicht verstehen kann. Deshalb funktioniert auch "learning by doing" nicht. Man muss sich hinsetzen, lesen und lernen. Einen Link auf Little Boxes hast du ja schon bekommen. Wenn du damit durch bist, hast du dir die Grundlagen erarbeitet.

Zitat:
warum liest man nichts darüber, denn so speziell kann mein fall ja nu nich sein.
Nö, dein Fall ist nicht speziell. Er ist sogar so häufig, dass er in den [FAQ]FAQ[/FAQ] behandelt wird.

Übrigens: Was du oben für die "richtige" Darstellung im IE (< 8 ) gehalten hast, ist ein Bug. Das Sonderverhalten des IE ist hasLayout geschuldet, ausgelöst durch die ansonsten wirkungslose height-Angabe.

Geändert von fricca (03.11.2010 um 09:57 Uhr) Grund: Blöde Auto-Smilies.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:12 Uhr.