AP-Elemente positionieren

**MikeV** · 22.10.2008 21:24

Hallo!
Bin Anfänger in Dreamweaver und habe folgende Frage:
Habe ein Design im Photoshop erstellt und dieses in eine Tabelle eingefügt und zentriert.
Jetzt möchte ich über eine Stelle des Bildes einen Text legen. Dieser soll aber immer an dieser Stelle des Bildes verankert beiben.
Problem: wie positioniert man das AP-Element so, dass dieses in Bezug auf das Bild - und nicht in Bezug auf das Browserfenster an der selben Stelle bleibt.

Wahrscheinlich bin ich komplett falsch, aber vielleicht kann mir jemand eine kurze Einführung geben?!?

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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-image: url();
	background-repeat: no-repeat;
	background-color: #000000;
}
a:hover {
	color: #FF0000;
}
body,td,th {
	font-size: 14px;
	color: #00FF00;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-variant: small-caps;
	position: relative;
	height: 40px;
}
#apDiv1 {
	position:absolute;
	left:458px;
	top:169px;
	width:241px;
	height:35px;
	z-index:3;
	overflow: auto;
	visibility: visible;
}
#apDiv2 {
	position:absolute;
	left:444px;
	top:121px;
	width:363px;
	height:171px;
	z-index:1;
}
#apDiv3 {
	position:absolute;
	left:671px;
	top:199px;
	width:280px;
	height:236px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	width:563px;
	height:456px;
	z-index:3;
	visibility: visible;
	color: #0000FF;
	background-image: url(backgr1.jpg);
	top: 274px;
	left: 137px;
}
.Stil3 {color: #FFFFFF}
#apDiv5 {
	position:absolute;
	left:auto;
	top:auto;
	width:427px;
	height:355px;
	z-index:2;
	background-image: url(leiste1.jpg);
	visibility: visible;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>
<div id="apDiv4">
  <h1 align="center" class="Stil3">PÄDAGOGISCHE  GRUNDHALTUNG</h1>
  <p class="Stil3">Unser pädagogisches Betreuungskonzept zielt  darauf ab, die individuellen Kompetenzen und Ressourcen unserer Jugendlichen  herauszuarbeiten, gemeinsam mit ihnen realistische Zielperspektiven zu schaffen  und sie bei der Umsetzung dieser im Alltag zu unterstützen. <br />
    Als langfristiges Ziel erachten wir die  Vorbereitung unserer Jugendlichen auf ein selbstorientiertes und  eigenverantwortliches Leben.* </p>
  <h1 align="center" class="Stil3">UNSERE ZIELGRUPPE</h1>
  <p class="Stil3">Unsere  Zielgruppe umfasst <strong>all jene Jugendliche</strong>,  für die ein weiterer Verbleib in ihrer Herkunftsfamilie aus persönlichen,  sozialen und/oder familiären Gründen nicht mehr gegeben ist.</p>
  <p><span class="Stil3"><strong>Von der  Aufnahme ausgeschlossen </strong>sind Jugendliche, die akut  suchtkrank oder pflegebedürftig sind, die bereits eklatant häufig delinquent  geworden sind sowie Jugendliche mit gravierenden psychischen Störungen.</span></p>
</div>
<div align="left">
  <table width="1031" height="771" border="0" align="center">
    <tr align="right">
      <td colspan="8"><div align="left"><img src="Unterseite_Betreuungskonzept.jpg" width="1024" height="768" border="0" /></div></td>
    </tr>
  </table>
    
</div>
</body>
</html>

**jayjay** · 23.10.2008 07:45

warum verzichtest du nicht auf die tabelle und positionierst dein div dann relativ zum ersten?

**MikeV** · 23.10.2008 09:07

Danke! Ist mir heute Nacht auch eingefallen. Hab aber noch nicht ausprobiert. Sicher die bessere Lösung.
Weitere Frage: Wie schaffe ich es, dass das erste div an die ich alle anderen hänge immer in der Mitte des Bildschirms zentriert wird. links-rechts, oben unten?
Vielen Dank im Voraus!
lg, MikeV

**jayjay** · 23.10.2008 09:22

zb so

HTML-Code:

#irgendeindiv {
	position:absolute;
	width:960px;
	height:550px;
	top: 50%;
	left: 50%;
	margin-top: -275px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -480px;
	z-index:1;
}

**MikeV** · 23.10.2008 09:52

Danke! fürchte leider ich versteh es noch nich ganz!

#irgendeindiv {
position:absolute;
width:1024px;
height:768px;
top: 50%;
left: 50%;
(wenn ich es soweit habe steht das Bild irgendwo! Wofür sind aber dann diese 50% - 50% von was?)

