ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » CSS | POSITION | FLOAT ???

Geschlossen
  1. Mi. 14.12.2005 18:52 Uhr #1
    User Pic
    Fabi gelöschter User
    Hallo,
    habe ein großes Problem....

    ...mit CSS....
    Will in Zukunft nicht mehr mit Table und Frames meine Seiten machen...ich habs auch schon getestet mit CSS, aussehen tuts gut, bis ich versuche Text einzufügen.
    So das is mein HTML: 

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="StyleSheet" href="images/style.css" type="text/css">
<title>Unbenanntes Dokument</title>
</head>

<body>

<div class="main">
     <div class="header"><img src="images/headerl.jpg" class="headerl">
                         <img src="images/headerr.jpg" class="headerr">
     </div>
     <div class="leftnavi"><img src="images/leftnavit.jpg" class="leftnavit">
                           <img src="images/leftnavib.jpg" class="leftnavib">
     </div>
     <div class="topnavi"><img src="images/topnavil.jpg" class="topnavil">
                          <img src="images/topnavir.jpg" class="topnavir">
     </div>
     <div class="content"></div>
     <div class="contentup"><img src="images/contentul.jpg" class="contentul">
                            <img src="images/contentur.jpg" class="contentur">
     </div>
     <div class="contentleft"></div>
     <div class="contentright"></div>
     <div class="contentbottom"><img src="images/contentbl.jpg" class="contentbl">
                                <img src="images/contentbr.jpg" class="contentbr">
     </div>
     <div class="footer"><img src="images/footerl.jpg" class="footerl">
                         <img src="images/footerr.jpg" class="footerr">
     </div>
</div>

</body>
</html>



    ....und das ist meine CSS Datei: 

    


/* CSS for Mozilla */

div>.main {
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	background-color: #00ff00;
	}

div>.header {
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 110px;
    background-image: url(header.jpg);
    background-repeat: repeat-x;
	}
	
div>.headerr {
    position: absolute;
    right: 0px;
    top: 0px;
    }
    
div>.headerl {
    position: absolute;
    left: 0px;
    top: 0px;
    }

div>.leftnavi {
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 110px;
	left: 0px;
	bottom: 50px;
	width: 260px;
    background-image: url(leftnavi.jpg);
    background-repeat: repeat-y;
	}
	
div>.leftnavit {
    position: absolute;
    left: 0px;
    top: 0px;
    }

div>.leftnavib {
    position: absolute;
    left: 0px;
    bottom: 0px;
    }

div>.topnavi {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 260px;
	right: 0px;
	top: 110px;
	height: 75px;
    background-image: url(topnavi.jpg);
    background-repeat: repeat-x;
	}
	
div>.topnavil {
    position: absolute;
    left: 0px;
    top: 0px;
    }
    
div>.topnavir {
    position: absolute;
    right: 0px;
    top: 0px;
    }

div>.content {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 280px;
	right: 20px;
	top: 205px;
	bottom: 69px;
	background-color: #FFFFFF;
	}
	
div>.contentup {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 260px;
	right: 0px;
	top: 185px;
	bottom: 50px;
    height: 20px;
    background-image: url(contentup.jpg);
    background-repeat: repeat-x;
    }

div>.contentul {
    position: absolute;
    left: 0px;
    top: 0px;
    }
    
div>.contentur {
    position: absolute;
    right: 0px;
    top: 0px;
    }

div>.contentleft {
	padding: 0px;
	margin: 0px;
	position: absolute;
    left: 260px;
	top: 205px;
	bottom: 69px;
    width: 20px;
    background-image: url(contentleft.jpg);
    background-repeat: repeat-y;
    }
    
div>.contentright {
	padding: 0px;
	margin: 0px;
	position: absolute;
	right: 0px;
	top: 205px;
	bottom: 69px;
    width: 20px;
    background-image: url(contentright.jpg);
    background-repeat: repeat-y;
    }
    
div>.contentbottom {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 260px;
	right: 0px;
	bottom: 50px;
    height: 19px;
    background-image: url(contentbottom.jpg);
    background-repeat: repeat-x;
    }

div>.contentbl {
    position: absolute;
    left: 0px;
    bottom: 0px;
    }

div>.contentbr {
    position: absolute;
    right: 0px;
    bottom: 0px;
    }

div>.footer {
	padding: 0px;
	margin: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
    background-image: url(footer.jpg);
    background-repeat: repeat-x;
	}
	
div>.footerl {
    position: absolute;
    left: 0px;
    bottom: 0px;
    }
    
div>.footerr {
    position: absolute;
    right: 0px;
    bottom: 0px;
    }
    
/* CSS for IE */

*html body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    }

*html .main {
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	background-color: #6699CC;
	}

*html .header {
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 110px;
	width: 100%;
    background-image: url(header.jpg);
    background-repeat: repeat-x;
    z-index: 3;
	}

*html .headerr {
    position: absolute;
    right: 0px;
    top: 0px;
    }

*html .headerl {
    position: absolute;
    left: 0px;
    top: 0px;
    }

*html .leftnavi {
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 260px;
	height: 100%;
    background-image: url(leftnavi.jpg);
    background-repeat: repeat-y;
    z-index: 2;
	}

*html .leftnavit {
    position: absolute;
    left: 0px;
    top: 110px;
    }

*html .leftnavib {
    position: absolute;
    left: 0px;
    bottom: 50px;
    }

*html .topnavi {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 110px;
	height: 75px;
	width: 100%;
    background-image: url(topnavi.jpg);
    background-repeat: repeat-x;
    z-index: 1;
	}

*html .topnavil {
    position: absolute;
    left: 260px;
    top: 0px;
    }

*html .topnavir {
    position: absolute;
    right: 0px;
    top: 0px;
    }

*html .content {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: #FFFFFF;
	height: 100%;
	width: 100%;
	z-index: 0;
	}

*html .contentup {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 185px;
	bottom: 0px;
    height: 20px;
    width: 100%;
    background-image: url(contentup.jpg);
    background-repeat: repeat-x;
    z-index: 1;
    }

*html .contentul {
    position: absolute;
    left: 260px;
    top: 0px;
    }

*html .contentur {
    position: absolute;
    right: 0px;
    top: 0px;
    }

*html .contentleft {
	padding: 0px;
	margin: 0px;
	position: absolute;
    left: 260px;
	top: 0px;
	bottom: 69px;
    width: 20px;
    height: 100%;
    background-image: url(contentleft.jpg);
    background-repeat: repeat-y;
    }

*html .contentright {
	padding: 0px;
	margin: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 69px;
    width: 20px;
    height: 100%;
    background-image: url(contentright.jpg);
    background-repeat: repeat-y;
    }

*html .contentbottom {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 50px;
    height: 19px;
    width: 100%;
    background-image: url(contentbottom.jpg);
    background-repeat: repeat-x;
    z-index: 1;
    }

*html .contentbl {
    position: absolute;
    left: 260px;
    bottom: 0px;
    }

*html .contentbr {
    position: absolute;
    right: 0px;
    bottom: 0px;
    }

*html .footer {
	padding: 0px;
	margin: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	width: 100%;
    background-image: url(footer.jpg);
    background-repeat: repeat-x;
    z-index: 3;
	}

*html .footerl {
    position: absolute;
    left: 0px;
    bottom: 0px;
    }

*html .footerr {
    position: absolute;
    right: 0px;
    bottom: 0px;
    }

.contentschrift {
    position: absolute;
    top: 205px;
    left: 280px;
    right: 20px;
    bottom: 69px;
    z-index: 22;
    height: 100%;
}


    Und wenn ich jetzt in den Content wa schreiben will, wie mach ich das?
    Weil wenn das zu lang wird, dann hört das Design auf, aber der Text geht dann unter dem Design weiter.
    Ich möchte entweder das der Contentbereich gesrcolled werden kann, oder das sich die Seite nach unten hin verlängert...also das se sich dehnt....
    Und mach ich das falsch, muss ich anstelle von den absoluten angaben mit float arbeiten??oder kann man das so auch machen?

    Vielleicht kann mir ja jemand helfen...


    Großen Dank schon mal fürs durchlesen.
    mfg

    Fabi
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 14.12.2005 19:37 Uhr #2
    User Pic
    manuel ilch-Gründer
    Registriert seit
    22.03.2003
    Beiträge
    4.260
    Beitragswertungen
    4 Beitragspunkte
    höhe kannste nicht einstellen. keine position eingeben nur mit fload arbeiten. höhe leer also nix auch nicht versuchen die auf 100% zu stellen.

    ansonsten mal css4you.de/wslayout1/index.html oder aber auch ilch.de *g* weil das design auch komplett ohne tabellen ist.

    und du hast in der falschen kategorie gepostet!!!!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Fehlersuche und Probleme

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten