02.05.2008, 21:29
Ich hab doch noch ein Problem.
Seite:
http://www.llcp.at/hptest/test.html
Links noch nicht klickbar!
Ich habe es gut hinbekommen, Menü und Text zu positionieren. Alles war ok. Allerdings wollte ich den Hintergrund in Teilbilder zerlegen, da ich 1. kein so großes Bild wollte (Modemuser sehen zumindest z.B. 1 Teilbild während es lädt statt gar nix) und 2. muss ich den Hintergrund, der hinter dem Content-Text liegt, dunkler machen. Lädt man die Seite, wird der normale Content.jpg geladen (die Teildatei)...wird Text angezeigt, wird die dunklere Content2.jpg geladen, damit der Text besser lesbar ist.
Das große Gesamtbild habe ich also in top, menu, content, right und foot zerlegt (oben, links, mittig, rechts und unten).
Mittels divs habe ich die Teilbilder zusammengefügt. Alles klappte. Allerdings brauche ich ja noch extra Positionsangaben, wo der Menütext und der Contenttext hin soll. Musste noch zwei divs anlegen.
Mein Problem: nun werden right und foot nicht mehr angezeigt. Ich finde leider den Fehler nicht, woran es liegt.
Lieber Prm, könntest du bitte schauen, wie die divs gehören? Ich habe mit der Reihenfolge bzw. Verschachtelung Probleme, wann ein div offen bleiben muss, wann div geschlossen wird.
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">
<head>
<meta name="author" content="SeelenPuls">
<meta name="publisher" content="SeelenPuls">
<meta name="copyright" content="SeelenPuls">
<meta name="description" content="SeelenPuls">
<meta name="keywords" content="SeelenPuls">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SeelenPuls</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheettest.css">
<style type="text/css">
</style>
</head>
<body>
<div id="center">
<div id="Menubackground"></div>
<div id="Menu">
<a href="anfang.htm" title="Startseite">Anfang</a><br>
<a href="neues.php" title="Neuigkeiten, Archiv & kommende Alben">Neues</a><br>
<a href="biographie.htm" title="Das Projekt, ich, Equipment & Interviews">Biographie</a><br>
<a href="diskographie.htm" title="Diskographie, Lyrik, Mp3s & Reviews">Diskographie</a><br>
<a href="downloads.htm" title="Downloads">Downloads</a><br>
<a href="poesie.htm" title="Gedichte">Poesie</a><br>
<a href="photographie.htm" title="Photogalerie">Photographie</a><br>
<a href="links.htm" title="Links">Links</a><br>
<a href="http://seelenpulsforum.llcp.at" target="newwindow" title="Forum">Forum</a><br>
<a href="gaestebuch11.php" title="Gästebuch">Gästebuch</a><br>
<a href="kontakt.php" title="Kontakt">Kontakt</a><br>
<a href="nachwort.htm" title="Danksagung & Grüße">Nachwort</a>
</div>
<div id="Textbackground"></div>
<div id="Text">
</div>
<div id="Right">
</div>
<div id="Footbackground"></div>
<div id="Foot">
</div>
</div>
</body>
</html>
CSS:
* { padding: 0; margin: 0; }
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
scrollbar-face-color: #808080;
scrollbar-highlight-color: #808080;
scrollbar-3dlight-color: #808080;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
}
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 960px;
height: 572px;
position: absolute;
top: 50%;
left: 50%;
background-image: url(img/top.jpg);
background-repeat: no-repeat;
margin-left: -480px;
margin-top: -286px;
overflow: auto;
}
#Menubackground
{
left: 0px;
top: 229px;
height: 321px;
width: 168px;
position: absolute;
overflow: auto;
background-image: url(img/left.jpg);
background-repeat: no-repeat;
}
#Menu
{
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
line-height: 20px;
color: #000000;
left: 0px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Menu A
{
color: #808080;
background-color: transparent;
text-decoration: none;
}
#Menu A:VISITED
{
color: #808080;
background-color:
transparent;
}
#Menu A:ACTIVE
{
color: #808080;
background-color: transparent;
}
#Menu A:HOVER
{
color: #ffffff;
background-color:
transparent;
font-weight:bold;
}
#Menu HR
{
color: #808080;
background-color: transparent;
}
#Textbackground
{
background-image: url(img/content.jpg);
background-repeat: no-repeat;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
overflow: auto;
#Text
{
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
color: #ffffff;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Footbackground
{
background-image: url(img/foot.jpg);
background-repeat: no-repeat;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
#Foot
{
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
=========
Wär super, wenn du mir noch helfen könntest.
Seite:
http://www.llcp.at/hptest/test.html
Links noch nicht klickbar!
Ich habe es gut hinbekommen, Menü und Text zu positionieren. Alles war ok. Allerdings wollte ich den Hintergrund in Teilbilder zerlegen, da ich 1. kein so großes Bild wollte (Modemuser sehen zumindest z.B. 1 Teilbild während es lädt statt gar nix) und 2. muss ich den Hintergrund, der hinter dem Content-Text liegt, dunkler machen. Lädt man die Seite, wird der normale Content.jpg geladen (die Teildatei)...wird Text angezeigt, wird die dunklere Content2.jpg geladen, damit der Text besser lesbar ist.
Das große Gesamtbild habe ich also in top, menu, content, right und foot zerlegt (oben, links, mittig, rechts und unten).
Mittels divs habe ich die Teilbilder zusammengefügt. Alles klappte. Allerdings brauche ich ja noch extra Positionsangaben, wo der Menütext und der Contenttext hin soll. Musste noch zwei divs anlegen.
Mein Problem: nun werden right und foot nicht mehr angezeigt. Ich finde leider den Fehler nicht, woran es liegt.
Lieber Prm, könntest du bitte schauen, wie die divs gehören? Ich habe mit der Reihenfolge bzw. Verschachtelung Probleme, wann ein div offen bleiben muss, wann div geschlossen wird.
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">
<head>
<meta name="author" content="SeelenPuls">
<meta name="publisher" content="SeelenPuls">
<meta name="copyright" content="SeelenPuls">
<meta name="description" content="SeelenPuls">
<meta name="keywords" content="SeelenPuls">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SeelenPuls</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheettest.css">
<style type="text/css">
</style>
</head>
<body>
<div id="center">
<div id="Menubackground"></div>
<div id="Menu">
<a href="anfang.htm" title="Startseite">Anfang</a><br>
<a href="neues.php" title="Neuigkeiten, Archiv & kommende Alben">Neues</a><br>
<a href="biographie.htm" title="Das Projekt, ich, Equipment & Interviews">Biographie</a><br>
<a href="diskographie.htm" title="Diskographie, Lyrik, Mp3s & Reviews">Diskographie</a><br>
<a href="downloads.htm" title="Downloads">Downloads</a><br>
<a href="poesie.htm" title="Gedichte">Poesie</a><br>
<a href="photographie.htm" title="Photogalerie">Photographie</a><br>
<a href="links.htm" title="Links">Links</a><br>
<a href="http://seelenpulsforum.llcp.at" target="newwindow" title="Forum">Forum</a><br>
<a href="gaestebuch11.php" title="Gästebuch">Gästebuch</a><br>
<a href="kontakt.php" title="Kontakt">Kontakt</a><br>
<a href="nachwort.htm" title="Danksagung & Grüße">Nachwort</a>
</div>
<div id="Textbackground"></div>
<div id="Text">
</div>
<div id="Right">
</div>
<div id="Footbackground"></div>
<div id="Foot">
</div>
</div>
</body>
</html>
CSS:
* { padding: 0; margin: 0; }
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
scrollbar-face-color: #808080;
scrollbar-highlight-color: #808080;
scrollbar-3dlight-color: #808080;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
}
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 960px;
height: 572px;
position: absolute;
top: 50%;
left: 50%;
background-image: url(img/top.jpg);
background-repeat: no-repeat;
margin-left: -480px;
margin-top: -286px;
overflow: auto;
}
#Menubackground
{
left: 0px;
top: 229px;
height: 321px;
width: 168px;
position: absolute;
overflow: auto;
background-image: url(img/left.jpg);
background-repeat: no-repeat;
}
#Menu
{
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
line-height: 20px;
color: #000000;
left: 0px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Menu A
{
color: #808080;
background-color: transparent;
text-decoration: none;
}
#Menu A:VISITED
{
color: #808080;
background-color:
transparent;
}
#Menu A:ACTIVE
{
color: #808080;
background-color: transparent;
}
#Menu A:HOVER
{
color: #ffffff;
background-color:
transparent;
font-weight:bold;
}
#Menu HR
{
color: #808080;
background-color: transparent;
}
#Textbackground
{
background-image: url(img/content.jpg);
background-repeat: no-repeat;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
overflow: auto;
#Text
{
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
color: #ffffff;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Footbackground
{
background-image: url(img/foot.jpg);
background-repeat: no-repeat;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
#Foot
{
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
=========
Wär super, wenn du mir noch helfen könntest.
![[-]](https://forum.juergens-workshops.de/images/collapse.png)