Probleme mit DIV-Design

Chr!s · 18.12.2005, 00:29

Hallo,
wie ihr sicher sehen könnt ist die hellgrüne (Subselection)-Sektion nicht genau da, wo sie eigentlich sein sollte.
http://sag-ich-dir.net/_blog/

Code:

body {
        color: #000;
        font: 100.01%/1.1 "Lucida Sans", Arial, "Times New Roman", Times, sans-serif;
        width: 800px;
        margin: 0 auto;
        text-align: center;
        border: 1px solid #666
}

#content {
        width: 650px;
        background: #9cf;
        border: 1px solid #fff;
}

#sub-section {
        width: 146px; /* 147 ist aber zu groß */
        background: #cfc;
        border: 1px solid #fff;
}

Nun, was kann ich machen, damit sich die Spalte richtig einrückt? Mit %-Angaben hab ich es auch schon versucht, hat die gleichen Ergebnisse geliefert wie dieses Beispiel..

J33d3X · 18.12.2005, 04:57

versuch es doch einfach mal so

cssfile

Code:

/*___stylesheet-file___*/

html, body {
    margin:0;
    padding:0;
    color: #000;
    background: #666;
    font: 100.01%/1.1 "Lucida Sans", Arial, "Times New Roman", Times, sans-serif;
    height:100%
}
html>body {
    min-width:800px;
}
body #container {
    width:800px;
}

.clear {clear:both}

h1, h2 {
    margin-left: 10px;
}

ul, li {
    margin-left: 10px;
    margin-top: 10px;
    margin-right:9px;
    display:inline;
    list-style:none
}

/*___master-ids___*/



#container, #header, #menu, #content, #sub-section, #footer {
    color:#000;
    border:1px solid #fff;
}

#container {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-400px;
}

#header {
    position:relative;
    padding:10px 0;
    background:#fcc;
    background-image: url('header.jpg');
    height:180px; 
}

#menu {
    position:relative;
    background:#ffc;
}

#content {
    padding:10px 0;
    width:650px;
    background:#9cf;
    float:left;
}

#sub-section {
    left:0;
    margin-left:652px;
    height:21em;
    margin-bottom:-2em;
    background:#cfc;
}

#footer {
    position:relative;
    margin-top:0;
    background:#ccf;
}

htmlfile

Code:

<!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>
 <title>= Der Sag-Ich-Dir.Net Blog =</title>
 <link href="./my.css" type="text/css" media="screen" rel="stylesheet" />
</head>
<body>

  <div id="container">
    
    <div id="header">
      <h1>Chr!s' Blog</h1>
      <h2>2005</h2>
    </div>
    
    <div id="menu">
     <h1>menu</h1>
     <ul>
      <li><a href="http://www.sag-ich-dir.net">Next</a></li>
      <li><a href="http://www.sag-ich-dir.net">Next</a></li>
      <li><a href="http://www.sag-ich-dir.net">Next</a></li>
    
      <li><a href="http://www.sag-ich-dir.net">Next</a></li>
      <li><a href="http://www.sag-ich-dir.net">Next</a></li>
     </ul>
    </div>
    
    <div id="content">
     <h1>content</h1>
     <p><br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla</p>
    </div>
    
    <div id="sub-section">
     <h1>sub-</h1>
     <p><br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla
     <br />bla</p>
    </div>
    
    <br class="clear" />
    
    <div id="footer">
     <h1>footer</h1>
     <p>Valid <a title="Valid XHTML 1.0!" href="http://validator.w3.org/referer">XHTML</a>
    </div>
    
  </div>

</body>
</html>

Beispiel

mfg

[edit]
verstehe nicht wieso du nicht mit absoluten angaben "werkelst"
hat noch den "schönen" SEO effekt das der content direkt unterm body tag steht

gruss

Chr!s · 18.12.2005, 09:39

Hui, herzlichen Dank, hab verstanden warum mein Design nicht so funktioniert hatte wie ich wollte

Nur leider sieht das im IE anders aus als im Firefox / Mozilla..

Zitat:

hat noch den "schönen" SEO effekt das der content direkt unterm body tag steht

Ironisch oder wirklich gemeint?

J33d3X · 18.12.2005, 09:51

wirklich ...

SEO sind viele Komponente aber das der Content direkt unterm body tag steht ist eins der wichtigsten

wenn du absolute angaben nutzt ohne viel margin oder padding dann bekommst du es zu fast 100% gleich hin unter FF und IE ....
doch deine ständigen margin 0 10 0 auto usw. iss klar das der IE dann spinnt
( boxmodel )
durch die absolute angabe von platzierungen umgehst du das margin, padding "grösstenteils"

als bsp. mal eine index.tpl

- content direkt unter body
- headline steht im context unten aber beim screenen ist Sie da wo Sie hingehört

Code:

<!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>
<title>{$phrase['pagetitle']}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache, must-revalidate" />
<meta name="robots" content="index, follow" />
<meta name="expires" content="0" />
<meta name="audience" content="all" />
<link rel="icon" href="images/system/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/system/favicon.ico" type="image/x-icon" />
<script src="scripts/swbUtil.js" type="text/javascript"></script>
<style type="text/css" media="screen">
@import "scripts/kochforum.css";
{$phrase['customcss']}
</style>
<!--[if IE]><style type="text/css">html {overflow-x:hidden}</style><![endif]-->
<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height:100%; overflow-y:hidden;
    }
    #content {
      height:100%; width:100%; overflow:auto;
    }
    #lyrContentUnder {
      position:static;
    }
  }
</style><![endif]-->
</head>

<body>
  <div id="container">

  <h1>Willkommen bei Peters Kochforum ( Rezepte, Lebensfreude, Lifestyle )</h1>
  
   <div id="content" class="lyrContentUnder">
     <div id="lyrContentUnder">
       {$phrase['content']}
     </div>
   </div>
    
   <div class="lyrContentOver">
  {$phrase['sidebara']}
   </div>

  {$phrase['usertable']}
  
   <div id="sidebarb">
  {$phrase['sidebarb']}
   </div>
    
  
    <div id="navline">
    <img class="navline" src="images/system/navline.gif" width="158" height="70" alt="navline" usemap="#navline_Map" />
    <map name="navline_Map" id="navline_Map">
    <area shape="rect" alt="contact" coords="0,60,158,70" href="{$_SESSION['url']}p=1&amp;do=getcontact" />
    <area shape="rect" alt="community" coords="0,43,158,59" href="{$_SESSION['url']}p=3" />
    <area shape="rect" alt="lifestyle" coords="0,27,158,42" href="{$_SESSION['url']}p=4" />
    <area shape="rect" alt="cook" coords="0,11,158,26" href="{$_SESSION['url']}p=2" />
    <area shape="rect" alt="home" coords="0,0,158,10" href="{$_SESSION['url']}p=1" />
    </map>
    <script type="text/javascript">
    // <![CDATA[
    function navline_Map() {
        var navline = document.getElementById('navline');
        navline.style.bottom = 0 + "px";
    }
    expSwB.fnEvtadd(document,"onscroll",navline_Map,false);
    // ]]>
    </script>
    </div>
  </div>

   <div id="headline">
  {$phrase['headline']}
   </div>
</body>
</html>

mfg

J33d3X · 18.12.2005, 10:04

ps wegen unterschied IE FF

einfach unter

Code:

#sub-section {
    left:0;
    margin-left:652px;
    height:19em;
    margin-bottom:-2em;
    background:#cfc;
}

das noch drunter knallen

Code:

div[id]#sub-section {
    height:21em;
    margin-bottom:-2em;
}

Chr!s · 18.12.2005, 10:20

Leider nicht ganz, zwischen Content und Submenu ist immer noch eine Lücke

.. Seltsamerweise bekomme ich die durch ausprobieren auch nicht weg?

J33d3X · 18.12.2005, 10:27

also .... ich bitte dich Chris

notfalls bei

#content

margin-right:-3px; einfügen

Code:

#content {
    padding:10px 0;
    margin-right:-3px;
    width:652px;
    background:#9cf;
    float:left;
}
div[id]#content {
    width:650px;
}

#sub-section {
    left:0;
    margin-left:650px;
    height:19em;
    margin-bottom:-2em;
    background:#cfc;
}
div[id]#sub-section {
    height:21em;
    margin-bottom:-2em;
}

Chr!s · 18.12.2005, 11:12

Ja tschuldige, aber ich bin vorhin erst aufgestanden und war zwischendruch Schneeschippen..

Danke aber.

18.12.2005, 00:29	Nach oben #1
Chr!s Christian Mühlroth Registriert seit: 04.09.2005 Ort: Nürnberg Beiträge: 561	Probleme mit DIV-Design Hallo, wie ihr sicher sehen könnt ist die hellgrüne (Subselection)-Sektion nicht genau da, wo sie eigentlich sein sollte. http://sag-ich-dir.net/_blog/ Code: body { color: #000; font: 100.01%/1.1 "Lucida Sans", Arial, "Times New Roman", Times, sans-serif; width: 800px; margin: 0 auto; text-align: center; border: 1px solid #666 } #content { width: 650px; background: #9cf; border: 1px solid #fff; } #sub-section { width: 146px; /* 147 ist aber zu groß / background: #cfc; border: 1px solid #fff; } Nun, was kann ich machen, damit sich die Spalte richtig einrückt? Mit %-Angaben hab ich es auch schon versucht, hat die gleichen Ergebnisse geliefert wie dieses Beispiel.. __________________ http://www.ChrisDiary.De*

18.12.2005, 10:04	Nach oben #5
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	ps wegen unterschied IE FF einfach unter Code: #sub-section { left:0; margin-left:652px; height:19em; margin-bottom:-2em; background:#cfc; } das noch drunter knallen Code: div[id]#sub-section { height:21em; margin-bottom:-2em; } __________________ Code: eval('echo "'.gzinflate(base64_decode('8zI2TjGOAAA=')).'";');

18.12.2005, 10:20	Nach oben #6
Chr!s Christian Mühlroth Registriert seit: 04.09.2005 Ort: Nürnberg Beiträge: 561	Leider nicht ganz, zwischen Content und Submenu ist immer noch eine Lücke .. Seltsamerweise bekomme ich die durch ausprobieren auch nicht weg? __________________ http://www.ChrisDiary.De

18.12.2005, 11:12	Nach oben #8
Chr!s Christian Mühlroth Registriert seit: 04.09.2005 Ort: Nürnberg Beiträge: 561	Ja tschuldige, aber ich bin vorhin erst aufgestanden und war zwischendruch Schneeschippen.. Danke aber. __________________ http://www.ChrisDiary.De

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Höhe von div verändern, divs darunter je nach Größe verschieben	buddy_casino	JavaScript und AJAX	13	17.09.2007 12:49
Neues Design auf aprescher.de	suppenmann	Projekte unserer Mitglieder	12	02.03.2007 14:33
Probleme mit Strato / Arcor?	MrNiceGuy	Plauderecke	15	28.12.2006 23:35
Caching mittels dbm-Dateien, Probleme mit dba_popen()	Ben	PHP-Programmierung	4	27.07.2006 13:23
Wie erstellt man schönes Design	Buhmann	HTML, XML und CSS	13	10.02.2006 16:39