css problem mit der größe

dracony · 14. März 2010

hi ihrs

ich hab angefangen mit html und css selbst bei zu bringen
nach dem ich nun schon ein paar stunden damit verbracht hab dacht ich ich könnt nen design grob nach bauen. leider hat es nicht den erfolg den ich mir gewünscht hab^^

so solls aussehn (bild vom in phase 5 enthaltenen browser)
[Blockierte Grafik: http://img7.myimg.de/soll897ff_thumb.jpg]

und so schaut es auf dem IE und Opera aus
[Blockierte Grafik: http://img7.myimg.de/istb8a53_thumb.jpg]

wäre nett wenn ihr mir sagt welche teile von css und html code ihr braucht um mir zu helfen ^^[/img]

maulepan · 14. März 2010

ohne quellcode kann dir da leider niemand weiterhelfen

dracony · 14. März 2010

nicht wundern ich hab nur rein kopiert^^ ... also sry für meine kommentare

html code :

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" xml:lang="de" lang="de">




<head>




 <title>Startseite</title>
 <meta name="description" content="wissen ueber woelfe" />
 <meta name="keywords" content="wolf, woelfe" />
 <meta name="author" content="kiki" />
 <meta name="editor" content="html-editor phase 5" />
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" media="screen" href="design.css" />




</head>




<body>
<div id="all">
 <div id="mitte">
<!-- links -->
  <div id="left">
   <div class="box">
    <b class="top"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
    <div class="inhalt">
     <div class="navi">
      <img src="test/wolfkopf.bmp" alt="Wolfskopf" border="0" width="100%" height="100%">
      <a class="navilink" href="index.htm">Startseite</a>
      <a class="navilink" href="wolfsarten.htm">Wolfsarten</a>
      <a class="navilink" href="uebung.htm">übung</a>
      <a class="navilink" href="uebung2.htm">übung2</a>
      <a class="navilink" href="uebung3.htm">übung3</a>
     </div>
    </div>
    <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="bottom"></b>
   </div>
  </div>
<!-- rechts -->
  <div id="right">
<!-- inhalt-anfang -->
   <div class="box">
    <b class="top"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
    <div class="inhalt">
<!-- Infobox-anfang -->
     <div class="infobox">
      <div class="box">
       <b class="top"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>




       <div class="inhalt">In der Box steht mehr test und so</div>




       <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="bottom"></b>
      </div>
     </div>
<!-- Infobox-ende -->
     Drausen
    </div>
    <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="bottom"></b>
   </div>
<!-- Inhalt-ende -->
   <div class="darkempty">&nbsp;</div>




   <div class="box">
    <b class="top"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
    <div class="inhalt">
     aktuell
    </div>
    <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="bottom"></b>
   </div>
  </div>
 </div>




 <div class="leerdunkel">&nbsp;</div>




 <div id="bottom">
  <div class="box">
   <b class="top"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
   <div class="inhalt">
    fusszeile
   </div>
   <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="bottom"></b>
  </div>
 </div>




</div>
</body>
</html>

Alles anzeigen

und hier css:

Code

body {                           /*** body ***/
   background-color:#664F38;         /* Hintergrundfarbe (bis zum Rand) */
   font-color:#664F38;               /* Schriftfarbe (für die ganze Seite) */
}
#all {                           /*** Seite ***/
   width:790px;                      /* Breite der Seite */
   height:100%;                      /* Höhe der Seite */
   margin:auto;                      /* Ausrichtung der Seite */
}
#top {                           /*** oberes Fenster ***/
   width:100%;                       /* Breite des oberen Fensters */
}
#middle {
   width: 100%;
   height: 100%;
}
#left {                          /*** linkes Fenster ***/
   width:200px;                      /* Breite des linken Fensters */
   float:left;                       /* Ausrichtung des linken Fensters */
}
#right {                        /*** rechtes Fenster ***/
   width:580px;                     /* Breite des rechten Fensters */
   float:right;                     /* Ausrichtung des rechten Fensters */
}
#bottom {                       /*** unteres Fenster ***/
   clear: both;                     /* Löschung der Ausrichtungen */
   margin-top: 5px;
   width:100%;                      /* Breite des unteren Fensters */
}
/*
 * **************************************************
 * ***             Class-Anweisungen              ***
 * **************************************************
 */
/*
 * **************************************************
 * ***                   Inhalt                   ***
 * **************************************************
 */
.inhalt {
   height: 100%;
   background-color: #FFEBB1;          /* */
   border-left: 1px black solid;      /* */
   border-right: 1px black solid;     /* */
   color: #664F38;                    /* */
}
.infobox {
   width: 200px;
   height: 100%;
   background-color: #FFEBB1;
   float:right;
   margin-right: 5px;
}
/*
 * **************************************************
 * ***                    Menü                    ***
 * **************************************************
 */
div.navi {
   background-color: #FFEBB1;       /* */
}
a.navilink {
   width: 180px;                    /* */
   margin-left: 5px;
   margin-top: 5px;                     /* */
   display: block;                    /* */
   padding: 1px;                     /* */
   padding-right:5px;                /* */
   border: 1px solid #664F38;       /* */
   background-color: #E5C48A;        /* */
   text-align: right;                 /* */
   color: #664F38;                   /* */
   font-size: 12px;                  /* */
   font-family: arial;               /* */
   text-decoration:none;             /* */
}
a.navilink:active, a.navilink:hover {
   background-color:#664F38;         /* */
   color: #E5C48A;                   /* */
}
/*
 * **************************************************
 * ***                  Abstände                  ***
 * **************************************************
 */
.lightempty {
   display: block;                     /* */
   height:5px;                        /* */
   width:5px;                         /* */
   background-color:#FFEBB1;          /* */
}
.darkempty {
   display: block;                     /* */
   height:5px;                          /* */
   width:300px;                        /* */
   background-color:#664F38;           /* */
}
/*
 * **************************************************
 * ***                    Ecken                   ***
 * **************************************************
 */
.box {
   width: 100%;                         /* */
}
.box b{
   display:block;                      /* */
}
.top {
   height: 1px;                         /* */
   margin-left: 6px;                   /* */
   margin-right: 6px;                   /* */
   background-color: black;             /* */
}
.bottom {
   height: 1px;                        /* */
   margin-left: 6px;                   /* */
   margin-right: 6px;                   /* */
   background-color: black;            /* */
}
.r1{
   margin: 0 4px;                        /* */
   height: 1px;                          /* */
   border-left: 2px black solid;         /* */
   border-right: 2px black solid;        /* */
   background-color: #FFEBB1;            /* */
}
.r2{
   margin-left: 3px;                     /* */
   margin-right: 3px;                    /* */
   height: 1px;                          /* */
   border-left: 1px black solid;         /* */
   border-right: 1px black solid;        /* */
   background-color: #FFEBB1;           /* */
}
.r3{
   margin-left: 2px;                       /* */
   margin-right: 2px;                    /* */
   height: 1px;                           /* */
   border-left: 1px black solid;          /* */
   border-right: 1px black solid;          /* */
   background-color: #FFEBB1;             /* */
}
.r4{
   margin-left: 1px;                   /* */
   margin-right: 1px;                   /* */
   height: 2px;                         /* */
   border-left: 1px black solid;        /* */
   border-right: 1px black solid;      /* */
   background-color: #FFEBB1;         /* */
}

Alles anzeigen

maulepan · 15. März 2010

für mal in deinem #box ein overflow: auto; ein.

dracony · 15. März 2010

hab ich gemacht aber hat sich nur im bei phase 5 geändert .. nun sind da überall scroll leisten. bei IE ist es wie vorher

du meintest schon .box und nicht #box oda?

maulepan · 15. März 2010

richtig... weiss auch nich ganz weiter, da ich dank YAML damit nichtmehr viel zu tun hab... ich schmeiss schnell ma google an und gug wie das ging

EDIT1: Man... bin ich doof xD... ich meinte nicht in .box sondern in .inahlt
EDIT2: Ne doch nich... sorry, aber dein quellcode ist sehr verwirrend. ich finde .inhalt 2 mal an verschiedenen stellen und in verschiedenen sinnebenen.... da blick ich nicht durch.

Auf jeden fall muss das element unter deiner box die sie umschließen soll ein Overflow:auto; stehen.

dracony · 15. März 2010

cool nu gehts

so ein scheiss was macht overflow? bzw was bedeut es?^^

maulepan · 15. März 2010

hey...
das sind fragen, die du echt auch mal in eigenrecherche beantworten kannst.
<a class="postlink" href="http://tinyurl.com/yfstgce">http://tinyurl.com/yfstgce</a>

css problem mit der größe

Jetzt mitmachen!

Teilen