Zur Navigation

problem mit boxen

1 tobi

ich hab ein kleines problem beim css mit boxen:
hier der css code:

div {
    padding: .5em;
    margin: 0;
    border: 0px solid black;
    color: black;
    text-align: center;
    }

    #box1 {
      background-color: #e6e6fa;
      float: center;
      margin: 5px;
      border: 2px solid black;
      }

    #box2 {
      background-color: #e6e6fa;
      float: center;
      text-align: left;
      margin: 5px;
      border: 2px solid black;
      }

    #boxlinks {
      background-color: #e6e6fa;
      height: 1000px;
      float: center;
      margin: 5px;
      border: 2px solid black;
      }

    #boxlinks1 {
      float: center;
      margin: 5px;
      height: 1000px;
      border: 2px solid black;
      }

    #boxlinks2 {
      float: center;
      margin: 5px;
      border: 2px solid black;
      height: 160px;
      }

    #boxlinks2_1234_1 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_2 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_3 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_4 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

hier der php teil:

<div id="boxlinks">
<p><b><font size="+2">Links</font></b></p>
<div id="boxlinks1">
<p><b>Ergebnisdienst und Homepage des Kreises Karlsruhe:</b></p>
<center><table width="90%" border="0" cellpadding="4" cellspacing="0">
 <tr>
  <td><center><a href="http://ttvbw.click-tt.de/" target="_blank">Ergebnisdienst click-TT Baden-W&uuml;rttemberg</a></center></td>
  <td><center><a href="http://www.ttkreis-karlsruhe.de/" target="_blank">Homepage des Kreises Karlsruhe</a></center></td>
 </tr>
</table></center>
<hr noshade size="2">
<p><b>Karlsruher TT-Vereine mit Homepage:</b></p>
<div id="boxlinks2">
<center><table width="90%" border="0" cellpadding="4" cellspacing="0">
 <tr>
  <td><center><a href="http://tsgtischtennis.ts.funpic.de/TTtsgBlankenloch.html" target="_blank">TSG Blankenloch</a><br><a href="http://tsgtischtennis.ts.funpic.de/TTtsgBlankenloch.html" target="_blank"><img src="bilder/links/blankenloch.gif"></a></center></td>
  <td><center><a href="http://www.vsvtt.de/" target="_blank">VSV B&uuml;chig</a><br><a href="http://www.vsvtt.de/" target="_blank"><img src="bilder/links/buechig.gif"</a></center></td>
  <td><center><a href="http://www.tvbusenbach-tt.de/" target="_blank">TV Busenbach</a><br><a href="http://www.tvbusenbach-tt.de/" target="_blank"><img src="bilder/links/busenbach.gif"</a></center></td>
 </tr>
</table></center>
<div id="boxlinks2_1234_1">Test 1</div>
<div id="boxlinks2_1234_2">Test 2</div>
<div id="boxlinks2_1234_3">Test 3</div>
<div id="boxlinks2_1234_4">Test 4</div>
</div>
<br>
<?php
include "aktualisierung.php";
?>
</div>
</div>

was ist dass problem? die boxen #boxlinks2_1234_1 - #boxlinks2_1234_4 sind untereinander, ich möchte sie aber nebeneinander haben.

wie mache ich dies???

danke

04.03.2009 15:12

2 Jörg

float kann nur die Werte left, right oder none annehmen. Wenn du die vier Boxen nebeneinander anordnen und zentrieren möchtest, kannst du dies, indem du vier Boxen mit float:left anordnest und in ein übergeordnetes div packst, welches als Breite die Gesamtbreite der vier Boxen erhält und dann mit margin:auto zentriert werden kann.

04.03.2009 18:43

3 leseeule

Habe ähnliches Problem,

aber habe nur float left, float right verwendet und habe auch übergeordnetes div. Leider ist das horizontal mittig angeordnete div (hat keinen float Befehl) keine feste Breite (soll sich anpassen), also wie soll ich dem übergeordneten div klarmachen wie breit es sein soll? Mein Footer soll dabei am unteren Rand des Browserfensters bleiben.

html,
body
{
margin: 0px auto;
padding: 0;
height:100%;
width: 100%;
background-color: #FF9900;
background-image: url(images/trentatre.gif);
background-repeat: repeat;
border: solid #000033 2px;

}


#container
{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
margin: auto;
border: solid #33CCFF 2px;

}

#header
{
margin:0px 0px 10px 0px;
padding: 0;
height: 60px;
border: solid #FF33FF 2px;
}

#body
{
min-height: 100%;
height: auto !important;
height: 100%;
color: #333;
line-height: 130%;
margin: 0 auto 60px auto;
padding: 0px 10px 0px 10px;
border: solid #00FF33 2px;
}

#leftnav
{
float: left;
width: 150px;
margin:0px 0px 10px auto;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}

#content
{
margin: 0px 323px 10px 180px;
padding: 10px;
min-width: 10em;
max-width: 20em;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */

}

#rightnav
{
float: right;
width: 125px;
margin: 0px auto 10px 10px;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}

#rightnav2
{
float: right;
width: 125px;
margin: 0px 0px 10px 10px;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}


#footer
{
border: solid #FF33FF 2px;
position: absolute;
bottom: 0;
height:60px;   /* Height of the footer */
width: 100%;
}

das HTML:

<body>
<div id="container">
    <div id="header">
        header
    </div>
    <div id="body" class="clearfix">
        <div id="leftnav" >
            <p>
            <h2>leftnav</h2>
            Lorem ipsum dol or s it amet, con sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.  erci tation ullamcorper suscipit lobortis nisl ut  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molest
            </p>
        </div>
        <div id="rightnav">
            <p>
            <h2>rightnav</h2>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
            </p>
        </div>
        <div id="rightnav2">
              <p>
              <h2>rightnav2</h2>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.  nt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostr
              </p>
        </div>
          <div id="content">
            <h2>content</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
            </p>
            <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse   nt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
            </p>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>
</body>
</html>

29.03.2009 20:57

4 Jörg

Mit einer flexiblen Breite wird das schwierig. Du musst die Gesamtbreite errechnen und diese den Browsern mitteilen. In diesem Fall kannst du probieren, auch für #container min-width und max-width anzugeben - aber das wird möglicherweise nicht zum erwünschen Ergebnis führen.

29.03.2009 21:17

5 leseeule

Danke, funktioniert halbwegs, probiere morgen die verschiedenen Einstellungen dazu, inbesondere insgesamt mit em-Werten, um ein Optimum hinzubekommen.

Habe Forum gleich mal gebookmarket und werde öfters vorbeischauen - vielleicht kann ich ja auch etwas helfen.

Gute Nacht dann.

29.03.2009 21:40

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]