Hiiiiilfffeeeee - Beispielkästen auf eine Zeile setzen

  • Der Code wäre hilfreich, aber ich tippe jetzt einfach mal darauf, dass du die Boxen floatest, aber diese zu Breit sind und nicht mehr in den umliegenden Content passen, was dann diesen Umbruch verursacht.

  • Dies ist die Index:





    <div class="cleaner_h20"></div>
    <div class="popular_meal_box margin_r_60"> <a href="rustikales.html"><img src="images/image_01.jpg" alt="" /></a>
    <h3>Rustikales B&uuml;ffet</h3>
    <p>Rustikale Wurstplatte, Aufschnittplatte, K&auml;seplatte, Fischplatte uvm.</p>
    <div class="price"></div>
    <a href="rustikales.html">mehr</a> </div>
    <div class="popular_meal_box"> <a href="gemischtes.html"><img src="images/image_02.jpg" alt="" /></a>
    <h3>Gemischtes B&uuml;ffet</h3>
    <p>verschiedene Spie&szlig;chen und H&auml;ppchen, Italienische Antipasti-Platte uvm.</p>
    <div class="price"></div>
    <a href="gemischtes.html">mehr</a> </div>
    <div class="popular_meal_box"> <a href="fingerfood.html"><img src="images/image_02.jpg" alt="" /></a>
    <h3>Fingerfood</h3>
    <p>verschiedene belegte Brote, Spie&szlig;chen, H&auml;ppchen, Blinis, kleine Pfannkuchenrollen uvm.</p>
    <div class="price"></div>
    <a href="fingerfood.html">mehr</a> </div>
    </div>
    </div>
    </div>
    <!-- end of main column -->
    <div id="side_column">
    <div class="side_column_section">
    <h4>B&uuml;fetts</h4>
    <ul class="category_list">
    <li><a href="gemischtes.html">Gemischtes B&uuml;fett</a></li>
    <li><a href="rustikales.html">Rustikales B&uuml;fett </a></li>
    <li><a href="mediteranes.html">Mediterranes B&uuml;fett </a></li>
    <li><a href="saechsisches.html">S&auml;chsisches B&uuml;fett</a></li>
    <li><a href="fingerfood.html">Fingerfood B&uuml;fett </a></li>
    <li><a href="grill.html">Grill B&uuml;fett </a></li>
    <li><a href="weihnachtliches.html">Weihnachtliches</a></li>
    </ul>
    </div>
    <div class="side_column_section">
    <br>
    <h4>Unsere Adresse</h4>
    <a href="#"></a>


    <p> Der Zeitgeist<br />
    Gro&szlig;enhainer Stra&szlig;e 93<br />
    01127 Dresden<br>
    <br> Tel: 0351/8400510<br />
    <br />
    Email:<br />
    Oliver Reetz <br>
    <a href="mailto:info@derzeitgeist.de target="_blank"">info@derzeitgeist.de</a> </p>
    </div>
    <div class="side_column_bottom"></div>
    </div>
    <!-- end of side column -->
    und das der Teil aus der CSS, ich hoffe ich hab alles erwischt




    #content h2 {
    display: block;
    font-size: 24px;
    padding: 0 0 25px 30px;
    margin-bottom: 10px;
    color: #3e2b18;
    background: url(images/h2_bg.png) bottom left no-repeat;
    }


    #main_column {
    float: left;
    width: 590px;
    margin-left: 50px;

    }


    #side_column {
    position: absolut;
    float: right;
    width: 180px;
    color: #20150f;
    background: #967853 url(images/side_column_top.png) no-repeat;;
    margin: 0 50px 50px 0;
    padding: 20px 20px 0 20px;
    }


    #side_column .side_column_bottom {
    position: relativ;
    bottom: -50px;
    left: 0px;
    width: 220px;
    height: 50px;
    background:url(images/side_column_bottom.png) no-repeat;
    z-index: 1;
    }


    #main_column p {
    margin-bottom: 10px;
    }


    #main_column .section_w590 {
    width: 590px;
    }


    .section_w590_content {
    padding-left: 30px;
    }


    .popular_meal_box {
    position: absolut;
    float: left;
    overflow: hidden;
    width: 190px;
    height: 250px;
    padding: 28px;
    margin-left: -60px;
    margin-right: 80px;
    background: url(images/dish_list_bg.png) no-repeat;
    z-index: 2;
    }


    .popular_meal_box img {
    border: 1px solid #5a3f28;
    margin-bottom: 10px;
    }


    .popular_meal_box p {
    color: #191007;
    margin-bottom: 10px;
    }


    .popular_meal_box .price {
    float: left;
    color: #599a1a;
    font-size: 14px;
    font-weight: bold;
    }


    .popular_meal_box a {
    float: right;
    color: #599a1a;
    font-weight: bold;
    }



    #side_column .side_column_section {
    margin-bottom: 30px;
    }


    .side_column_section img {
    border: 1px solid #ffffff;
    margin-bottom: 10px;
    }


    .category_list {
    margin: 0 0 0 20px;
    padding: 0;
    list-style-image: url(images/list_icon_bg.jpg);
    }


    .category_list li {
    margin: 0px;
    padding: 0 0 5px 0;
    }


    .category_list li a {
    color: #20150f;
    }


    .category_list li a:hover

  • ... aber ich tippe jetzt einfach mal darauf, dass du die Boxen floatest, aber diese zu Breit sind und nicht mehr in den umliegenden Content passen, was dann diesen Umbruch verursacht.


    Genau dies ist das Problem, ich habe es mir unter Firefox angesehen. (Drückt man hier die F12-Taste auf der Tastatur, kann man den HTML- und CSS-Code sich ansehen).
    Die drei Boxen sind zu Breit um in einer Zeile dargestellt zu werden. Die Abstände müssten hier verändert werden, dann müsste es klappen!
    LG
    Seepferdchen

  • Genau das ist das Problem was ich nicht hinbekomme.
    Wenn ich mir den Bereich ansich anschaue, dann hat er eine Breit von 930 px, also eigentlich müssten alle drei auf eine Zeile passen
    aber die Box mit den Links, die oben drüber steht nimmt Platz weg, warum auch immer.
    Ich versteh es einfach nicht.

  • auch ich bin relativ neu hier und habe auch noch einiges zu lernen. Das ist ja gerade das, was Spaß macht!


    Ich habe mir gerade wieder eine Video-Kurs CD bestellt. Ich möchte nun lernen Formulare für die Web-Seite zu erstellen und freue mich schon richtig drauf!


    Weiterhin viel Spaß und Erfolg.


    Liebe Grüße
    Seepferdchen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!