RedDevil210
Neues Mitglied
Hi!
Ich möchte zuerst mal vorausschicken dass ich absulter Anfänger bin was CSS und HTML betrifft - habt also bitte etwas Verständnis.
Nun zu meinem Problem:
Ich möchte dass der Hintergrund "mitwächst" mit dem Contain, nur leider gelingt mir das nicht wirklich. Hab das über Faux Columns gelöst und auch ein Clear eingefügt - nur funktioniert es trotzdem nicht richtig. Kann mir vielleicht jemand sagen, was ich falsch gemacht habe und wie es richtig gehört? Diese Problem habe ich aber nur im Firefox. Im IE sieht es besser aus, obwohl da trotzdem eine Strich quer durchgeht.
Damit ihr besser versteht was ich meine, poste ich hier sowohl meinen HTML-, CSS-Code und den Link zu meinem Entwurf.
Hoffe ihr könnt mir da weiterhelfen.
Danke, LG RedDevil210
Hobbyfotograf Franz Fletzberger
Ich möchte zuerst mal vorausschicken dass ich absulter Anfänger bin was CSS und HTML betrifft - habt also bitte etwas Verständnis.
Nun zu meinem Problem:
Ich möchte dass der Hintergrund "mitwächst" mit dem Contain, nur leider gelingt mir das nicht wirklich. Hab das über Faux Columns gelöst und auch ein Clear eingefügt - nur funktioniert es trotzdem nicht richtig. Kann mir vielleicht jemand sagen, was ich falsch gemacht habe und wie es richtig gehört? Diese Problem habe ich aber nur im Firefox. Im IE sieht es besser aus, obwohl da trotzdem eine Strich quer durchgeht.
Damit ihr besser versteht was ich meine, poste ich hier sowohl meinen HTML-, CSS-Code und den Link zu meinem Entwurf.
Hoffe ihr könnt mir da weiterhelfen.
Danke, LG RedDevil210
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Hobbyfotograf Franz Fletzberger</title>
<meta name="generator" content=
"HTML Tidy, see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<meta content=
"naturfotografie,makrofotgrafie,makro,makrofoto,naturfoto,natur,fotos,bilder,insekten,ziesel, schmetterling"
name="Keywords" />
<meta content=
"Auf der Seite von Hobbyfotograf Franz Fletzberger erwarten Sie Naturaufnahmen aus Österreich."
name="Description" />
<meta content="Harald Fletzberger" name="Author" />
<meta content="Harald Fletzberger" name="Publisher" />
<meta content="Franz Fletzberger" name="Copyright" />
<meta content="DE" name="Content-language" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
<div id="content">
<p>eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed deirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sedeirmod tempor invidunt ut labore et dolore magna
aliquyam erat, seirmod tempor invidunt ut labore et dolore magna
aliquyam erateirmod tempor invidunt ut labore et dolore magna
aliquyam erateirmod tempor invidunt ut labore et dolore magna
aliquyam erat, eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos etsed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et, sed diam voluptua. At vero eos et
accusam et justeeirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos etirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo dueirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos eto dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, seirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo deirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diameirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos etuo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos eted diam voluptua. At vero eos eto duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos eted diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos etiam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos etdolores et ea rebum. Stet
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et</p>
</div>
<div id="left">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
<div class="clear_bott" />
</div>
<div id="footer">
<p>© 2009 by Harald Fletzberger</p>
</div>
<div class="clear_bott" />
</div>
</body>
</html>
HTML:
* {
border:0 none;
margin:0;
padding:0;
}
html, body {
height:100%;
}
html {
background:#a3907c url(images/body_bg.gif) repeat-x scroll 0 0;
color:#ffffff;
font-family:arial,sans-serif;
font-size:100%;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
text-align:center;
}
#wrapper {
background:#ffffff url(images/body2_bg.png) repeat-y 50% 0;
min-height:100%;
margin:0 auto;
text-align:left;
width:990px;
}
ul#nav {
height: 210px;
background:url(images/header_bg.jpg) repeat scroll 0 0;
list-style: none;
position:relative;
padding-left:430px;
}
ul#nav li {
display:block;
width:109px;
float:left;
margin-top:0px;
color:yellow;
font-weight:normal;
text-decoration:none;
text-align:center;
line-height:44px;
background:url(images/nav_home.png)
}
ul#nav a {
display:block;
width:109px;
margin-top:0px;
color:yellow;
font-weight:normal;
text-decoration:none;
text-align:center;
line-height:44px;
}
ul#nav li a:hover, ul#nav li a:active {
color:#f8b356;
font-weight:bold;
}
#left{
color:#ffffff;
padding:20px 0 0;
width:244px;
display:inline;
float:left;
}
#content{
display:inline;
float:right;
position:relative;
padding:20px 0 0;
width:735px;
}
#footer{
background:url(images/footer_bg.png) repeat scroll 0 0;
color:#ffffff;
margin:0 auto 0;
padding:180px 0 10px 0;
text-align:center;
width:990px;
clear:both;
position:relative;
}
.clear {
clear:both;
font-size:0px;
height:0px;
line-height:0px;
}
.clear_bott {
clear:both;
font-size:0px;
height:0px;
line-height:0px;
}