Ergebnis 1 bis 9 von 9

Thema: Boxen verschieben sich

  1. #1
    Meister(in)
    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard Boxen verschieben sich

    Hallo,

    auf der Seite http://billbos.eu/sample/bilder.php habe ich drei Boxen diese sollen nebeneinander, nur die letzte macht einen Zeilenumbruch woran liegt das, denn nach meiner Rechnung müssten sie nebeneinander sein.
    Wenn ich bei

    Code:
    ul.bilderbox li.middle {
    	float: left;
    	width: 240px;
    	background: #FFEDA0;
    	border-top: none;
    	margin: 10px 10px 0 10px;
    }
    das margin-left und -right rausnehme dann sind sie zwar nebeneinander aber meiner Rechnung würde dann nicht aufgehen.
    Jede Box soll 240px breit sein und einen festen Abendstand haben.
    Dann ist noch folgendes Problem vorhanden und zwar, dass der Container (runde große Box) die Bilderboxen nicht einschließt, weiss jemand woran das liegt?

    Besten Dank

    und freundliche Grüße

    Billbos
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von chris90night
    Registriert seit
    09.09.2006
    Ort
    <?php echo $_SERVER['PHP_SELF']; ?>
    Beiträge
    1.096
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    Guten Morgen,

    das der große Container die drei kleineren nicht einschließt liegt daran, dass du ein "clear:left;" nach den boxen bzw. im Footer einbauen musst.

    Merke: "Wo gefloatet wird, muss auch gecleared werden"

    Und zu dem anderen Problem: Teilweise hebt sich das "margin" bei dir auf. Du hast ja für oben, rechts und links ein margin angegeben. D.h. zum Beispiel ist dann zwischen der ersten und der zweiten Box ein (theorethischer) Abstand von 20px, weil du einmal von links und von rechts ein margin angibst. Das solltest du vermeiden. Es reicht ja auch, wenn du für alle drei Boxen ein margin-left und ein margin-top-angibst.

    MfG, chris90night
    Geändert von chris90night (17.02.2009 um 07:41 Uhr)


    Denk immer daran: auch am anderen Ende der Leitung sitzt ein Mensch!

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    #containerdefault ist 800px breit.
    Die drei Kästen innendrin dagegen 1020px. Also können sie da nicht reinpassen:
    linke und rechte Box: 2 x 240px + 2 x 20px margin = 520px
    .middle: 480px + 2 x 10px = 500px

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Boxen verschieben sich

    und dein containermiddle braucht abgesehen von dem was sejuma oben schon für den default beschrieben hat noch nen overflow:hidden, da du ja deine objekte mit float aus dem eigentlichen zusammenhang rausholst..!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Meister(in)
    Themenstarter

    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    Hi, danke für die schnelle Hilfe ich denke das Ergebnis kann sich sehen lassen, dennoch habe ich einen leichten Zweifel, da es mir scheint als wären die Boxen nicht mit demselben Abstand versehen. Wenn jemand noch dazu was einfällt wäre ich dankbar für jeden Tipp.

    Mfg Billbos

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    li.middle {
    float: left;
    clear: right;
    width: 240px;
    background: #FFEDA0;
    border-top: none;
    margin: 15px 15px 0 20px;
    padding: 0;
    }
    Ersetze mal die 20 durch 15

  7. #7
    Meister(in)
    Themenstarter

    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    Ha genau das wars, aber dann wäre die linke Box mit einem kleineren Abstand zur mittleren als die rechte zur mittleren, jetzt habe ich das Problem folgendermaßen gelöst.

    Code:
    ul.bilderbox li.middle {
        float: left;
        clear: right;
        width: 240px;
        background: #FFEDA0;
        border-top: none;
        margin: 15px 10px 0 20px;
        padding: 0;
    }

  8. #8
    Teeny Avatar von Kurikinton
    Registriert seit
    16.02.2009
    Ort
    Augsburg
    Alter
    30
    Beiträge
    32
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    Mit dem ganzen "px"-Abstand musst einfach mal ein bischen probieren.
    Irgendwann passts dann. Aber immer dran denken: Es gibt keine halben Pixel!

  9. #9
    König(in) Avatar von chris90night
    Registriert seit
    09.09.2006
    Ort
    <?php echo $_SERVER['PHP_SELF']; ?>
    Beiträge
    1.096
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Boxen verschieben sich

    Noch was zum Probieren: Ich finde, dass ist nicht die optimale Lösung, da man da zwar auch zum gewünschten Ergebnis kommt, aber wie wir ja gesehen haben, hat jeder Fehler seinen Grund.

    Also dann lieber (so wie er es ja auch gemacht hat) das Ganze nachrechnen und verstehen! =)

    MfG


    Denk immer daran: auch am anderen Ende der Leitung sitzt ein Mensch!

Ähnliche Themen

  1. div boxen verschieben
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 00:20
  2. Grafiken verschieben sich
    Von hhoutline im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.11.2006, 08:15
  3. Bilder verschieben sich
    Von Schnitte im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.03.2006, 05:30
  4. Tabellen verschieben sich
    Von Roland im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 09.11.2005, 19:31
  5. Layer verschieben sich...
    Von Rocco im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 04.06.2004, 21:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •