Beiträge von dracony

dracony

cool nu gehts

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

dracony

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?

dracony

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

dracony

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]

Beiträge von dracony

css problem mit der größe

css problem mit der größe

css problem mit der größe

css problem mit der größe