Ranger 1281
Mitglied
Hi All,
ich möchte folgendes realisieren, finde aber keine Lösung.
Ich möchte eine Site mit bestimmten festen, sich immer wiederholenden, Elementen erstellen. Diese Site soll NICHT mit Frames realisiert werden.
Ich es möglich den Inhalt des "Mainbereiches" mittels Link in ein vorgefertigtes Layout einzubinden (in "Boxmain"), so dass ich im Falle einer Veränderung des Layouts nur eine Datei ändern muß.
----------------------------
Hier der Quelltext:
index.html:
---------------------
externes CSS:
style.css:
------------------------------
Ich danke Euch bereits jetzt für Eure Tipps
Ralf
ich möchte folgendes realisieren, finde aber keine Lösung.
Ich möchte eine Site mit bestimmten festen, sich immer wiederholenden, Elementen erstellen. Diese Site soll NICHT mit Frames realisiert werden.
Ich es möglich den Inhalt des "Mainbereiches" mittels Link in ein vorgefertigtes Layout einzubinden (in "Boxmain"), so dass ich im Falle einer Veränderung des Layouts nur eine Datei ändern muß.
----------------------------
Hier der Quelltext:
index.html:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Zentriert mit menuleft</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Ralf Schepp" />
<meta name="robots" content="all" />
<meta name="language" content="de" />
<meta name="DC.rights" content="Raf Schepp" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="date" content="23.02.2010" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/css; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/javascript; charset=iso-8859-1" />
</head>
<body>
<div id="boxtop"><img src="img/img_top_1024x200.jpg" alt="Oberes Banner" border="0" width="1024" height="200"></div>
<div id="leftmenu"><img src="img/menu_left_200x568.jpg" alt="Navigation" border="0" width="200" height="568" usemap="#menuleft"></div>
<map name="menuleft">
<area shape="rect" coords="0,0,200,40" href="index.html">
<area shape="rect" coords="0,40,200,80" href="firma.html">
<area shape="rect" coords="0,80,200,120" href="leistungen.html">
<area shape="rect" coords="0,120,200,160" href="impressionen.html">
<area shape="rect" coords="0,160,200,200" href="galerie.html">
<area shape="rect" coords="0,200,200,240" href="kontakt.html">
<area shape="rect" coords="0,280,200,320" href="impressum.html">
</map>
<div id="boxmain"><img src="img/main_824x568.jpg" alt="" border="0" width="824" height="568"></div>
</body>
</html>
---------------------
externes CSS:
style.css:
Code:
body { background-color: #ffffff;}
a:link { color: #0000ff;}
a:visited { color: #00ff00;}
a:active { color: #0000ff;}
a:hover { color: #0000ff; text-decoration: underline;}
h1 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 150%; font-weight: bold;}
h2 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 140%; font-weight: bold;}
h3 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 130%; font-weight: bold;}
h4 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 120%; font-weight: bold;}
h5 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 110%; font-weight: bold;}
p { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 100%; font-weight: bold;}
#box1 { position: fixed; left: 0px; top: 0px; z-index: 7;} /* für den oberen Dummy, falls nötig*/
#boxtop { position: fixed; left: 50%; margin-left: -512px; top: 5px; z-index: 7;} /*für das obere Banner*/
#menu { position: fixed; left: 50%; margin-left: -512px; top: 205px; z-index: 7;} /*horizontales Menu, falls vorhanden*/
#leftmenu { position: fixed; left: 50%; margin-left: -512px; top: 205px; z-index: 7;} /*linkes Menu*/
#boxmain { position: fixed; left: 50%; margin-left: -312px; top: 205px; z-index: 1;} /* BG Hauptbereich*/
#mainmenu { position: absolute; left: 125px; top: 45px; z-index: 2;} /* Menu im Hauptbereich, falls vorhanden*/
#h1 { position: absolute; left: 50%; margin-left: -250px; top: 250px; width: 900px; z-index: 2;} /*Überschrift*/
#main { position: absolute; left: 175px; top: 2050px; width: 650px;} /*zusätzliches Mainelement, falls vorhanden*/
#text1 { position: absolute; left: 50px; top: 35px; width: 650px; text-align: justify; z-index: 2;} /*Haupttext*/
#pic1 { position: fixed; left: 0px; top: 30px;} /*Bild*/
#pic2 { position: absolute; left: 650px; top: 500px; z-index: 3;} /*Bild*/
#pic3 { float: right; top: 350px; z-index: 3;} /*Bild*/
------------------------------
Ich danke Euch bereits jetzt für Eure Tipps
Ralf
Anhänge
Zuletzt bearbeitet: