• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

wo ist der Fehler ?

T

tomcux

Neues Mitglied
Hallo,

irgendwie trete ich auf der Stelle. Ich sehe mein Fehler einfach nicht. Das Ziel ist, das der Text 1 und der Text 2 nicht am Rand klebt, sowie der Footer den Abschluss bilden soll. Wer kann mir einen Tipp geben.

Danke für Eure Zeit.
Tom

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Das ist ein Test </title>
</head>
<style type="text/css">


html {
background-image:url(http://www.ceno.com/privat/html/images/bg.png);
background-repeat: repeat-x;
font-family: 'Open Sans Condensed', sans-serif;
}
.logo {
margin-top: -80px;
}

h1 {

margin-left: 35px;
text-shadow: 2px 2px 4px grey;
}


#navi {
height: 24px;
text-align: right;
padding-right: 220px;
}

#navi li {
display: inline;
}

#navi a {
display: inline-block;
background-color:inherit;
color: #fff;
line-height: 29px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;
font-family: Arial;
}

#navi a:hover {
background-color: #60a151;
}

.aktuell {
background-color: #60a151; /*nur der Link 01 */
}

#wrapper {
font-size: 20px;
background-color: #F8F8F8;
background-image:url(http://www.ceno.com/privat/html/images/bg-wasser.jpg);
background-repeat: no-repeat;
background-size: 100% 100%; /*Hintergrundbild auf ganzer Fläche */
border-radius: 5px;
box-shadow: 2px 2px 4px grey;
width: 940px;
height: 1060px;
margin-top: 119px;
margin-left: auto;
margin-right: auto;
}

.wasserbild {
border-style: solid;
border-width: 10px;
border-color: white;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 35px;
float: left;

}

.fliege {
border-style: solid;
border-width: 10px;
border-color: grey;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 83px;


}
p.1tertext {
margin-right: 20px;


}
p.2tertext {
clear: both;
margin-right: 20px;

}

footer {

background-image:url(http://www.ceno.com/privat/html/images/footer.png);
background-repeat: repeat-x;
}

footer a {
display: inline-block;
background-color:inherit;
color: #fff;
text-shadow: 1px 1px 2px grey;
line-height: 59px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;

}

footer li {
display: inline;
}

.footerliste {
margin-left: 180px;
margin-right: auto;
margin-bottom: 20px;
}


</style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<body>

<nav id="navi">
<ul>
<li class="aktuell"><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
<li><a href="#">Link 06</a></li>
</ul>
</nav>

<div id="wrapper">
<img class="logo" src="http://www.ceno.com/privat/html/images/logo.png" alt="jetzt wird es nass" title="wo sind die Handtücher">


<h1>Hier läuft das Wasser </h1>

<p class="1tertext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<img class="wasserbild" src="http://www.ceno.com/privat/html/images/wasser.gif" width="336" height="600">





<img class="fliege" src="http://www.ceno.com/privat/html/images/fliege.jpg">

<p class="2tertext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



<footer>
<ul>
<li class="footerliste"><a href="#">Info</a></li>
<li><a href="#">Link 08</a></li>
<li><a href="#">Link 09</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
</ul>
</div>
</footer>


</body>
</html>
 
Werbung:
Hallo.

Also zuerst einmal solltest du dein CSS in den <head> integrieren.

Dann die CSS Grundlagen: Klassennamen dürfen nicht mit einer Zahl beginnen.
Meinst du mit "am Rand klebt" auf der linken oder der rechten Seite?

Rechts ist es ja in Ordnung, und links dann eben noch ein margin.left.

Gruss
Elroy
 
Danke Elroy. Ich "arbeite" mit Subline und hätte damit gerechnet, dass der Fehler dort angezeigt wird...
Wenn Du mir jetzt noch verraten könntest, wie ich den Text2 unter das Bild 2 (fliege.jpg) bekomme, wäre ich glücklich...

Danke & Gruß
Tom
 
Werbung:
Aber gerne.

Nimm das clear: both aus deinen Text2 raus und gib es deinem footer.
Eventuell dann noch mit margin die ganze Sache ein wenig anpassen.

Gruss
Elroy
 
vielen Dank. Ich hatte nach gefühlten 2 Stunden auch heraus bekommen :(
Wie gehst Du an so eine Fehlersuche ran, siehst Du es auf den ersten Blick, oder schaust Du Dir die Seite mit Firebug oder ähnlichem an ? Hast Du vielleicht einen Tipp, wie man als Anfänger bei der Fehlersuche schneller vorwärts kommt ?

Danke nochmals & einen schönen Rest Sonntag!
Tom
 
Ich verwende Firebug und der Rest sind dann Erfahrungswerte.
Das kommt mit der Zeit, als Anfänger kann man da schon mal etwas hängen bleiben.

Gruss
Elroy
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben