[CSS] opbouw css 'waarschijnlijk' verkeerd - Softwareontwikkeling

zondag 14 september 2008 19:35

Acties:

Topicstarter

Hallo,

Ik ben bezig met een website die opgemaakt is via CSS. Ik maak hier gebruik van faux-columns (dmv van floats en margings). In een van die kolomen maak ik dan ook weer gebruik van floats en marigns, die geclearer worden met het statement: clear: both;

Nu komt de content die in de kolomen zit er dus onder staan , terwijl het de bedoeling is dat hij er naast komt.

Cascading Stylesheet:

/* Layout */

html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }

body { background-color: #161616;   background-image: url("../images/logo.png");    background-repeat: no-repeat;    }

#container { margin-left: 197px;    background-image: url("../images/menubg.gif");  background-repeat: repeat-y;    background-color: #111; min-height: 100%; }

#container #top #khoda-text { background-image: url("../images/logo-2.png");    background-repeat: no-repeat;   background-color: #161616;  width: 100%;    height: 70px; }

#container #top #tabs {
  position: absolute;
  top: 18px;
  right: 50px;
  height: 52px;
}

#container #top #tabs ul {
  list-style-type: none;
  color: white;
}

#container #top #tabs ul li {
  display: inline;
}

#container #top #tabs ul li.seperator {
    background-image: url("../images/tab_seperator.gif");
    background-position: bottom right;
    background-repeat: no-repeat;
    height: 52px;
    float: left;
    display: block;
    width: 2px;
}

#container #top #tabs ul li a.block {
    display: block;
    background-image: url("../images/tab_bg.gif");
    background-repeat: repeat-x;
    height: 52px;
    float: left;
    text-decoration: none;
  padding-left: 10px;
    padding-right: 10px;
    padding-top: 30px;
    color: white;
    font: 11px Tahoma;
    font-weight: bold;
}

#container #top #tabs ul li a.block:hover {
    background-image: url("../images/tab_bg_hover.gif");
    text-decoration: underline;
}

#container #pane { /*background-image: url("../images/watermark.png");  background-repeat: no-repeat;   background-position: top right;*/   width: 100%;    height: 100%;   min-height: 100%;   border-top: 1px solid #313537; }

#container #pane #blocks-pane { float: left; width: 202px; }

#container #pane #blocks-pane .block { padding: 10px; }
#container #pane #blocks-pane .block > .content { border: 1px solid #313537; }
#container #pane #blocks-pane .block h2 { color: white; }
#container #pane #blocks-pane .block hr { border: 0px; height: 2px; background: #313537; }


#container #pane #content-pane { margin-left: 202px; }
.footer { clear: both;}

.content { padding: 10px;   font: 11px Arial;   color: #7e7e7e; line-height: 150%; }

.content .breadcrumb { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #313537; }
.content .breadcrumb a { text-decoration: none; font: 11px Arial; color: white; font-weight: bold; }

/* Forum */

.forum_post { width: 100%; border-bottom: 5px solid #313537; }
.forum_post .postinfo { border-top: 1px solid #313537; border-bottom: 4px solid #00b0f0; background-color: black; height: 65px; padding: 10px;}
.forum_post .postinfo .avatar { float: left; padding: 3px; }
.forum_post .postinfo .poster { float: left;  }
.forum_post .postinfo .postoptions { float: right; }
.forum_post .content { clear: both; }
.forum_post .signature { padding: 5px; border-top: 1px solid #313537; }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/Includes/sheets/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/Includes/sheets/layout.css" media="screen" />
</head>
<body>
<div id="container">

  <div id="top">
    <div id="khoda-text"></div>
    <div id="tabs">
      <ul>
        <li class="seperator"></li>
              <li><a class="block" href="/home/">Home</a></li>
        <li class="seperator"></li>
              <li><a class="block" href="/users/">Users</a></li>

        <li class="seperator"></li>
              <li><a class="block" href="/forums/">Forums</a></li>
        <li class="seperator"></li>
              <li><a class="block" href="/raids/">Raids</a></li>
        <li class="seperator"></li>
              <li><a class="block" href="/roster/">Roster</a></li>
        <li class="seperator"></li>

              <li><a class="block" href="/dkp/">DKP</a></li>
        <li class="seperator"></li>
              <li><a class="block" href="/articles/">Articles</a></li>
        <li class="seperator"></li>
            </ul>
    </div>
  </div>
  <div id="pane">

    <div id="blocks-pane">
      <div class="block">
  <div class="content">
  <h2>User Panel</h2>
  <hr />
    </div>
</div><div class="block">
  <div class="content">
  <h2>News Panel</h2>

  <hr />
  News  </div>
</div><div class="block">
  <div class="content">
  <h2>News Panel</h2>
  <hr />
  News  </div>
</div>    </div>

    <div id="content-pane">
      <div class="content">
          <div class="forum_post">

      <div class="postinfo">
        <div class="avatar">
          <img src="/users/avatar/1" />
        </div>
        <div class="poster">
          <a href="/users/profile/1"><h2>Fristi</h2></a>
          <span class="date">Posted on: 2008-09-14 15:36:46</span>
        </div>

        <div class="postoptions">
                  </div>
      </div>
      <div class="content">
        <p>I'll be testing more</p>      </div>
            <div class="signature">
        <p><img alt="" src="http://i75.photobucket.com/albums/i297/Larving/Rage04.jpg" /></p>      </div>

          </div>
    <br />
  

 
      </div>
    </div>
    <div class="footer"></div>
  </div>
</div>
<script type="text/javascript" src="/Includes/scripts/jquery.js"></script>
<script type="text/javascript" src="/Includes/scripts/jquery.formo.js"></script>

</body>
</html>

Voorbeeld van de live versie als deze online staat: http://84.105.1.20/forums/general/general_discussion/4/

Plaatje als deze niet online staat: http://fristi.gethost.nl/prob.png

maandag 15 september 2008 09:36

Acties:

Bosmonster

*zucht*

clear cleared in de standards compliant browsers ALLE niveau's, niet alleen het huidige. Daarom komt de content onder het linkermenu. Dit maakt het intensief nesten van floats erg lastig.

Ipv de clear:both kun je kijken of je niet voldoende hebt aan een clear left/right. Anders kun je ook kijken naar het gebruiken van overflow: auto op het parent element, ook dit cleared floats, maar heeft wat bijwerkingen (werkt ook niet in IE6).

edit: kleine opmerking trouwens. Zet je jquery.js e.d. gewoon in de head waar ze horen.

[ Voor 14% gewijzigd door Bosmonster op 15-09-2008 09:37 ]

Reageer