mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 07.12.2016 11:57 Benutzername: Passwort: Auto-Login

Thema: css problem mit <div>-boxen (brech) vom 26.08.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> css problem mit <div>-boxen (brech)
Autor Nachricht
dexter2000
Threadersteller

Dabei seit: 01.08.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 26.08.2006 18:09
Titel

css problem mit <div>-boxen (brech)

Antworten mit Zitat Zum Seitenanfang

hallo,

ich habe ein problem mit meinen div-boxen.

ich bekomme sie nicht alle auf gleiche höhe. auf meiner seite sind die boxen auf height: 100% dies richtet sich doch nach dem eltern element, oder?

jetzt habe ich body und html auch heigth: 100% zugewiesen und schon ist alles hinüber. *Schnief*

zudem habe ich noch ein kleines problem was den IE betrifft.... es währe echt cool wenn jemand drüber schauen könnte. Au weia!

ich habe folgende seite:
Code:

<!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">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>TEST PAGE</title>
   <link href="main.css" rel="stylesheet" type="text/css" />
   
</head>

<body>

   <div id="bigBox">
      <div id="header">HEADER HEADER HEADER</div>
      
      <div id="leftBoxTop">
         <p class="boxHeading">Navigation</p>
      </div>
      <div id="mainTop">
         <p class="boxHeading">Aktuelles</p>
      </div>
<div id="contentBox">
      <div id="main">
         <p>MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX MAIN BOX </p>
      </div>

      <div id="leftBoxNav">
         <table id="nav" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#3333cc" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#3333cc';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'"><a class="menu" href="index.php">Link1</a></td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#9900cc" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#9900cc';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'">Link2</td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#ff3333" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#ff3333';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'"><a class="menu" href="index.php?id=7">Link3</td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#ff9900" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#ff9900';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'">Link4</td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#ffff00" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#ffff00';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'">Link5</td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td  bgcolor="#339933" class="navPoint"> </td><td class="navText" onmouseover="style.backgroundColor='#339933';style.cursor='pointer'" onmouseout="style.backgroundColor='#333366'"><a class="menu" href="index.php?id=6">Link6</a></td></tr>
            <tr><td class="navLine" colspan="2"></td></tr>
            <tr><td id="navSpacerRow" colspan="2"></td></tr>
         </table>
      </div>
      <div id="searchBox">

      </div>
      <div id="leftBoxDown">
         <p>TEXT TEXT TEXT</p>
      </div>
      <div id="footer"><p>FOOTER FOOTER FOOTER</p></div>
</div>
   </div>
   
</body>
</html>


und ich habe folgendes css:

Code:

html {
        height:100%;
}

body {
   background-color: #6666cc;
   font-family: Arial;
   font-size: 12pt;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   height: 100%;
}

#date {
   font-size:11px;
   font-weight:bold;
}

#bigBox {
   background:url(bgVerlauf.gif);
   background-repeat:repeat-y;
   height: 100%;
   width: 700px;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   padding:0px;
}

#header {
   height: 105px;
   width: 700px;
   text-align: right;
   margin-bottom: 10px;
}

#leftBoxTop {
   background-color:#313063;
   padding-top:5px;
   padding-left:13px;
   padding-right:0px;
   padding-bottom:0px;
   width: 135px;
   height: 77px;
   float:left;
}

#mainTop{
   background-color:#313063;
   padding-top:5px;
   padding-left:13px;
   padding-right:10px;
   padding-bottom:0px;
   width: 522px;
   height: 21px;
   float:right;
}

#main {
   background-color:#333366;
   width:522px;
   height:100%;
   padding-left:13px;
   float:right;
   color:#FFFFFF;
   padding-right:10px;
}

#leftBoxNav {
   background-color:#333366;
   height: 150px;
   width: 148px;
   float:left;
}

#searchBox{
   background-color:#313063;
   width:148px;
   height:84px;
   float:left;
}

#leftBoxDown{
   background-color:#9999cc;
   width:128px;
   height:100%;
   padding-top:20px;
   padding-left:10px;
   padding-right:10px;
   padding-bottom:20px;
   font-size:9px;
   color:#FFFFFF;
   float:left;
}

#contentBox {
       height:100%;     
}
#footer {
   height:50px;
   width:700px;
}

#navSpacerRow {
   height:128px;
   width:148px;
}
#nav {
   color:#FFFFFF;
}
.navPoint {
   width:10px;
   height:17px;
}
.navText {
   width:138px;
   padding-left: 3px;
}
.navLine {
   background-color:#999999;
   height:1px;
   width:148px;
}
.boxHeading {
   color:#FFFFFF;
   font-weight:bold;
   margin:0px;
}


thx
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 27.08.2006 11:26
Titel

Re: css problem mit <div>-boxen (brech)

Antworten mit Zitat Zum Seitenanfang

dexter2000 hat geschrieben:

auf meiner seite sind die boxen auf height: 100% dies richtet sich doch nach dem eltern element, oder?


Schön wärs. Es richtet sich leider nach den
100% vom Viewport. Guckst Du mal hier.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen CSS und div-Boxen
[CSS] div-Boxen sollen autom. mitlaufen
Problem mit div-Boxen
CSS Div Problem
Div Boxen und Darstellungsproblem
[css] Problem mit div Höhe
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.