Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [CSS] verhindern, dass DIV umbricht (https://www.delphipraxis.net/67912-%5Bcss%5D-verhindern-dass-div-umbricht.html)

Meflin 21. Apr 2006 18:18


[CSS] verhindern, dass DIV umbricht
 
Aloa!

Ich bastel gerade mal wieder an einer Webseite, die vom Prinzip her so aufgebaut ist (Design tabellenlos):
Code:
++++++++++++++++++++  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ DIV id=left     +  +  DIV id=main                                                         +
+ ################ +  +                                                                       +
+ #              # +  +                                                                       +
+ #  hier andere # +  +                                                                       +
+ #      divs   # +  +                                                                       +
+ ################ +  +                                                                       +
+                  +  +                                                                       +
+ ################ +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ #              # +  +                                                                       +
+ ################ +  +                                                                       +
+                  +  +                                                                       +
++++++++++++++++++++  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mein CSS dafür sieht wie folgt aus:
Code:
#left {
   margin: 10px;
   width: 180px;
   float: left;
}

#main {
   width: 787px;
   float: left;
   margin: 10px;
   margin-left: 0px;
   top: 0px;
   /*position: absolute;
   left: 200px;*/
}
Problem: wenn der Bildschirm zu klein ist, wird der main-Teil umgebrochen und unter dem Left Teil platziert, das will ich aber auf jeden Fall verhindern. wenn man in der main Klasse (ist das eine?) den auskommentierten Teil aktiviert, wird das auch erfolgreich verhindert, nur macht dann der IE (wie immer) wieder Probleme: er interpretiert den Abstand zwischen left und main Teil falsch, genauergesagt er klebt beides einfach nebeneinander ohne den margin von 10 zu beachten, während in allen anderen Browsern alles passt. Verpasse ich main ein extra left-margin stimmts zwar im IE, dafür ist der Abstand in allen anderen Browsern aber viel zu groß.

Es stellt sich also die Frage: was tun?


DGL-luke 21. Apr 2006 18:32

Re: [CSS] verhindern, dass DIV umbricht
 
einfach bei den width-angaben auf prozente gehen:


Code:
#left {
   margin: 5%;
   width: 20%;
   float: left;
}

#main {
   width: 75%;
   float: left;
   margin: 10px;
   margin-left: 0px;
   top: 0px;
   /*position: absolute;
   left: 200px;*/
}

Meflin 21. Apr 2006 19:25

Re: [CSS] verhindern, dass DIV umbricht
 
Das ist keine Lösung, die Bereiche sollen ja immer gleich groß sein und sich nicht dem Bildschirm anpassen...


S2B 21. Apr 2006 19:33

Re: [CSS] verhindern, dass DIV umbricht
 
float: left weg und margin-left rein. :wink:

Meflin 21. Apr 2006 19:51

Re: [CSS] verhindern, dass DIV umbricht
 
Zitat:

Zitat von S2B
float: left weg und margin-left rein. :wink:

hilft auch nix, dann wird das ganze beim verkleinerten bildschirm immernoch umgebrochen (wenn ich das float bei #left drin lasse). Nimm ich das float bei #left raus... nein, das kannst du nicht gemeint haben :roll: dann ist das nämlich von haus aus immer unter - statt nebeneinander.


S2B 21. Apr 2006 21:50

Re: [CSS] verhindern, dass DIV umbricht
 
OK. :duck: Mach das von vorher und nimm zusätzlich noch das width vom #right raus, dann müsste es normal laufen... :cyclops:

Thorben77 21. Apr 2006 22:18

Re: [CSS] verhindern, dass DIV umbricht
 
Zitat:

Zitat von Meflin
er interpretiert den Abstand zwischen left und main Teil falsch, genauergesagt er klebt beides einfach nebeneinander ohne den margin von 10 zu beachten, während in allen anderen Browsern alles passt.

Der IE scheint die zweite Margin-Angabe anzuwenden, die anderen Browser ignorieren die wohl.
Code:
margin: 10px; // den Wert nehmen die anderen Browser für Margin-Left
margin-left: 0px; // und den der IE
Nimm mal das "float:left" beim Main-Block weg, das ist überflüssig.

Code:
margin: 10px;
margin-left: 0px;
Das solltest Du zu einer Angabe zusammenfassen:
Code:
margin:10px 10px 10px 0px;
Der erste ist der Margin-Wert für obern, der zweite für rechts, der dritte für unten und der vierte für links.
Also kannst Du auch schreiben:
Code:
margin-top:10px;
margin-right10px;
margin-bottom:10px;
margin-left:0px;
Und die Lösung für Dein Problem sollte das hier sein:
Code:
#left {
   margin: 10px;
   width: 180px;
   float: left;
}

