Text wird nicht richtig positioniert

Status
Nicht offen für weitere Antworten.
Das wäre mein Vorschlag für ein Grundkonzept:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Schule für Kranke in Stuttgart</title>

<style type="text/css">
 body {
 background-color:#ffffff;
 color:#000000;
 font-family: verdana;
 font-size: 12px;
 overflow:auto;
 }
 div#wrapper {
 width: 794px;
 position: absolute;
 left: 50%;
 margin-left: -397px; /* negative Hälfte von width:794px */
 border: 1px solid #ccddee; /* optional zur Visualisierung der Box */
 }
 div#header {
 height: 263px;
 background: url(gfx/header.jpg);
 }
 div#content {
 height: 263px;
 background: url(gfx/bg.jpg);
 }
 div#footer {
 height: 263px;
 background: url(gfx/footer.jpg);
 }

 a:link{color:#000000;}
 a:visited{color:#000000;}
 a:hover{color:#0084ff;}
 a:active{color:#0084ff;}
 a {text-decoration:none;}
 .shortnavi
 {
 position: absolute;
 left: 490px;
 top:  70px;
 width: 300px;
 }
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">
          <p class="shortnavi">
             <a href="startseite.html" target="inhalt">Startseite</a> | <a href="timsis.html" target="inhalt">Timsis</a> | <a href="verein.html" target="inhalt">Förderverein</a> | <a href="kontakt.html" target="inhalt">Kontakt</a>
          </p>
     </div>
     <div id="content">fgfdgfdgfdgfd</div>
     <div id="footer"> fdgfdgfdg</div>
</div>

</body>
</html>
 
mein lieber scholli

sehr überzeugend

ich werde die technik weiterverwenden


Edit: Wen ich jetzt die kleine navigation oben positioniere in pixel siehst des bei jeder aufsung anders aus oder?


EDIT²: Wen ich z.B aber den Bereich wo die ShortNavi Plaziert wird geno so groß mach wie der Header und dan in dem Headerbereich drin dan positieronier dan wird des überall gleich odeR?
 
Zuletzt bearbeitet:
In meinem Beispiel ist die Navigation innerhalb des DIVs wrapper positioniert und behält somit seine Position im Bezug zur umschliessenden Box bei, wenn die Fenstergröße skaliert wird.

Oder worauf willst du hinaus?
 
Ok nochmal zu verständnis:

also sagen wir mal die ganze box ist 500 x 500 px. die box soll immer in der mitte des gesamten browserfesters sein so vertikal als auch horizontal. dan ist die ja bei jeder auflösung in der mitte und dan wen ich die pixel angebe für die shortnavi ist die auch bei jeder auflösung gleich oder da ich ja IN der box des angebe und dioe bleibt immer gleoch groß. das heißt bei jeder auflösng ist die an der selben position ode?
 
Richtig, die Navigation behält ihre Position innerhalb der umschliessenden Box, wenn die Fenstergröße verändert wird:

Code: 
div#wrapper {
 position: absolute;
 width: 500px;
 left: 50%;
 margin-left: -250px;
 height: 500px;
 top: 50%;
 margin-top: -250px;
 border: 1px solid #ccddee;
 }
 div#header {
 height: 250px;
 background: url(gfx/header.jpg);
 }
 div#content {
 height: 250px;
 background: url(gfx/bg.jpg);
 }
 .shortnavi
 {
 position: absolute;
 left: 200px;
 top:  70px;
 width: 300px;
 }
Code: 
<div id="wrapper">
     <div id="header">
          <p class="shortnavi">
             <a href="startseite.html" target="inhalt">Startseite</a> | <a href="timsis.html" target="inhalt">Timsis</a> | <a href="verein.html" target="inhalt">Förderverein</a> | <a href="kontakt.html" target="inhalt">Kontakt</a>
          </p>
     </div>
     <div id="content">fgfdgfdgfdgfd</div>
</div>
Und bitte beachte die Netiquette bzgl. deiner Rechtschreibung. Vielen Dank ;)
 
Ou ja jetzt hab ich es kappiert :-D

Ja sorry ich schreib immer voll schnell und bin am Laptop des heißt ich vertipp mich offt :-D
 
So also hab mal den Code gemacht:

Code: 
<html>
<head>
<title>Schule für Kranke in Stuttgart</title>

<style type="text/css">
 body {
 background-color:#ffffff;
 color:#000000;
 font-family: verdana;
 font-size: 12px;
 overflow:auto;
 }

 a:link{color:#000000;}
 a:visited{color:#000000;}
 a:hover{color:#0084ff;}
 a:active{color:#0084ff;}
 a {text-decoration:none;}

 div#box {
 position: absolute;
 width: 600px;
 left: 50%;
 margin-left: -300px;
 height: 600px;
 top: 50%;
 margin-top: -300px;
 }
 div#header {
 height: 205px;
 background: url(gfx/header.jpg);
 }
 div#bg {
 height: 320px;
 background: url(gfx/bg.jpg);
 }
 div#footer {
 height: 65px;
 background: url(gfx/footer.jpg);
 }
 .shortnavi
 {
 position: absolute;
 left: 312px;
 top:  129px;
 }
 .content
 {
 position: absolute;
 left: 189px;
 top: 175px;
 }
</style>

</head>
<body>

<div id="box">
     <div id="header">
          <p class="shortnavi">
             <a href="startseite.html" target="content">Startseite</a>
             |
             <a href="timsis.html" target="content">Timsis</a>
             |
             <a href="verein.html" target="content">Förderverein</a>
             |
             <a href="kontakt.html" target="content">Kontakt</a>
          </p>
     </div>
     <div id="bg">
          <p class="content">
             <iframe src="startseite.html" width="360" height="355" name="content"></iframe>
          </p>
     </div>
     <div id="footer">

     </div>
</div>

</body>
</html>

So meine Fragen:

1.) Kann ich irgendwie von dem iframe den Rand in Firefox wegmachen?

2.) Warum siehst man es im normalen Firefox Browser anders als in dem Vorschaufenster von Phase 5?
 

Anhänge

  • firefox.jpg
    firefox.jpg
    54,8 KB · Aufrufe: 24
  • phase5.jpg
    phase5.jpg
    42,6 KB · Aufrufe: 21
Zuletzt bearbeitet:
Guten Morgen!

Den iFrame-Rahmen kannst du mit dem Attribut frameborder="0" abstellen.

Ich weiß jetzt nicht, mit welcher Browser-Engine die aktuelle Phase5-Version läuft, aber bei der "älteren" Version stützt sich der Editor auf den IE - noch Fragen, wieso sich die Seitendarstellung zum Firefox unterscheidet? ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück