Antworten auf deine Fragen:
Neues Thema erstellen

Seitenpositionierung: abosulte Mitte etc.

N

Nopott

Guest

Liebe Forengemeinde!

Ich habe schon danach gegoogelt aber leider nichts passendes gefunden. Ich arbeite derzeit an meiner Website ausschließlich mit Ap Divs in denen ich die ganzen Bilder Menüs etc. positioniere.

Nun würde ich gerne alle meine Ap Divs (sie überlappen teilweise einander aber dies ist Absicht) so wie sie jetzt stehen, würde ich gerne haben das es auf jeden Bildschirm egal bei wem dann die Seite genau in der Mitte des Fensters ist..

Könnt ihr mir helfen?

Hier noch der derzeitige Code:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Company</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    width:1070px;
    height:458px;
    z-index:2;
    left: 95px;
    top: 11px;
}
#apDiv2 {
    position:absolute;
    width:1102px;
    height:707px;
    z-index:3;
    left: 85px;
    top: 9px;
}
#apDiv3 {
    position:absolute;
    width:601px;
    height:101px;
    left: 386px;
    top: 174px;
    z-index: 4;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv4 {
    position:abso;
    width:443px;
    height:57px;
    z-index:1;
    left: 258px;
    top: 169px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
}
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 253px;
    top: 163px;
}
#apDiv6 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:4;
    left: 445px;
    top: 196px;
}
#apDiv7 {
    position:absolute;
    width:66px;
    height:26px;
    z-index:4;
    left: 393px;
    top: 174px;
}
#apDiv8 {
    position:absolute;
    width:59px;
    height:19px;
    z-index:5;
    left: 81px;
    top: 76px;
}
#apDiv9 {
    position:absolute;
    width:64px;
    height:19px;
    z-index:1;
    left: 413px;
    top: 241px;
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
}
#apDiv10 {
    position:absolute;
    width:262px;
    height:28px;
    z-index:5;
    left: 420px;
    top: 220px;
}
#apDiv11 {
    position:absolute;
    width:425px;
    height:83px;
    z-index:5;
    left: 195px;
    top: 171px;
}
#apDiv12 {
    position:absolute;
    width:393px;
    height:84px;
    z-index:1;
    left: 0px;
    top: 1px;
}
-->
</style>
</head>

<body>
<div id="apDiv1">
  <div align="center"><img src="Hintergrund.png" width="1000" height="700" alt="Hintergrund_weiss" align="absmiddle" /></div>
</div>
<div id="apDiv2">
  <div align="center"><img src="Girl.png" width="1000" height="700" alt="Girl" /></div>
</div>
<div id="apDiv3">
  
    <ul id="Menue" class="MenuBarHorizontal">
      <li> <a href="#">Home</a></li>
      <li> <a href="The_Company.html">The Company</a></li>
      <li>
        <div align="left"><a href="#">Produkte</a></div>
      </li>
      <li>
        <div align="left"><a href="#">Advertising</a> </div>
      </li>
  </ul>
</div>
<div align="center"> </div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("Menue", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Vielen Dank im Vorraus,
Philipp
 
Zuletzt bearbeitet von einem Moderator:

viriv

Nicht mehr ganz neu hier

AW: Seitenpositionierung: abosulte Mitte etc.

weis jetzt nicht, aber reichts nicht, wenn du den content vom body in <center> packst?
also
<body><center>
..
..
..
</center></body>
 
N

Nopott

Guest

AW: Seitenpositionierung: abosulte Mitte etc.

Nein leider, dann ändert sich nichts.
 

viriv

Nicht mehr ganz neu hier

AW: Seitenpositionierung: abosulte Mitte etc.

stimmt, du hast die ja eigens positioniert....hab ich eben erst gesehen.....

du müsstest dem css quasie sagen, das center ist der urpunkt und je nachdem wie viel abstand monitor a, ab dann ist die wand und du kannst pixel von top und left zählen....
....
schwer....

EDIT:

ich hab glaub was...zumindest provisorisch

nimm DIESE seite(also die mit dem code) und lass sie als iframe(ohne border oder statusbar....) in ner NEUEN INDEX datei, welche den iframe im <center> hat, laden....
theoretisch könnte das gehen, wäre ein versuch wert.....davon abgesehen erstmal, dass es ein frame ist
 
Zuletzt bearbeitet:

Sorc

Nicht mehr ganz neu hier

AW: Seitenpositionierung: abosulte Mitte etc.

HTML:
#apDiv1 {
     position:absolute;
     width:1070px;
     height:458px;
     z-index:2;
     left: 50%;
     top: 50%;
     margin: -229px 0 0 -535px;
}
Du gibst im Margin immer negativ die Hälfte der Breite/Höhe an. Dann ist es immer genau mittig.
 

cebito

undefined

AW: Seitenpositionierung: abosulte Mitte etc.

Warum antwortest du, wenn du es nicht weißt? Wenn du nur vermutest, probier deine Vermutungen selbst aus, bevor du hier die Leute damit durcheinanderbringst!
@TE - rechne zusammen, welchen Platz alle divs zusammen in der Breite einnehmen (ich mach das nicht für dich) mach einen div um alle drumrum und gib ihm die errechnete Breite, position:relativ; und margin:auto; schon ist deine Seite mittig.
 

sokie

Mod | Web

AW: Seitenpositionierung: abosulte Mitte etc.

mach es entweder per css oder mit den alten align... (die Empfehlung kann eigentlich nur sein richtiges css zu verwenden: alle align raus)
dann verzichte wo es nur geht auf absolute positionierungen.
versuche statt der ApDiv formulierungen der IDs "sprechende" bezeichner zu verwenden:
id="links", id="rechts", id=Hauptinhalte und ähnlich, dann machst du dir das Lesen der Quelltexte und zuordnen der styles wesentlich leichter.
wenn du eine Liste mit listenelementen hast, verzichte wenn eben möglich auf Divs innerhalb der liste. das <li> Element ist schon ein behälter.
HTML:
<div id="aussen">

</div>
css:
Code:
  #aussen{
   position: relative;
  width: 1070px;
  margin: auto;
  }
postioniert deinen umgebenden Container in allen Browsern zentriert.
apDiv als Begriff gibt es nicht (oder nur in der Dreamweaver-Welt)
 
N

Nopott

Guest

AW: Seitenpositionierung: abosulte Mitte etc.

So ich habe mal den neuen Code hier, der alte hatte nämlich einige apDivs bei denen ich nicht weiß wo die herkamen, gibt in Wirklichkeit nur 3:

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Company</title>
<style type="text/css">
<!--
#Hintergrund {
    position:absolute;
    width:1070px;
    height:458px;
    z-index:2;
    left: 95px;
    top: 11px;
    visibility: visible;
}
#Girl {
    position:absolute;
    width:1102px;
    height:707px;
    z-index:3;
    left: 85px;
    top: 9px;
    visibility: visible;
}
#Menue_ap {
    position:absolute;
    width:601px;
    height:101px;
    left: 386px;
    top: 174px;
    z-index: 6;
    visibility: visible;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body><center>
<div id="Hintergrund">
  <div align="center"><img src="Hintergrund.png" width="1000" height="700" alt="Hintergrund_weiss" align="absmiddle" /></div>
</div>
<div id="Girl">
  <div align="center"><img src="Girl.png" width="1000" height="700" alt="Girl" /></div>
</div>
<div id="Menue_ap">
  
    <ul id="Menue" class="MenuBarHorizontal">
      <li> <a href="#">Home</a></li>
      <li><a href="#">|</a></li>
      <li> <a href="The_Company.html">The Company</a></li>
      <li><a href="#">|</a></li>
      <li>
        <div align="left"><a href="#">Produkte</a></div>
      </li>
      <li><a href="#">|</a></li>
      <li>
        <div align="left"><a href="#">Advertising</a> </div>
      </li>
  </ul>
</div>
<div align="center"> </div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("Menue", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</center></body>
</html>
So ich habe vorhin einige Möglichkeiten durchprobiert, nur befinden sich die apDivs dann immer irgendwo weil ich sie übereinander positionierte. Ich hab da auch ein Spray Menü und die 3 apDivs müssen genau so wie sind dann übereinander liegen, nur das ganze halt mittig.

@ sokie und cebito

Danke schonmal, ich hab die jetzt unbenannt. Nur ich hab es nicht geschafft die 3 apDivs in ein apDiv zu packen, denn dann geht die ganze formatierung irgendwie flöten oO..

EDIT: Hauptproblem ist auch das wenn ich die Positionierung auf relative umstelle dann positionieren sich die apDivs untereinander und überlappen nicht mehr so wie sie sollten..
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: Seitenpositionierung: abosulte Mitte etc.

vielleicht kannst du mal darstellen, wie das aussehen soll.
Merkwürdig scheint mir das markup für die img, die dem Anschein nach Hintergrund sein sollen. Die solltest du dem jeweiligen container auch als background-image zuordnen, dann brauchst du auch keine absoluten Positionierungen.
die Regeln für visibility:visible sind auch überflüssig, denn das ist sowieso default.
das als deprecated eingestufte <center> solltest du auch vermeiden (das wird durch deine absolut positionierten Elemente ohnehin wirkungslos)
 
N

Nopott

Guest

AW: Seitenpositionierung: abosulte Mitte etc.

EDIT:

Servus,

So Problem wurde gelöst. Ich habe das Hintergrund Bild als Background-image definiert und wurde darauf aufmerksam gemacht, das bei relative ja jetzt der 1. apDiv wieder 0,0 ist und ich deshalb damit die sich überlappen die anderen apDivs so ausrichten muss das sie sich an diesen orientieren. Ich hab alles in ein DIV gepackt und mittig ausgerichtet und jetzt passt alles wunderbar!

Vielen Dank für eure schnelle und hilfreiche Unterstützung!
 
Zuletzt bearbeitet von einem Moderator:

jackprince

xHTML & CSS Junkie

AW: Seitenpositionierung: abosulte Mitte etc.

Nicht böse gemeint, aber AP Divs (also Drag & Drop im Dreamweaver) ist
für das gute erstellen von Websites ungefähr genauso geeignet wie Seinerzeit Frontpage.

Gibt genug HTML und CSS Seiten wo man sich belesen kann, und auch einige Forenstickys hier welche genug Ressourcen aufzeigen.

Würde sich ja auch keiner in ein Auto setzen was mal eben einer zusammen geschoben hat ohne zu Wissen was er da eigentlich genau tut.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben