komm beim layouten nicht, weiter bräuchte hilfe :)
markus
- css
0 Adrian0 markus
0 Christoph Schnauß0 Martin Hölter
moin, ich möchte ne webpräsenz erstellen
habe das layout auch schon so gut wie fertig!
mir fehlt nur noch ein div-container, in den ich den inhalt schreiben möchte, doch genau dies bekomm ich einfach nicht hin
ich möchte einen layer zwischen
#navigation_container und
#features_container
der die ganze, verfügbare breite einnimmt
ich hoff ihr könnt mir helfen
hier sind die quell texte
css :
html, body{
background-color: #CCCCCC;
padding-top: 2px;
padding-right: 3%;
padding-bottom: 5px;
padding-left: 3%;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-decoration: none;
height:90%;
}
#head_left{
display:block;
margin:0px;
padding:0px;
width:80%;
float:left;
background-color:#346391;
height:80px;
line-height:80px;
}
#content_container{
float:left;
margin:0 auto;
padding:5px 0px;
border-left:0px solid black;
border-right:0px solid black;
text-align:center;
background-color: #FFCC66;
}
#head_right{
display:block;
margin:0px;
padding:0px;
width:20%;
float:left;
background-color:#346391;
height:80px;
}
#info_row{
display:block;
float:left;
width:100%;
background-color:#C8DFF1;
margin:0px;
padding:2px;
top:80px;
height:30px;
line-height:30px;
font-size: smaller;
}
#navigation_container{
display:block;
float:left;
width:160px;
background-color:#4D79A8;
margin:0px;
padding:3px;
text-align: center;
}
#content_container{
display:block;
background-color:#FFFFFF;
}
#features_container{
display:block;
float:right;
width:160px;
right:0px;
background-color:#4D79A8;
margin:0px;
padding:3px;
}
.container_header{
font-size: small;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
line-height: 1.5em;
padding-top: 2px;
padding-bottom: 2px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
background-color:#346391;
display:block;
margin-bottom: 5px;
}
ul{
margin:0px;
padding:0px;
}
li{
list-style-image: none;
list-style-type: none;
}
a:link, a:visited{
color: #000000;
text-decoration: none;
display: block;
padding-top: 3px;
padding-bottom: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-bottom-style: solid;
border-top-color: #7F7F7F;
border-right-color: #7F7F7F;
border-bottom-color: #7F7F7F;
border-left-color: #7F7F7F;
width:100%;
float:left;
text-align: left;
}
a:hover, a:active{
background-color: #93B6D9;
}
.borderd_img{
border: 2px solid #FFFFFF;
padding: 7px;
margin-bottom:10px;
}
.left_text{
text-align:left;
}
h1 {
font-size: large;
font-weight: bolder;
color: #000000;
}
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">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Elektroniker für Geräte und Systeme</title>
<!-- TemplateEndEditable --><link href="../browser.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="head_left"> Inhalt von id "banner_left"</div>
<div id="head_right">Raum für den Inhalt von id "head_right"</div>
<div id="info_row">Inhalt id "info_row" </div>
<div id="navigation_container"><p><span class="container_header">Navigation</span>
<ul>
<li><a href="#">Startseite</a></li><li><a href="#">Das Berufsbild</a></li><li><a
href="#">Wissen</a></li><li><a href="#">Prüfung</a></li><li><a
href="#">Projekte</a></li><li><a href="#">Forum</a></li><li><a
href="#">Impressum</a></li>
</ul>
<img name="css" class="borderd_img" src="" width="88" height="31" alt="CSS-Validator des W3C">
<img name="xhtml_validator" class="borderd_img" src="" width="88" height="31" alt="XHTML Validator des W3C">
<span class="container_header">Statistik</span>
<p class="left_text">Besucher insgesamt : 11<br>
Besucher online : 1<br></p>
</div>
<div id="content_container">Raum für den Inhalt von id "content_container"</div>
<div id="features_container">
<p><span class="container_header">Gooooogle-Anzeigen</span>
<br>
das hier</p>
<p>wird einmal</p>
<p>der platz</p>
<p>sein werden</p>
<p>in dem</p>
<p>google anzeigen</p>
<p>stehen</p>
<p>werden </p>
<p>danke</p>
</div>
<!-- TemplateBeginEditable name="inhalt" -->inhalt des Content Container<!-- TemplateEndEditable -->
</body>
</html>
ich bedank mich schonmal für eure hilfe :)
Hallo!
Hast du eine Beispiel Seite zum anschauen??
weil so steigt man da jetzt nicht sofort durch...
Mit freundlichen Grüßen,
Adrian
so ich habe es mal online gestellt unter
http://mitglied.lycos.de/kartofelbauer/EGS/
ich möchte, das der content-layer die volle breite zwischen der navigation und den gooogle anzeigen ausfüllt
Hi,
http://mitglied.lycos.de/kartofelbauer/EGS/
ich möchte, das der content-layer die volle breite zwischen der navigation und den gooogle anzeigen ausfüllt
zunächst mal solltest Du nicht den IE verwenden, um Dein Layout zu überprüfen und versuchen, sinnvollen und vor allem korrekten Quelltext zu schreiben.
<div id="navigation_container"><p><span class="container_header">Navigation</span>
<ul>
ist völliger Unsinn und wird vom Firefox entsprechend chaotisch umgesetzt.
Orientiere Dich an dem Beispiel http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm.
freundliche Grüße
Ingo
hallo,
ich möchte einen layer zwischen
#navigation_container und
#features_container
Der steht doch schon da und heißt #content_container
der die ganze, verfügbare breite einnimmt
Das tut er bereits. Du mußt bloß genügend Sachen hineinschreiben. Und vielleicht das float weglassen und auch text-align nicht auf mittig setzen.
Grüße aus Berlin
Christoph S.
Hi!
Ich komm beim layouten auch nicht, brauche aber keine diesbezügliche weitere Hilfe, ich sehe das eher als normal an...
Gruß aus Iserlohn
Martin *SCNR*