• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Anfängerin braucht Hilfe:Layout - Navigation

A

anjaz

New member
Hallo!

Ich möchte eine Website erstellen und weiß nicht genau wie ich am besten anfange. Ich habe gehört, dass Frames nicht verwendet werden sollen.

Ich habe oben einen fixen bereich und unten einen fixen Bereich (Navigation). In der Mitte sollte es immer die neuen Seiten hineinladen wenn unten auf ein Link geklickt wird.

Ich hab es auch schon mit Layers versucht, aber diese werden in Firefox nicht richtig positioniert dargestellt.

Gibt es auch noch eine andere Möglichkeit das zu verwirklichen? Ohne Frames und iFrames?

lg anja
 
Moin!

Wenn alles "sauber" umgesetzt wird spricht nach wie vor nix gegen frames. "Moderner" wäre es, Seitenbestandteile (z. B. die Navigation) mit einer serverseitigen Sprache (wie z. B. PHP) einzubinden.

Ich verschieb das mal ins Allgemeine...

Ahoi - Pit
 
Hier ein paar argumente gegen Frames: Subotnik: Warum Frames out sind (und es schon immer waren...)

Fixe Bereiche werden mit position:fixed dargestellt.

Wenn du etwas probierst und es nur im IE funktioniert kannst du in 99% der Fälle davon ausgehen, dass du etwas falsch machst. Da die Positionierung im Prinzip in keinem Browser sich unterscheidet, nur der IE kann aber kein position:fixed, dafür gibt es dann workarounds mit Javascript oder du ignorierst es einfach. Soviel IE Benutzer gibt es eh nicht mehr.
 
Also hier mal ein Stück Quelltext:

Code: 
<style type="text/css">
  body {
	margin:0cm;
	background-image: url(bilder/hintergrund.gif);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	padding:0px;
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
<style type="text/css">
<!--
a:link {
	color: #C62306;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #C62306;
}
a:hover {
	text-decoration: none;
	color: #C62306;
}
a:active {
	text-decoration: none;
	color: #C62306;
}
-->
</style>
<style type="text/css">
html, body, textarea {
  
 
  scrollbar-base-color:#FFFFFF;
  scrollbar-3d-light-color:#FFFFFF;
  scrollbar-arrow-color:#C62306;
  scrollbar-darkshadow-color:#FFFFFF;
  scrollbar-face-color:#FFFFFF;
  scrollbar-highlight-color:#C62306;
  scrollbar-shadow-color:#C62306;
  scrollbar-track-color:#FFFFFF;
}
</style>
</head>

<body bgcolor="#CCCCCC">
<div id="studio" style="position:absolute; left:100px; top:410px; width:80px; height:80; z-index:3"><img src="bilder/links/studio.gif" name="studio" width="90" height="89" id="studio"></div>

<div id="nageldesign" style="position:absolute; left:193px; top:410px; width:80; height:80; z-index:5"><img src="bilder/links/nageldesign.gif" name="nageldesign" width="90" height="90" id="nageldesign"></div>

<div id="uebermich" style="position:absolute; left:285px; top:410px; width:80; height:80; z-index:6"><img src="bilder/links/ueber_mich.gif" name="uebermich" width="90" height="90" id="uebermich"></div>

<div id="preisliste" style="position:absolute; left:375px; top:410px; width:80; height:80; z-index:8"><img src="bilder/links/preis_liste.gif" name="preisliste" width="90" height="90" id="preisliste"></div>

<div id="kontakt" style="position:absolute; left:469px; top:410px; width:80; height:80; z-index:9"><img src="bilder/links/kontakt.gif" name="kontakt" width="90" height="90" id="kontakt"></div>

<div id="inhalt" style="position:absolute; left:122px; top:149px; width:742px; height:244px; z-index:10"></div>

</body>

Wenn ich für jede einzelne Seite, eine Html seite habe, würde es dann irgendwie funktionieren, dass wenn ich zB ein Hotspot über jedes einzelne dieser Div's lege und wenn man da drauf klickt, dass es dann die jeweilige Seite in das div "inhalt" lädt.

oder wenn ich anstatt der html seiten layers mache und diese dann je nachdem welches div angeklickt wird eingeblendet wird.

aber bei diesen div's und layern hab ich das problem, dass sobald sich die auflösung ändert oder eine linkleiste oben mehr ist die position nicht mehr stimmt. kann man das irgendwie fixieren?

lg anja
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

ich würde es ungefähr so machen:
HTML: 
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: url(bilder/hintergrund.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
background-color: #CCCCCC;
}

a:link, a:visited, a:hover, a:active {
color: #C62306;
text-decoration: none;
}

html, body, textarea {
scrollbar-base-color:#FFFFFF;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#C62306;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#C62306;
scrollbar-shadow-color:#C62306;
scrollbar-track-color:#FFFFFF;
}

#header {
	width: 80%;
	height: 15%;
	border: 1px solid green;
}

#inhalt {
	width: 80%;
	height: 50%;
	border: 1px solid red;
}

#footer {
	width: 80%;
	height: 92px;
	border: 1px solid blue;
}

</style>
</head>

<body>

<div id="header"></div>
<div id="inhalt"></div>
<div id="footer">
<img src="bilder/links/studio.gif" name="studio" width="90" height="89" id="studio">
<img src="bilder/links/nageldesign.gif" name="nageldesign" width="90" height="90" id="nageldesign">
<img src="bilder/links/ueber_mich.gif" name="uebermich" width="90" height="90" id="uebermich">
<img src="bilder/links/preis_liste.gif" name="preisliste" width="90" height="90" id="preisliste">
<img src="bilder/links/kontakt.gif" name="kontakt" width="90" height="90" id="kontakt">
</div>
Da kann man noch viel anpassen: du kannst die Breite der Container z.B. auch in px angeben und das Ganze zentrieren, ich weiß nicht, wie groß der Inhalt sein soll, ich weiß auch nicht, wie das Hintergrundbild aussieht, ob das zur Größe des Containers passen muss...
deine style-Angaben im head hab ich zus.gefasst, es reicht, wenn man 1x "<style type="....</style>" schreibt. Die Hintergrundfarbe vom body gehört auch ins Stylesheet. Die Angabe von "z-index" macht eigentlich nur Sinn, wenn man die Boxen tatsächlich über- oder untereinanderschichten will.
Ich würde jetzt die Navigations-Bilder einfach verlinken zur entsprechenden Seite, die dann ähnlich aussieht, mit anderem Inhalt.

schöne Grüße
planet4.
 
erst mal dankeschön!

aber wenn ich die verlinkung zu den seiten mach, muss ich dann bei jeder seite wieder die navigation und das obere bild einbinden?

kann ich das nicht irgendwie fixieren, so dass sich dann nur in der Mitte der Inhalt ändert?
 
Entweder lagerst du den Code aus und bindest ihn per PHP (muss vom Server unterstützt werden) mittels
PHP: 
include('navi.php');
ein, oder aber du benutzt frames (würde ich aber nicht machen ;) ). Die dritte möglichkeit, welcher ich mich immer bediene sieht wie folgt aus: Du kopierst einfach den kompletten quelltext, fügst ihn in ne neue seite ein und speicherst unter nem anderen namen ab. Dann einfach den Inhalt der page ändern!

mfg
flo
 
hallo planet 4!

danke für dein lösungsvorschlag, aber wie kann ich denn diese divs so positionieren, dass sie im IE und im Firefox an der richtigen Stelle angezeigt werden?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben