Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Menügrafik rutscht nicht mit (DIV formatierungs Fehler!?)

Antwort erstellen

Menügrafik rutscht nicht mit (DIV formatierungs Fehler!?)

Beitragvon pixeldreher » 26.04.2007, 19:31

Servus,
ich bin zwar noch ziemlich neu hier im Forum, beschäftige mich allerdings seit nun 4 Wochen mit Joomla und aus diesem Grund auch seit neusten mit CSS. Trotz mehrerer gelesener Bücher über Joomla und ein wenig CSS bin ich nun an meinem ersten eigenen Templatebau an einer Stelle stecken geblieben.

Es geht darum, das ich ein Menü haben möchte ( gleiches gilt für den "Haupt" bzw. Contentbereich), das in 3 Bereiche aufgeteilt ist. Der erste Bereich ist eine Grafik die ständig dort stehen beleiben soll. Der direkt darunter liegende Bereich soll sich der Menülänge anpassen und der 3 und in diesem Fall für mich entscheidende Bereich soll sich immer der Länge des Menüs anpassen und sich an die Grafik im Bereich 2 anschließen.

Um es mal deutschlich zu machen:

1. TOP Navigationsgrafik (bleibt stehen)
2. Navitagtion mit hinterlegter Backgroundgrafik (passt sich der Länge des Menüs an)
3. FOOT Navigationsgrafik (beginnt direkt am Ende des jeweils angepassten Menüs, also von der länger her nach)

Um meinen durch Dreamweaver 8 erstellten Code euch einmal zu zeigen habe ich ihn hier hinterlegt:


PHP-Code:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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">
<title><?php echo $mosConfig_sitename; ?></title>
<meta **********="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php include ("includes/metadata.php"); ?>
<?php include_once ("editor/editor.php"); ?>
<script language="JavaScript" type="text/javascript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();} MM_reloadPage(true);//--></script>
<?php initEditor(); ?>

<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:95px;
background-image: url(templates/power_bullys/images/header.png);
}
#Layer2 {
position:absolute;
left:0px;
top:95px;
width:154px;
height:44px;
background-image: url(templates/power_bullys/images/navi_01.png);
}
#Layer3 {
left:0px;
position:absolute;
top:139px;
width:154px;
background-image: url(templates/power_bullys/images/navi_02.png);
background-repeat : repeat-y;

}
#Layer4 {
left:0px;
top:424px;
position:absolute;
width:154px;
height:19px;
background-image: url(templates/power_bullys/images/navi_04.png);
background-position:bottom;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

th {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.bodystyle {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.small {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
}


.medium {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.big {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
}

.xbig {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
}

.expanded {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: 2px;
}

.justified {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: justify;
}

.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}

.box1 {
padding: 3px;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
font-style: italic;
word-spacing: 2pt;
padding: 3px;
border-width: thin;
border-style: solid;
}
#Layer5 {
position:absolute;
left:160px;
top:102px;
width:640px;
height:20px;
background-image:url(templates/power_bullys/images/content_01.png)
}
#Layer6 {
position:absolute;
left:160px;
top:122px;
width:640px;
height:544px;
background-image:url(templates/power_bullys/images/content_02.png)
}
#Layer7 {
position:absolute;
left:160px;
top:666px;
width:640px;
height:36px;
background-image:url(templates/power_bullys/images/content_03.png)
}
#Layer8 {
position:absolute;
left:173px;
top:128px;
width:609px;
height:536px;
}
-->
</style>
<body bgcolor="#d3e6ea">

<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3">
<?php mosLoadModules ( 'left' ); ?>
</div>
<div id="Layer4"></div>
<div id="Layer5"><span class="pathway">
<?php include "pathway.php"; ?>
</span></div>
<div id="Layer6">
</div>
<div id="Layer7"></div>
<div id="Layer8"><?php include ("mainbody.php"); ?></div>
</body>
</html>

Es wäre schön wenn Ihr mir dabei helfen könntet da es für mich wirklich eine im Moment zumindest große Hürde beim erstellen meines ersten Templates ist. Bitte zieht nicht über den eventuell schlechten Quellcode her - ich bin noch am Ausprobieren und am lernen. Deshalb benötige ich ja auch eure Hilfe. Falls jemand bereit sein sollte mir eventuell auch noch über ICQ helfen zu wollen (auch falls ich weitere Fragen habe) dann würde ich mich freuen wenn ihr euch mal melden würdet unter der Nummer: 106-185-896
Nickname: Pixeldreher

Vielen dank für Eure Hilfe schon im voraus, André
pixeldreher
neu hier
 
Beiträge: 2
Registriert: 08.03.2007, 20:31
Wohnort: Leipzig
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Menügrafik rutscht nicht mit (DIV formatierungs Fehler!?)"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de