#main {
   width: 787px;
   margin:10px 10px 10px 200px;
}
Der Margin-Left-Wert des Main-Blocks sollte so groß sein, wie 1 mal die Breite des linken Blocks plus 2 mal den Margin-Wert des linken Blocks plus den Abstand, den er zum linken Block haben soll (sind hier 10 Pixel).

MfG

Edit:
Zitat:

Zitat von Meflin
2 mal die Breite des linken Blocks??

Stimmt, vertippt, einmal reicht :wink: .

Meflin 22. Apr 2006 10:49

Re: [CSS] verhindern, dass DIV umbricht
 
Zitat:

Zitat von Thorben77
Der Margin-Left-Wert des Main-Blocks sollte so groß sein, wie 2 mal die Breite des linken Blocks plus 2 mal den Margin-Wert des linken Blocks plus den Abstand, den er zum linken Block haben soll (sind hier 10 Pixel).

2 mal die Breite des linken Blocks?? eher nicht, dann ist der Abstand genau doppelt so groß wie er sein soll ;) Mein Urprungsproblem wäre damit gelöst, dadür taucht nun ein neues auf:

Code:
margin:10px 10px 10px 200px;
führt nun wieder im Firefox dazu, dass der #left-Teil genau 10px zu weit nach unten Gesetzt wird, die beiden Blocks sind nicht mehr auf einer Höhe. Im IE wäre alles so wie es sein soll; versucht man das ganze via einer margin-top Angabe im #left zu korrigieren, stimmts im Firefox, dafür aber im IE nicht mehr... der setzt den #left Teil dann zu weit nach oben :evil:


alcaeus 22. Apr 2006 11:02

Re: [CSS] verhindern, dass DIV umbricht
 
Das scheint tatsaechlich ein Problem mitm Fuchs zu sein. Ich habs mal so gemacht:
Code:
body
{
   padding:10px;
}

#left
{
   border:1px solid green;
   margin:0px 10px 0px 0px;
   width:180px;
   float:left;
}

#main
{
   border:1px solid red;
   width:787px;
   margin:0px 0px 0px 190px;
}
Dann passt die Hoehe auch wieder :)

Greetz
alcaeus

[edit]Wird im IE7 halt 10px nach unten geschoben (aber nicht komplett unter die Navi) wenn das Fenster zu klein ist...ich seh mir das nochmal an :roll: [/edit]

Thorben77 22. Apr 2006 11:03

Re: [CSS] verhindern, dass DIV umbricht
 
Moin.

Versuch mal, die beiden Blöcke in einen anderen zu packen, der ein Margin-Top von 10px hat, die beiden anderen 0px.

HTML:
Code:
<div style="margin-top:10px">
  <div id="left">
    ...
  </div>
  <div id="main">
    ...
  </div>
</div>
CSS:
Code:
#left {
  float:left;
  margin:0px 10px 10px 10px;
  width:180px;
}

#main {
  margin:0px 10px 10px 200px;
}
MfG

Meflin 22. Apr 2006 11:05

Re: [CSS] verhindern, dass DIV umbricht
 
Danke alcaeus, scheint so als würde das ganze nun endlich passen, man glaubt es kaum :)

@Thorben: auch danke, aber nicht mehr nötig ;)


alcaeus 22. Apr 2006 11:10

Re: [CSS] verhindern, dass DIV umbricht
 
Zitat:

Zitat von Meflin
Danke alcaeus, scheint so als würde das ganze nun endlich passen, man glaubt es kaum :)

Ich bin mir nicht ganz sicher. Im IE7 und Firefox siehts gleich aus, ausser du machst das Fenster kleiner. Dann schiebt der IE7 die main-box nach unten, so dass ihr oberes Ende buendig mit dem unteren Ende der left-box ist. Also ein quasi-Zeilenumbruch, aber wegen des margin-left kann er die Box nicht ganz links rueberschieben.


BTW, du solltest evtl. die Standard-margins und -paddings ueberschreiben, und dann immer auf eigene Werte setzen, nachdem du ja auf eine fixe Breite aufbaust. Der eine Browser nimmt normal 3px, der andere 5, der eine zaehlt das Padding zur Hoehe hinzu, der andre zaehlts ab, usw. Dann wuerde das Ganze so aussehn:
Code:
body
{
   padding:10px;
}

div
{
   padding:0px;
   margin:0px;
}

#left
{
   width:180px;
   float:left;
}

#main
{
   width:787px;
   margin-left:190px;
}
Klein, leicht und handlich ;)

Greetz
alcaeus

[edit]Jup, kannst vergessen. Die main-Box rutscht bei einem kleinen Fenster ganz nach unten und versucht, unter die left-Box zu kommen :(
Ehrlich: ich wuerde die main-box mit position:absolute; positionieren ;)
[/edit]

Meflin 22. Apr 2006 11:17

Re: [CSS] verhindern, dass DIV umbricht
 
Zitat:

Zitat von alcaeus
Ich bin mir nicht ganz sicher. Im IE7 und Firefox siehts gleich aus, ausser du machst das Fenster kleiner. Dann schiebt der IE7 die main-box nach unten, so dass ihr oberes Ende buendig mit dem unteren Ende der left-box ist. Also ein quasi-Zeilenumbruch, aber wegen des margin-left kann er die Box nicht ganz links rueberschieben.

Zu früh gefreut, der IE 6 macht das auch :roll: Firefox bricht das ganze nicht um, Opera auch nicht. Womit wir sozusagen wieder beim Ausgangsproblem wären :wall:

Manchmal macht das echt keinen Spaß mehr...


alcaeus 22. Apr 2006 11:20

Re: [CSS] verhindern, dass DIV umbricht
 
Das funktioniert in FF (1.0.8) und IE 7 (Beta 2):
Code:
div
{
   padding:0px;
   margin:0px;
}

#left
{
   position:absolute;
   top:10px;
   left:10px;
   width:180px;
}

#main
{
   position:absolute;
   top:10px;
   left:200px;
   width:787px;
}
Ich weiss schon warum ich lieber PHP mache als die HTML-Ausgabe korrekt hinzukriegen :mrgreen:

Greetz
alcaeus

Meflin 22. Apr 2006 11:33

Re: [CSS] verhindern, dass DIV umbricht
 
es hat den Anschein als würde das jetzt wirklich funktionieren :mrgreen: bis zum nächsten "bug" ;)


DelphiAndreas 22. Apr 2006 12:27

Re: [CSS] verhindern, dass DIV umbricht
 
von festen breiten usw. rate ich ja normal ab, aber das ist hier net das Problem ;-)

ich denke du solltest eventuell mit der eigenschaft "display" arbeiten. näheres hier: SelfHTML

Gruß
Andreas

S2B 22. Apr 2006 12:28

Re: [CSS] verhindern, dass DIV umbricht
 
:gruebel:
Irgendwie verstehe ich nicht ganz, warum bei dem Problem position: absolute sein muss, bei meiner Homepage funktioniert sowas perfekt:
Code:
#left {
  float: left;
  width: 250px
}

#right {
  margin-left: 250px
}
Code:
<div>
  <div id="left">
    Test
  </div>
  <div id="right">
    Test
  </div>
  <div style="clear: left"></div>
</div>
Wenn du den Code so verwendest, darf gar nicht umgebrochen werden. :gruebel:


Alle Zeitangaben in WEZ +1. Es ist jetzt 13:38 Uhr.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz