Beiträge von Shanaya

Shanaya

Danke es hat geklappt.

Shanaya

Hi Leute
ich bin neu hier und bin gerade am CSS lernen.
Jetzt habe ich schon Probleme und komm nicht weiter :cry:
Meine Navigation ist jetzt im Kopfteil doch der Kopfteil sollte unter der Navigation andocken.

ich danke euch im vorraus für eure Hilfe

HTML Code

HTML

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




<head>
    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>




<div id="contentbereich">










<div id="top_nav">
<ul>
    <li>Startseite</li>
    <li>Imressum</li>
    <li>Kontakt</li>
</ul>
</div>







<div id="masthead">
          <p>kopf</p>




</div>
<div id="container">







	<div id="left_col">
<ul>
    <li>Startseite</li>
    <li>Imressum</li>
    <li>Kontakt</li>
</ul>
	</div>
	<div id="page_content">




	mitte
	</div>
	<div id="right_col">




	rechts
	</div>
</div>
<div id="footer">
</div>




  </div>




</body>
</html>

Alles anzeigen

CSS Code

Code

*{
    margin: 0;
    padding: 0;
}







body {
	text-align: center;
	background-color: #E1E1E1;




}













#contentbereich {
    background-color: #5555FF;
    width: 1000px;
    margin: 0px auto;




}










#top_nav {
   text-align:left;               /* Textausrichtung     */
   margin-top:0px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */




}




   #top_nav ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }




    #top_nav li {
   float: right;                     /* Anordnung links   */
   margin-left:0px;               /* Außenabstand oben */
   width:90px;                     /* Breite des Links  */




   background-color:silver;        /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;    /* Rahmenfarbe unten  */
   border-right:2px blue solid;    /* Rahmenfarbe unten  */
   margin-top:0px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 }




#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration:line-through; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:overline; }
#navi a:active  { color:orange; text-decoration:underline; }










#masthead {
    background-color:  #FFD42A;
    padding-top: 50px;




}







#container {
    background-color: #808080;
   	position: relative;
	width: 100%;













}




#left_col {
    background-color: #00FF00;
	width: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: left;
	padding-left:30px;
	padding-top: 10px;




}







   #left_col ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }




    #left_col li {
   float:left;                     /* Anordnung links   */
   margin-left:0px;               /* Außenabstand oben */
   width:90px;                     /* Breite des Links  */




   background-color:silver;        /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;    /* Rahmenfarbe unten  */
   border-right:2px blue solid;    /* Rahmenfarbe unten  */
   margin-top:0px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 }




#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration:line-through; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:overline; }
#navi a:active  { color:orange; text-decoration:underline; }




#page_content {
    background-color:   #FFFF00;
 	margin-right: 200px;
	margin-left: 200px;
	text-align: left;
    padding-left: 60px;
    padding-top: 10px;
}




#right_col {
    background-color: #00FFFF;
	width: 200px;
	position: absolute;
	right: 0px;
	top: 0px;
	text-align: left;
	padding-left: 20px;
	padding-top: 10px;
}




#footer {
background-color: #FFFF00;
}

Alles anzeigen

Beiträge von Shanaya

Problem beim Design

Problem beim Design