Unterschiedliche Darstellung bei unterschiedlichen Auflösungen

Status
Nicht offen für weitere Antworten.
Hallo ...,
michaelsinterface gab dir im CSS-Forum einen guten Rat:
...
Anmerkung: ich empfehle dir, den Quelltext des Dokuments aufzuräumen und u.a. alle style-Elemente, sowie CSS-Angaben in einem zentralen Stylesheet zusammenzufassen.
Zum Vergrößern anklicken....
Idealerweise solltest du dieses zentrale Stylesheet im Headerberech deiner HTML-Datei unterbringen. Ansonsten würde es mich nicht weiter wundern, wenn niemand Lust hat, sich in diesem Durcheinander zurecht zu finden.
 
Solange du das Problem nicht detailierter beschreibst, wird dir niemand einen brauchbaren Tipp geben können.

Wer aufmerksam lesen kann, ist klar im Vorteil ;-]
 
Hi.

wenn man eine andere Auflösung als 1024 x 768 hat nicht richtig dargestellt.
Zum Vergrößern anklicken....

Das Problem habe Ich auch, allerdings habe Ich frames auf meiner Seite verwendet.
Bei einer anderen Auflösung ist alles verschoben ...

Vielleicht sollt Man ja Tables nehmen zum Darstellen..


MfG Alexander12
 
In meinem Lösungsvorschlag habe ich den iFrame und die Menüpunkte (Sterne) in ein horizontal und vertikal zentriertes DIV gepackt, sowie die Hintergrundgrafik für das DIV#center bestimmt. Somit verschieben sich der iFrame und die Menüpunkte nicht mehr in Bezug zur Hintergrundgrafik.

  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

HTML: 
<!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>Zimtgruen - kind of thoughts...Vol. 0.5</title>

<style type="text/css">
<!--
body
{
background-color:#313131;
}

div#center
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px; /* negative Hälfte von width:800px = horizontal zentriert */
top: 50%;
height: 500px;
margin-top: -250px; /* negative Hälfte von height:500px = vertikal zentriert */
background-image: url(05.jpg);
}

iframe#Haupt
{
width: 470px;
height: 390px;
margin: 75px 0 0 260px;
filter: chroma(color=#333333);
}

#home { position:absolute; top:80px; left:750px; }
#me { position:absolute; top:120px; left:750px; }
#lj { position:absolute; top:160px; left:750px; }
#friendz { position:absolute; top:200px; left:750px; }
#site { position:absolute; top:240px; left:750px; }
#links { position:absolute; top:280px; left:750px; }
#gbook { position:absolute; top:320px; left:750px; }
#contact { position:absolute; top:360px; left:750px; }
#fotos { position:absolute; top:400px; left:750px; }
-->
</style>

</head>
<body>

<div id="center">

   <iframe src="welcome.html" name="Haupt" id="Haupt" frameborder="0" ALLOWTRANSPARENCY="true">Ihr Browser kann den IFrame nicht anzeigen - Your browser doesn't support iframes</iframe>

   <div id="home"><a href="welcome.html" target="Haupt"><img src="menuestern.gif" border="0" alt="Home"></a></div>
   <div id="me"><a href="me.html" target="Haupt"><img src="menuestern.gif" border="0"  alt="Me"></a></div>
   <div id="lj"><a href="#" onClick="MyWindow=window.open('lj.html','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=625,height=500,left=100,top=100'); return false;"><img src="menuestern.gif" border="0"  alt="LifeJournal"></a></div>
   <div id="friendz"><a href="friend.html" target="Haupt"><img src="menuestern.gif" border="0"  alt="Friendz"></a></div>
   <div id="site"><a href="site.html" target="Haupt"><img src="menuestern.gif" border="0"  alt="Site"></a></div>
   <div id="links"><a href="links.html" target="Haupt"><img src="menuestern.gif" border="0"  alt="Links"></a></div>
   <div id="gbook"><a href="http://147735.guestbook.webtropia.com" target="Haupt"><img src="menuestern.gif" border="0"  alt="G*Book"></a></div>
   <div id="contact"><a href="webmaster@zimtgruen.de" target="Haupt"><img src="menuestern.gif" border="0"  alt="contact"></a></div>
   <div id="fotos"><a href="Fotos/session/fotos.html" target="Haupt"><img src="menuestern.gif" border="0"  alt="Fotosessions"></a></div>

</div><!-- end DIV.center -->

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück