body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 30px;
background-repeat:repeat-x;
background-position: 50% 0%;
background-attachment:fixed;
}
Füge unter background-attachment:fixed; einfach background-color: #FARBCODE hinzu, und ersetze #FARBCODE durch eine beliebige Farbe.
Ich versteh wirklich nur Bahnhof. Welcher Frame? Meinst du den grauen Balken ganz oben? Der muss weck oder wie?
Beschreib das mit dem Rahmen mal etwas genauer bitte. Meinst du den Schatten links und rechts bei der anderen Seite?
Bitte dieses Thema als gelöst markieren oder schliessen, da ich es nun selbst hinbekommen habe.
Hier die Lösung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
background: #383838;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
div {
font-family: Verdana;
font-size: 10pt;
}
p {
margin: 0px;
}
#clear {
clear: both;
}
#navbar-wrapper {
height: 44px;
margin-bottom: 2px;
width: 100%;
}
#navbar-l {
background: url(images/navbar-l.gif);
float: left;
height: 44px;
width: 0.2%;
}
#navbar-c {
background: url(images/navbar-c.gif);
float: left;
height: 44px;
text-align: center;
width: 99.6%;
}
#navbar-r {
background: url(images/navbar-r.gif);
float: left;
height: 44px;
width: 0.2%;
}
#navbar-content {
color: #ffffff;
font-weight: bold;
margin: 12px auto;
}
#body-wrapper {
margin: 0 auto;
width: 950px;
}
#body-t {
background: url(images/body-t.gif);
height: 28px;
width: 950px;
}
#body-m {
background: url(images/body-m.gif);
width: 950px;
}
#body-b {
background: url(images/body-b.gif);
height: 28px;
width: 950px;
}
#subnav {
color: #ffffff;
float: left;
margin-left: 15px;
width: 149px;
}
#content {
display: inline;
float: left;
margin-left: 16px;
width: 750px;
}
</style>
</head>
<body>
<div id="navbar-wrapper">
<div id="navbar-l"></div>
<div id="navbar-c">
<div id="navbar-content">
<p>Link 1 | Link 2 | Link 3 | Link 4 | Link 5</p>
</div>
</div>
<div id="navbar-r"></div>
</div>
<div id="body-wrapper">
<div id="body-t"></div>
<div id="body-m">
<div id="subnav">
<p>Subnav</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="clear"></div>
</div>
<div id="body-b"></div>
</div>
</body>
</html>Einfach die Grafiken durch unterschiedliche Farben ersetzen um das Resultat zu sehen und verstehen.
Danke für eure Hilfe (ironisch gemeint und ohne weiteren Kommentar).
threadi
Das Problem ist, dass die 2 Container subnav sowie content exakt nebeneinander sind und wie bereits erwähnt, ist bei subnav oben und unten ein Abstand von 20 Px, der designbedingt immer da sein muss dh. wenn der content so und so gross ist, muss subnav genau so gross sein, nur eben 20 Px Abstand haben oben und unten, da diese 2 Divs von einem Schein nach aussen (Photoshop) umgeben werden, rund herum. Wenn also subnav einfach nur oben 20 Px Abstand hat, und sich automatisch in der Höhe anpasst, wie es momentan der Fall ist, ist unter subnav noch 20 Px schatten zu sehen und dann nicht mehr, erst wieder am Ende von content, dazwischen ist kein Schatten nach aussen mehr.
Tutorials und etc. habe ich mir schon viele angesehen, doch keines verwendet ein ähnliches Design wie ich es verwende.
Grevas
Ich habe nur gehofft, dass jemand der sich mit CSS auskennt, meinen geposteten Code ansehen, analysieren und mir dann sagen kann, was ich anders machen muss bzw. mir einen Ansatz gibt. Für welchen Job sollte ich bitte bezahlt werden?
Ausserdem habe ich doch eine Basis gepostet und alles gut beschrieben. Diesen Post hättest du dir ruhig sparen können.
Ausserdem wartet man selten so lange auf Antworten wie hier, aber vl bin ich auch im falschen Forum für meine Frage, keine Ahnung, ich kenne es eben anders.
Dieses Thema kann man wohl als erledigt markieren, da sowieso niemand zu helfen scheint. Danke.
Kann mir niemand weiterhelfen?
So, nun habe ich das Tabellenlayout in ein CSS-Layout umgewandelt und nun habe ich ein Problem.
<!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=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
#clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
#navbar-wrap {
height: 44px;
margin-bottom: 10px;
width: 100%;
}
#navbar-l {
background: #300;
float: left;
height: 44px;
width: 0.2%;
}
#navbar-c {
background: #600;
float: left;
height: 44px;
text-align: center;
width: 99.6%;
}
#navbar-r {
background: #900;
float: left;
height: 44px;
width: 0.2%;
}
#body {
margin: 0 auto;
width: 950px;
}
#subnav-wrap {
float: left;
margin-top: 20px;
margin-bottom: 20px;
width: 170px;
}
#subnav-t {
background: #300;
height: 20px;
width: 170px;
}
#subnav-m {
background: #600;
height: 40px;
width: 170px;
}
#subnav-b {
background: #900;
height: 20px;
width: 170px;
}
#content-wrap {
float: left;
width: 780px;
}
#content-t {
background: #009;
height: 20px;
width: 780px;
}
#content-m {
background: #006;
height: 80px;
width: 780px;
}
#content-b {
background: #003;
height: 20px;
width: 780px;
}
-->
</style>
</head>
<body>
<div id="navbar-wrap">
<div id="navbar-l"> </div>
<div id="navbar-c"> </div>
<div id="navbar-r"> </div>
</div>
<div id="body">
<div id="subnav-wrap">
<div id="subnav-t"> </div>
<div id="subnav-m">
<p> </p>
</div>
<div id="subnav-b"> </div>
</div>
<div id="content-wrap">
<div id="content-t"> </div>
<div id="content-m">
<p> </p>
</div>
<div id="content-b"> </div>
</div>
</div>
</body>
</html>Ich will nun das was ich bis jetzt habe, flexibel gestalten d.h. so wie die Seite in diesem Beispiel aussieht, soll sie immer aussehen.
Leider ist es damit aber vorbei, sobald sub-nav-m oder content-m über mehr Inhalt verfügt bzw. eines dieser 2 DIVs mehr beinhaltet als das Andere.
Wie schaffe ich es, dass sub-nav-m und content-m zusammenspielen bzw. sich die DIVs miteinander ergänzen, sodass die Struktur nie verloren geht?
Das subnav soll einfach immer oben und unten 20px Abstand halten und subnav-m mit content-m in die Höhe mitwachsen.
Ich bitte um eure Hilfe.
Leider kann ich die Seite nicht online stellen. Screenshots hätte ich, aber auch diese kann ich leider nicht online stellen.
Ja, Tabellenlayouts sind outdated, aber ich schaffe es einfach nicht dieses Tabellenlayout 1:1 in ein CSS-Layout umzuwandeln. Ich scheitere schon am Navigationsbalken, da ich es nicht einmal schaffe, 3 Spalten mit 100% breite mit CSS zu erstellen.
Hallo!
Ich habe ein Tabellenlayout erstellt, da ich's mit CSS nicht wirklich hinkriege so wie ich das haben will und nun ist das Problem, dass der Mozilla Firefox 4 die Seite korrekt darstellt und der Internet Explorer 9 nicht.
<!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">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background:#383838;
margin:0px;
}
img {
border: 0px;
}
a.subnav:link {
color: #006ab1;
font-weight: normal;
text-decoration: none;
}
a.subnav:visited {
color: #006ab1;
font-weight: bold;
text-decoration: none;
}
a.subnav:hover {
color: #00a0dc;
font-weight: bold;
text-decoration: none;
}
a.subnav:active {
color: #006ab1;
font-weight: bold;
text-decoration: none;
}
#container {
position:absolute;
left:50%;
top:44px;
width:950px;
margin-left:-475px;
}
div.con {
padding-left:10px;
padding-right:10px;
}
td.navbar {
color:#c1c1c1;
font:bold 10pt Verdana;
text-align:center;
}
td.subnav {
color:#c1c1c1;
font:10pt Verdana;
}
//-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="44" width="4"><img id="new_01" src="images/img_01.png" width="4" height="44" alt="" /></td>
<td class="navbar" height="44" background="images/img_02.png"> </td>
<td height="44" width="4"><img id="new_03" src="images/img_03.png" width="4" height="44" alt="" /></td>
</tr>
</table>
<div id="container">
<table id="Tabelle_01" width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="4" nowrap="nowrap"></td>
<td width="2" nowrap="nowrap"></td>
<td width="164" nowrap="nowrap"></td>
<td width="774" nowrap="nowrap"></td>
<td width="2" nowrap="nowrap"></td>
<td width="4" nowrap="nowrap"></td>
<td></td>
</tr>
<tr>
<td colspan="6"><img id="new_04" src="images/img_04.png" width="950" height="2" alt="" /></td>
<td height="2" nowrap="nowrap"></td>
</tr>
<tr>
<td width="6" colspan="2" rowspan="6" nowrap="nowrap"></td>
<td rowspan="2"><img id="new_06" src="images/img_05.png" width="164" height="26" alt="" /></td>
<td><img id="new_07" src="images/img_06.png" width="774" height="11" alt="" /></td>
<td width="6" colspan="2" rowspan="6" nowrap="nowrap"></td>
<td height="11" nowrap="nowrap"></td>
</tr>
<tr>
<td valign="top" rowspan="3" background="images/img_07.png" width="774">
<div class="con">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</td>
<td height="15" nowrap="nowrap"></td>
</tr>
<tr>
<td valign="top" class="subnav" background="images/img_08.png" width="164"><div class="con"> </div></td>
<td nowrap="nowrap"></td>
</tr>
<tr>
<td rowspan="2"><img id="new_11" src="images/img_09.png" width="164" height="26" alt="" /></td>
<td height="15" nowrap="nowrap"></td>
</tr>
<tr>
<td><img id="new_12" src="images/img_10.png" width="774" height="11" alt="" /></td>
<td height="11" nowrap="nowrap"></td>
</tr>
<tr>
<td width="938" height="6" colspan="2" nowrap="nowrap"></td>
<td height="6" nowrap="nowrap"></td>
</tr>
</table>
</div>
</body>
</html>Was habe ich falsch gemacht?
Dann würde ich gerne wissen, ob es besser wäre, alles mit CSS zu machen anstatt mit einem Tabellenlayout und ob sich das mit CSS realisieren lässt? Im Prinzip das Tabellenlayout 1:1 in ein CSS-Layout umwandeln.
Ich habe einen Navigationsbalken oben, 100% breite und 44px höhe. Die Subnavigation sowie der Inhaltsbereich sind exakt 950px breit, soll allerdings dynamisch sein d.h. egal ob in der Subnavigation oder im Inhaltsbereich mehr Text oder was auch immer drin ist, es soll immer gleich aussehen, dynamisch eben.
Mfg
carcharias