Frage stellen
seit Stunden versuche ich vergeblich, einen Text über zwei Hintergrundgrafiken zu legen.
Leider will es mir nicht gelingen, diesen Text richtig zu positionieren.
Nun habe ich schon überall gestöbert - kann die Hilfen aber einfach nicht
umsetzten.
Ich wäre sehr dankbar, wenn mir jemand mit dem passenden Code weiterhelfen könnte.
Gruß Mira
Hier die Testseite:
http://freenet-homepage.de/maler-rauschmaier/testtest.html
Oben links möchte ich etwas reinschreiben und unten rechts in die Fußleiste.
... und noch der Code ...
- Code: Alles auswählen
<!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">
<title>
testseite</title>
<link href="rauschmaier.css" rel="stylesheet" type="text/css"></head>
<body>
<table width="920" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="920" height="210" colspan="3" class="kastenkontakt"><img src="images/logo.jpg" alt="Logo Maler Rauschmaier" width="270" height="210"><img src="images/referenzen_header.jpg" alt="Referenzen Maler Rauschmaier" width="430" height="210"></td>
</tr>
<tr>
<td colspan="3" width="920" class="navigationsgrafik">
<ul id="navigation">
<li id="start"><a href="index.html">Startseite</a></li>
<li id="referenzen"><a href="referenzen.html">Referenzen</a></li>
<li id="partner"><a href="partner.html">Partner</a></li>
</ul> </td>
</tr>
<tr>
<td style="vertical-align:top" width="150" bgcolor="#f4f4f4" class="malergrafik">
<ul id="menu">
<li id="leistungen">Leistungen</li>
<li id="wandgestaltung"><a href="wandgestaltung.html">Wandgestaltung</a></li>
<li id="malerarbeiten"><a href="malerarbeiten.html">Malerarbeiten</a></li>
<li id="tapezierarbeiten"><a href="tapezierarbeiten.html">Tapezierarbeiten</a></li>
<li id="innenputze"><a href="innenputze.html">Innenputze</a></li>
<li id="bodenbelaege"><a href="bodenbelaege.html">Bodenbeläge</a></li>
<li id="lackieren"><a href="lackieren.html">Lackieren</a></li>
<li id="fassadengestaltung"><a href="fassadengestaltung.html">Fassadengestaltung</a></li>
<li id="waermedaemmung"><a href="waermedaemmung.html">Wärmedämmung</a></li>
<li id="geruestbau"><a href="geruestbaum.html">Gerüstbau</a></li> </td>
<td width="770" colspan="2" class="td">
</td>
</tr>
<tr>
<td width="920" class="fussleistengrafik" colspan="3"><ul id="fussleiste">
<li id="impressum"><a href="impressum.html">Impressum</a></li>
</ul></td>
</tr>
</table>
</body>
</html>
- Code: Alles auswählen
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/hintergrund2.gif);
background-repeat: repeat-y;
background-position: center;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.navigationsgrafik {
background-image:url(images/kopfleiste_grau_470x31.gif);
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
}
ul#navigation {
list-style: none;
margin:0px;
padding:0px;
}
.kastenkontakt {
background-image: url(images/farbkleckse.jpg);
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 0px;
}
ul#navigation li {
list-style: none;
float:left;
}
li#start a {
margin:0px;
padding: 0px;
width: 150px;
height: 26px;
display: block;
background-image: url(images/button_startseite.gif);
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#start a:hover {
background-image: url(images/hover_button.gif);
background-repeat: no-repeat;
font-weight: bold;
}
li#start a:active {
background-image: url(images/hover_button.gif);
background-repeat: no-repeat;
font-weight: bold;
}
li#referenzen a {
list-style: none;
width: 150px;
height: 26px;
display: block;
background-image: url(images/button_referenzen.gif);
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#referenzen a:hover {
background: url(images/hover_button.gif) no-repeat;
font-weight: bold;
}
li#referenzen a:active {
background: url(images/hover_button.gif) no-repeat;
font-weight: bold;
}
li#partner a {
background: url(images/button_partner.gif) no-repeat;
list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
height: 26px;
display: block;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#partner a:hover {
background: url(images/hover_button.gif) no-repeat;
font-weight: bold;
}
li#partner a:active {
background: url(images/hover_button.gif) no-repeat;
font-weight: bold;
}
ul#menu {
list-style: none;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size:13px;
}
li#leistungen {
background: url(images/button_leistungen.jpg) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
letter-spacing: 2px;
}
li#wandgestaltung a {
background: url(images/test26.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#wandgestaltung a:hover {
background:url(images/hover_button_dunkelblau.gif) no-repeat;
font-weight: bold;
}
li#wandgestaltung a:active {
background: url(images/hover_button_dunkelblau.gif) no-repeat;
font-weight: bold;
}
li#malerarbeiten a {
background: url(images/button_mittelblau.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#malerarbeiten a:hover {
background:url(images/hover_button_mittelblau.gif) no-repeat;
font-weight: bold;
}
li#malerarbeiten a:active {
background: url(images/hover_button_mittelblau.gif) no-repeat;
font-weight: bold;
}
li#tapezierarbeiten a {
background: url(images/button_petrol.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#tapezierarbeiten a:hover {
background:url(images/hover_button_petrol.gif) no-repeat;
font-weight: bold;
}
li#tapezierarbeiten a:active {
background: url(images/hover_button_petrol.gif) no-repeat;
font-weight: bold;
}
li#innenputze a {
background: url(images/button_dunkelgruen.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#innenputze a:hover {
background:url(images/hover_button_dunkelgruen.gif) no-repeat;
font-weight: bold;
}
li#innenputze a:active {
background: url(images/hover_button_dunkelgruen.gif) no-repeat;
font-weight: bold;
}
li#bodenbelaege a {
background: url(images/button_hellgruen.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#bodenbelaege a:hover {
background:url(images/hover_button_hellgruen.gif) no-repeat;
font-weight: bold;
}
li#bodenbelaege a:active {
background: url(images/hover_button_hellgruen.gif) no-repeat;
font-weight: bold;
}
li#lackieren a {
background: url(images/button_gelb.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#lackieren a:hover {
background:url(images/hover_button_gelb.gif) no-repeat;
font-weight: bold;
}
li#lackieren a:active {
background: url(images/hover_button_gelb.gif) no-repeat;
font-weight: bold;
}
li#fassadengestaltung a {
background: url(images/botton_orange.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#fassadengestaltung a:hover {
background:url(images/hover_button_orange.gif) no-repeat;
font-weight: bold;
}
li#fassadengestaltung a:active {
background: url(images/hover_button_orange.gif) no-repeat;
font-weight: bold;
}
li#waermedaemmung a {
background: url(images/button_hellrot.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#waermedaemmung a:hover {
background:url(images/hover_button_hellrot.gif) no-repeat;
font-weight: bold;
}
li#waermedaemmung a:active {
background: url(images/hover_button_hellrot.gif) no-repeat;
font-weight: bold;
}
li#geruestbau a {
background: url(images/button_rot.gif) no-repeat;
width: 150x;
height: 26px;
display: block;
outline: none;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#geruestbau a:hover {
background:url(images/hover_button_rot.gif) no-repeat;
font-weight: bold;
}
li#geruestbau a:active {
background: url(images/hover_button_rot.gif) no-repeat;
font-weight: bold;
}
.inhaltseite_text {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: left;
padding: 1px;
margin: 1px;
}
.fussleistengrafik {
background-image:url(images/fussleiste_links.gif);
background-repeat: no-repeat;
background-position: bottom left;
width: 770px;
height: 26px;
font-size: 11px;
line-height: 25px;
color: #000000;
text-align: left;
}
ul#fussleiste {
list-style: none;
margin:0px;
padding:0px;
}
ul#fussleiste li {
list-style: none;
float: right;
}
li#impressum a {
margin:0px;
padding: 0px;
width: 150px;
height: 26px;
display: block;
background-image:url(images/button_impressum.gif);
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
font-size: 13px;
font-weight: normal;
}
li#impressum a:hover {
background-image: url(images/hover_button_impressum.gif);
background-repeat: no-repeat;
font-weight: bold;
}
li#impressum a:active {
background-image: url(images/hover_button_impressum.gif);
background-repeat: no-repeat;
font-weight: bold;
}
.malergrafik {
background-image: url(images/maler_grafik.gif);
background-repeat: no-repeat;
background-position: center bottom;
padding: 0px;
bottom: auto;
margin: 0px;
height: 570px;
}
