Thread: [gelöst] Problem mit CSS (Div Elemente)

23.07.2008 13:22 Uhr

klasse7darg

Status: offline

Hallo,

ich habe mehrere Div Boxen Geschachtelt:

PHP:

 
_Div1______________________________________
|                                          | 
|  _Div2_   _Div3_______________________   |
|  |     |  |                          |   |
|  |     |  |                          |   |
|  ______  _____________________________   |
|                                          | 
___________________________________________

Wenn ich jetzt Div3 vergrößere (nach unten) wächst Div1 mit.
Wenn ich aber Div 2 vergrößere wächst es einfach über den Rand hinaus!

zusehen Hier

CSS:

body
{
  margin-top        : 2px;
  margin-bottom     : 2px;
  background-color  : #F0F0F0;
  color             : #996666;
  font-size         : 62.5%;
  font-family       : Verdana;
}
/*div 
{
  border  :1px solid green;
  margin  : 5px;
}*/
 
div.box
{
  width             : 992px;
  background-color  : #C6C6C6;
  text-align        : left;
  padding           : 4px;
  margin            : auto;
  font-size         : 1.2em;
}
div.header
{
  color             : #000000;
}
 
div.navi
{
  height            : 40px;
  padding-left      : 141px;
  font-size         : 1.3em;
  font-family       : Georgia;
}
 
 
div.sidebar
{
  margin-right      : 10px;
  width             : 250px;
  padding-left      : 0px;
  padding-right     : 0px;
  float             : left;
  overflow          : hidden;
  background-color  : red;
}
 
div.boxhead
{
  background-image  : url(../bilder/head.png);
  background-color  : #CCCCCC;
  color             : #000000;
  height            : 25px;
  padding-left      : 0px;
  padding-right     : 0px;
  font-size         : 1.1em;
}
 
div.boxcontent
{
  background-color  : #CCCCCC;
  margin-bottom     : 5px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 2px;
  text-align        : left;
  line-height       : 1.6em;
}
 
div.page
{
  padding-left      : 0px;
  padding-right     : 0px;
  text-align        : left;
  overflow          : hidden;
  width             : 732px;
}
 
div.content-top
{
  background-image  : url(../bilder/head.png);
  background-color  : #CCCCCC;
  color             : #000000;
  height            : 25px;
  text-align        : left;
  padding-left      : 0px;
  padding-right     : 0px;
  font-size         : 1.1em;
}
 
div.content
{
  background-color  : #CCCCCC;
  text-align        : left;
  overflow          : hidden;
  min-height        : 375px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 2px;
  line-height       : 1.6em;
}
 
div.footer
{
  background-color  : #CCCCCC;
  height            : 25px;
  margin-top     : 10px;
  padding-top       : 4px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 4px;
  width             : 975px;
}
 
ul.news
{
  margin-top        : 0px;
  padding-left      : 15px;
}
 
a
{
  color             : #996666;
  text-decoration   : none;
}
 
a:hover
{
  text-decoration   : underline;
}
 
a:visited
{
  color             : #996666;
}
 
a.menu
{
  display           : inline;
  margin-bottom     : 5px;
  text-align        : center;
  width             : 109px;
  text-decoration   : none;
  font-weight       : bold;
  float             : left
}
 
a.menu:link
{
  color             : #000000;
  background-color  : #CCCCCC;
}
 
a.menu:visited
{
  color             : #000000;
  background-color  : #CCCCCC;
}
 
a.menu:hover
{
  background-color  : #E9E9E9;
}
 
a.menu:active
{
  background-color  : #CCCCCC;
}

html:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      Start
    </title>
    <link rel="stylesheet" type="text/css" href="technik/style.css.php" />
  </head>
  <body>
    <div class="box">
      <div class="header">
 
        <h1>Joman92</h1>
      </div>
      <div class="navi">
        <div class="menu"><a class="menu" href="start.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Home
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Blog
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
 
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
&Uuml;ber mich
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="galerie.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Galerie
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Downloads
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Kontakt
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /></div>
      </div>
 
      <div class="sidebar">
        <div class="boxhead">
  <img src="bilder/lo_head.png" align="left" alt="lo" />
  <img src="bilder/ro_head.png" align="right" alt="ro" />
  Info
</div>
<div class="boxcontent">
  Browser: <b>Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1</b><br />IP: <b>192.168.2.34</b>
 
</div><div class="boxhead">
  <img src="bilder/lo_head.png" align="left" alt="lo" />
  <img src="bilder/ro_head.png" align="right" alt="ro" />
  nexem.info
</div>
<div class="boxcontent">
  <ul class="news"><li><a href="http://nexem.info/internet/flash-inhalte-in-suchmaschinen--2535/" target="_blank">Flash-Inhalte in Suchmaschinen</a></li><li><a href="http://nexem.info/hard+software/sicherheitsupdate-fuer-joomla-15--2544/" target="_blank">Sicherheitsupdate für Joomla! 1.5</a></li><li><a href="http://nexem.info/hard+software/sicherheitsluecke-in-pidgin-gefunden--2547/" target="_blank">Sicherheitslücke in Pidgin gefunden</a></li><li><a href="http://nexem.info/spiele/erste-spielbare-demoversion-des-blender-games-apricot--2543/" target="_blank">Erste spielbare Demoversion des Blender-Games Apricot</a></li><li><a href="http://nexem.info/internet/ein-blog-fuer-das-phpbb-team--2549/" target="_blank">Ein Blog für das phpBB-Team</a></li></ul>
</div>
 
      </div>
      <div class="page">
        <div class="content-top">
          <img src="bilder/lo_head.png" align="left" alt="lo" />
          <img src="bilder/ro_head.png" align="right" alt="ro" />
          Start
          </div>
        <div class="content">
          
  Hallo und Willkommen auf meiner kleinen privaten Homepage. Sch&ouml;n, dass ihr hier her gefunden habt.<br /><b>Die Seite ist noch in Aufbau!</b>
 
  
        </div>
      </div>
      <div class="footer">
        
    <a href="http://validator.w3.org/check?uri=referer">
    <img style="border:0;width:71px;height:25px"
        src="bilder/valid-xhtml10-blue.png"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
    </a>
 
    <a href="http://jigsaw.w3.org/css-validator/">
    <img style="border:0;width:71px;height:25px"
        src="bilder/vcss-blue.png"
        alt="CSS ist valide!" />
 
    </a>
 
      
      </div>
    </div>
  </body>
</html>

9 mal bearbeitet

___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821

23.07.2008 13:54 Uhr

linksworld

Status: offline

Zitat:
Wenn ich jetzt Div3 vergrößere (nach unten) wächst Div1 mit.

Woher weißt du das?
Auf deiner Testseite seh ich das nicht.

Welche Funktion hat eigentlich das div page?
Vielleicht muss der sidebar-Bereich auch da mit rein.

1 mal bearbeitet

___________________________
Live your life everyday.
http://www.hotelmagnat.de Betatester für Onlinebrowsergame gesucht.
http://www.earthfight.de Rundenbasiertes Browsergame.

23.07.2008 13:59 Uhr

klasse7darg

Status: offline

Zitat:

Woher weißt du das?
Auf deiner Testseite seh ich das nicht.

Weil ich das schon ausprobiert habe :wink:

(Wenn du Firebug installiert hast, kannst du es ja auch mal ausprobieren)

Zitat:
Welche Funktion hat eigentlich das div page?

Es hält content-top und content zusammen, damit es neben sidebar bleibt.

___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821

23.07.2008 14:00 Uhr

Gelöscht #536

Status: offline

Zitat:
Woher weißt du das?
Auf deiner Testseite seh ich das nicht.

Vorher sah man es mal, inzwischen allerdings wirklich nicht mehr.

Das Problem besteht darin, dass float-Elemente ihre Eltern nicht mehr mitwachsen lassen.
Du könntest mal versuchen, dem Footer (ich glaube er ist in deinem großen div) noch

CSS:

1	clear:left;

mitzugeben, damit er runterrutscht und die große div-Box mitdrängt.

Edit

In einem Test mit Firebug hat das eben funktioniert :glad:

1 mal bearbeitet

23.07.2008 14:15 Uhr

klasse7darg

Status: offline

Danke, hat geklappt!

___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821

23.07.2008 20:41 Uhr

Th3D

Status: offline

Das Problem ist zwar schon gelöst, dennoch würde ich gerne wissen:
Wie man das mit firebug macht!?
Ich hätte das jetzt sontan mit meinem WebDeveloper Addon gemacht....
Und nein, ich weiß eigentlich nicht so ganz genau was FireBug ist, ich hab es nur mal kurz installiert gehabt...

23.07.2008 20:55 Uhr

klasse7darg

Status: offline

Hast du Firebug installiert?
Wenn ja, ist rechts unten in der Statusleiste ein kleiner Käfer.
Da drückst du drauf :wink:

Dann öffnet sich unten ein Fenster.
Lenks ist der HTML Code, den du als Baumstruktur siehst und rechts sind die CSS Eigenschaften für den markierten TAG. Per Rerchtsklick kannst du TAGS und Eigenschaften löschen, oder neue hinzufügen. Bearbeiten kannst du sie, indem du einfach auf die Eigenschaft daraufklickst.
Alle Änderungen werden in Echtzeit auf das Browserfenster übertragen und bleiben bis zum neuladen der Seite.

Noch Fragen?

___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821

23.07.2008 21:42 Uhr

Gelöscht #536

Status: offline

Zitat:
Per Rerchtsklick kannst du TAGS und Eigenschaften löschen, oder neue hinzufügen. Bearbeiten kannst du sie, indem du einfach auf die Eigenschaft daraufklickst.

Cool ist auch, man wählt ein Tag aus, klickt oben auf den Button "Edit" und muss sich dann nur mit dem HTML-Code ab dem gewählten Knoten abmühen. Kannst praktisch grad links die Navigation auswählen und einfach neue Punkte einfügen, bis es von der Länge her reicht :glad:

1 mal bearbeitet

Ähnliche Threads	Forum	Ähnlichkeitsgrad
[problem gelöst!]problem bei div-positionierung mit css + problem mit overflow	Website & Webprogrammierung	2
CSS Menü (mit <ul>) wird nicht richtig im Internet Explorer angezeigt	Website & Webprogrammierung	2
CSS Zentrieren von Div Box im Internet Explorer	Website & Webprogrammierung	2
EILT: Tabelle mit <DIV>'s mit sich an den Inhalt anpassenden Breiten	Website & Webprogrammierung	2
[erledigt] Falsche Anzeigen in Firefox und IE	Website & Webprogrammierung	2
CSS - Div in die rechte obere Ecke	Website & Webprogrammierung	2
float:left (CSS) + margin left ??	Webdesign	2