Frage stellen
habe xhtml und css ein layout gebaut und will den footer zentrieren und daneben noch eine box rechts einfügen.
kann mir einer von euch profis helfen ?
danke
- Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<meta>
<title>Unbenanntes Dokument</title>
<link>
<style>
/*
----------Allgemeine Einstellungen----------
*/
*
{
padding:10;
margin:0;
}
body
{
font: 14px "Trebuchet MS", verdana, arials, sans-serif;
color: #000;
background: #ccc;
background-color: #6aa7bd;
}
p
{
margin: 1em 0;
}
a.anker
{
float: left;
text-decoration: none;
color: #fff;
}
hr
{
background: #aaa; /* Mozilla 1.4 */
color: #aaa; /* IE 6 */
border: #aaa; /* Opera 7.11 */
height: 1px; /* in Opera für die Anzeige nötig, in Mozilla für die einheitliche Höhe */
margin: 0 0 30px 0;
}
h2
{
font-size: 40px;
}
/*
----------Header-----------------------------
*/
#header
{
height: 90px;
line-height: 85px;
background: #0099ff;
font-size: 18px;
color: #eaeaea;
padding-left: 45px;
list-style: url(../logo.gif) outside square;
}
#header span
{
font-weight: normal;
color: #000;
}
/*
----------Navigation-------------------------
*/
ul#navigation
{
float: left;
margin: 65px 0 0 30px;
width: 200px;
list-style: none;
border-top: 1px solid #333;
}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 200px;
line-height: 27px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #333;
}
ul#navigation li a:hover
{
background: #5296b4;
color: #eaeaea;
}
ul#navigation li a:active
{
background: #5296b4;
color: #eaeaea;
}
/*
----------Inhalt----------
*/
#content
{
padding: 10px;
margin: 0px 0 0px 200px;
}
#content2
{
float:right;
padding: 10px;
margin: 0px 0 30px 250px;
}
/*
----------Footer------------
*/
p#footer
{
widht:350;
height: 400px;
line-height: 20px;
background: #ffffff;
text-align: center;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 414px;
top: 92px;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: -2px;
top: -14px;
}
#Layer3 {
position:left;
width:200px;
height:115px;
z-index:1;
left: 3px;
top: 21px;
visibility: visible;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer5 {
position:left;
width:200px;
height:115px;
z-index:3;
left: 696px;
top: 123px;
}
#Layer6 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-image: url(su.jpg);
}
#Layer7 {
position:absolute;
width:197px;
height:115px;
z-index:3;
left: 7px;
top: 403px;
}
#Layer8 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 30px;
top: 153px;
}
#Layer9 {
position:absolute;
width:128px;
height:115px;
z-index:1;
left: 755px;
top: 37px;
}
</style>
<if>
<style>
ul#navigation{
margin-left: 0px;
}
ul#navigation li a
{
margin-left: -20px;
voice-family:"\"}\"";
voice-family:inherit;
margin: 0px;
}
</style>
<endif>
</head>
<body>
<body>
<table>
<tr>
<td> </td>
</tr>
</table>
<div><img></div>
<h1> </h1>
<div>
<ul>
<li><a>Home</a></li>
<li><a>hallo</a></li>
<li><a>hallo1</a></li>
<li><a>hallo2</a></li>
<li><a>hallo3</a></li>
<li><a>hallo4</a></li>
<li><a>hallo5</a></li>
<li><a>hallo6</a></li>
</ul>
</div>
<div>
<div>Willkomen auf unser Internetpräsenz </div>
</div>
<div>
<div>
<p>rechts</p>
<p> </p>
<p>i</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<p>
<p>
<p>
<p>
<p> </p>
</body>
</html>
habe ich etwa in css was falsch gemacht
*
{
padding: 0;
margin: 0;
}
body
{
font: 14px "Trebuchet MS", verdana, arials, sans-serif;
color:#000;
background: #ccc;
}
H1,H2,H3 {
color : #000;
font: 1.2em "Arial","Verdana",sans-serif;
}
H2 {
font-size : 1.1em;
}
H3 {
font-size : 1.0em;
}
p
{
margin: 1em 0;
}
#header
{
height:0px;
width:958;
background: #0099ff;
font-size: 18px;
line-height: 85px;
color: #0099ff;
padding-left: 45px;list-style: url(images/logo.gif) outside square;
}
ul#navigation
{
float: left;
margin:0px 0 0 0px;
width: 150px;
list-style: none;
border-top: 1px solid #333;
border-bottom:1px solid #6aa7bd;
}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: inline;
height: 27px;
width: 150px;
line-height: 27px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #333;
}
ul#navigation li a:hover
{
background: #bbb;
color: #6aa7bd;
}
#content
{
padding: 0px;
margin: 50px 0 30px 500px;
}
#container1{
background:#ffffff;
}
p#footer
{
height: 0px;
line-height: 1px;
background: #ffffff;
text-align: center;
}
- Code: Alles auswählen