Was bewirkt der Abschntt mit dem Rahmen?
Rand von oben in pixel? was hat das mit der Zentrierung zu tun?

margin-top: -275px;
margin-bottom: 0px;
margin-left: -480px;
z-index:1;
}

Was ich brauche, ist, dass das Element egal bei welcher Bildschirmauflösung (vorausgesetzt es findet genug Platz) in der Mitte zentriert wird.
Bitte erklär mir schrittweise was wodürch erreicht wird.

Wäre echt sehr dankbar!
MikeV

**jayjay** · 23.10.2008 10:00

du kannst in divs auch bilder reinpacken, oder in den hintergrund setzen.
hast du einen link um sich das ganze anzuschauen?

**MikeV** · 23.10.2008 10:04

Denke ich hab das mit dem zentrieren verstanden!
Matheatisches Denken von nöten - werd mich bemühen.
Danke für die rasche Hilfe.
Vielleicht darf ich später nochmal was nachfragen!

Danke, Danke, Danke für die Blumen von der Tanke

**MikeV** · 23.10.2008 10:26

Link hab ich leider noch nicht!
Hab jetzt das eine Bild das 1024x768 Pixel hat zentriert!
Hab meine Page frecherweise auf Auflösungen ab 1280x1024 ausgelegt - ab dieser hat das Bild komplett platz!
Frage:
Wenn ich das ganze jetzt in einer Auflösung kleiner als 1280x1024 betrachte, oder einfach das Browserfenster verkleinere habe ich zwar Bildlaufleisten, aber es wird trotzdem, auch durch scrollen, nicht das ganze Bild angezeigt, sondern ein Rand abgeschnitten! gibt es dafür eine Lösung, oder muss ich wegen ein paar alter Computermonitore mein Bild auf unter 1024x768 verkleinern??

**jayjay** · 23.10.2008 10:38

langsam, bildschirmauflösung != viewport

ausserdem ganz aktuell auf dem markt die kleinen (10 zoll) laptops

zeig mal den gesamten code von deiner seite

**MikeV** · 23.10.2008 10:41

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>Unbenanntes Dokument</title>
<style type="text/css">
    <!--
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    	padding: 0;
    	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
    	color: #000000;
    }
    .oneColElsCtr #container {
    	width: 46em;
    	background: #FFFFFF;
    	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
    	border: 1px solid #000000;
    	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    }
    .oneColElsCtr #mainContent {
    	padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div-Box. */
    }
#apDiv1 {
	position:absolute;
	width:1024px;
	height:768px;
	left:50%;
	top:50%;
	margin-top: -384px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -512px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	width:572px;
	height:475px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:216px;
	top:181px;
	width:15px;
	height:18px;
	z-index:1;
}
.Stil1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
#apDiv4 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
    -->
    </style>
</head>

<body class="oneColElsCtr">

    <div id="apDiv1"><img src="Unterseite_Landwirtschaft.jpg" width="1024" height="768" /></div>
    	<div class="Stil1" id="apDiv3">1</div>
</body>
</html>

**MikeV** · 23.10.2008 10:49

http://www.bluemickeymouse.110mb.com...irtschaft.html
habs mal hochgeladen!

**MikeV** · 23.10.2008 10:52

wegen der 10 zoll Laps - schaffen die so ein 1024x768 er Bild nicht in einem Stück, oder?
Wenn das Bild zumindest mit Bildlaufleisten ganz zu sehen wär, könnt ich damit leben.
Wie machst dus?

**jayjay** · 23.10.2008 10:59

passt doch!
wenn das bild zu gross ist dann entstehen natürlich scrollbalken, horizontal und/oder vertikal.

**MikeV** · 23.10.2008 11:04

Ja, es entstehen scrollbalken! nur leider Gehen sie nicht so weit, dass das ganze Bild sichtbar wird, es ist ein Teil abgeschnitten!
Mach mal das Fenster klein - dann haperts!

**jayjay** · 23.10.2008 11:09

die meisten packen schon die 1024 breite, aber zu viele scrollbalken ist für den betrachter etwas störend.
ich weis nicht ob ich dein vorhaben richtig erkenne, aber du kannst das bild etwas kleiner machen (ca 980px breit), slicen und in bereiche aufteilen. damit bedienst du dein css, zb:
1. ganz oben - header (schwarzer bg)
2. navi - direkt drunter (lila), kann auch kleiner von der höhe
3. content - bild mit dem tunnel

zur Startseite vom TP

Thema: AP-Elemente positionieren

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

AP-Elemente positionieren

Ähnliche Themen

Elemente verschoben

Dyn. Elemente positionieren anhand der Fenstergröße

CSS_Frage Elemente positionieren

<div> elemente nebeneinander positionieren

Elemente mit div positionieren

Aktive Benutzer

Aktive Benutzer