Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit div-Positionierung“

d34th

Clan-Designer

Moin,

ich habe mich in den letzten Tagen mal etwas intensiver mit CSS beschäftigt, bin jedoch bei der Positionierung von durchsichtigen Linkboxen auf ein Problem gestoßen, was ich mir so eigentlich nicht erklären kann.

Es geht um folgenden Code:

index.php
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" xml:lang="de" lang="de" >

<head>
<title>Svens Multimedia-System Okt. 2008</title>
<link rel="stylesheet" href="/system-hp/css/design.css" type="text/css" />
<link rel="stylesheet" href="/system-hp/css/sys-elemente.css" type="text/css" />
<script type='text/javascript' src='/system-hp/java/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='/system-hp/java/tooltip.js'></script>
<?php include('/www/htdocs/w00a6677/system-hp/php/sys-elemente.php'); ?>
</head>


<body>
<div class='site'>
	<div class='main-header'></div>
		<div class='main-system'>
			
				<div id='lcd'><a href="#" title="<?php echo $lcd; ?>"><img src="/system-hp/images/spacer.png" id='lcd'></img></a></div>
				<div id='receiver'><a href="#" title="<?php echo $receiver; ?>"><img src="/system-hp/images/spacer.png" id='receiver'></img></a></div>
				<div id='dvdplayer'><a href="#" title="<?php echo $dvdplayer; ?>"><img src="/system-hp/images/spacer.png" id='dvdplayer'></img></a></div>
[...]
	<div class='main-legend'></div>
</div>


</body>

</html>

system-hp/design.css
Code:
.site{
text-align:center;
}

.site img{

}

.main-header{
	background-image: url(/system-hp/images/main-header.jpg);
	background-repeat:no-repeat;
	width:450px;
	height:96px;
	margin:auto;
}

.main-system{
	background-image: url(/system-hp/images/main-system.jpg);
	background-repeat:no-repeat;
	width:1000px;
	height:987px;
	margin:auto;
	text-align:left;
}


.main-legend{
	background-image: url(/system-hp/images/main-legend.jpg);
	background-repeat:no-repeat;
	width:835px;
	height:151px;
	margin:auto;
}

[...]

/system-hp/sys-elemente.css
Code:
img#lcd{
	width:354px;
	height:247px;
	
}

div#lcd{
	position:relative; 
	left:86px;
	top:12px; 
	width:354px;
}

img#receiver{
	width:226px;
	height:91px;
}

div#receiver{
	position:relative; 
	left:706px;
	top:49px; 
	width:226px;
}

[...]

Bei [...] wurden jeweils unwichtige Codebestandteile weggelassen. Die *.js Dateien habe ich ganz weggelassen, da diese nur die Popups koordinieren. Ebenso habe ich die sys-elemente.php weggelassen, da durch diese nur dynamisch den Inhalt der title Elemente in der index.php gefüllt werden (funktioniert auch).

Problem ist, dass die divs anscheinend alle von einem anderen Ursprungspunkt aus positioniert werden müssen, um sie im Firefox 3 richtig positioniert anzuzeigen (siehe *website*). Im Internet Explorer 7 hingegen liegen alle divs durcheinander gewürfelt.

Die komplizierte Methode mit einem gestreckten durchsichtigen Bild innerhalb einem in der Position definierten div habe ich gewählt, da ich jeweils mit nur Bild bzw. nur div Fehler hatte (z.B: unsichtbare Linkfelder, wo keine hätten sein sollen).

Die Frage ist also: Wie positioniere ich die divs so, dass sowohl IE als uch FF alles richtig darstellt.

Ich hoffe ihr könnt mir helfen.
 
Zuletzt bearbeitet:

stb_87

Web-Sheriff - ohne Bild

AW: Problem mit div-Positionierung

Zunächst einmal würde ich margin und padding auf 0px setzen.

Wäre es nicht einfacher, das Bild als Gesamtes mit einer Imagemap zu versehen?
 

sokie

Mod | Web

AW: Problem mit div-Positionierung

warum nicht einfach die boxen absolut positonieren?
eigentlich ist das das einfachste, und sollte in jedem Browser gleich aussehen.
Bezugspunkt ist immer oben links.
Natürlich wie stb schon schrieb margins und paddings auf 0 setzen, damit man an der Stelle schon mal gleiche Bedingungen für alle Browser hat.
 

LarsVern

Noch nicht viel geschrieben

AW: Problem mit div-Positionierung

Hi,

ich würde bei dieser Aufgabe auch absolute Positionen vergeben. Allerdings sollte deine Hintergrundgraphik dann auch eine feste Position haben. Wenn du das Bild immer zentriert haben musst, dann könntest du höchstens ausprobieren die Rahmen absolut innerhalb eines relativen DIVs zu positionieren.

<div style="margin:auto;">
<div id="Rahmen1" style="position:absolute;"></div>
<div id="Rahmen2" style="position:absolute;"></div>
</div>

Zum Verständnis für position:absolute/relative


Bei dieser Variante gibt es aber sicher noch ein paar Fallstricke zwischen den Browsern.

Wenn du nicht lange basteln willst, dann setz die Graphik auf eine feste Position und packe die Rahmen absolut darauf.

Der Vorschlag eine HTML ImageMap zu verwenden ist genauso gut. Für deinen Zweck vollkommen ausreichend. Wenn du die DIV Geschichten besser kennenlernen möchtest - ist ja vielleicht nicht deine letzte Geschichte - dann probiere es mit den position:absolute aus.

Link ImageMap:

Gruss

Lars
 

d34th

Clan-Designer

AW: Problem mit div-Positionierung

Danke erstmal für die vielen Antworten innerhalb von einer Stunde. Wow! :D

Das es irgendwie sowas wie ImageMaps gab schwirrte mir auch noch irgendwo im Hinterkopf drum, aber nach kurzen googlen hab ich da keine Treffer erzielt (gut waren blos 3 SUchanfragen vielleicht) und ich dachte die Variante mit den Divs geht grad genauso schnell.

Die komplette Seite soll ja bei jeder Auflösung zentriert sein und das geht meines Wissens nur relativ, da der Abstand zur Mitte bei 1024x768 natürlich geringer ist als bei 1680x1050.
Daher habe ich mich bis jetzt gegen eine absolute Positionierung entschieden, weil bei absoluter Positionierung als Ausgangspunkt ja immer der Punkt links oben im Browserfenster zählt. (oder lässt sich der Ausgangspunkt auch z.B. als Punkt oben links in einem (relativ) positionierten div setzen?)
edit: Frage beantwortet durch selfhtml
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
edit2: Schön, dass self HTML das behauptet, aber bei mir richten sich absolute div Elemente innerhalb eines divs höherer Ordnung am absoluten Nullpunkt aus und nicht am Nullpunkt des divs.

Ich werde eure Vorschläge mal durchprobieren und berichten. :)

@LarsVern
Genau so, wie du es in deiner ersten Idee beschrieben hast stell ich mir das ganze vor; absolute Positionen in einem relativen div. Mal gucken. Ziel des ganzen soll nicht umbedingt eine "wirkliche" Homepage sein (wer interessiert sich schon für mein Multimedia-System ^^), sondern ne Möglichkeit CSS, etc. besser kennenzulernen. ;)

edit:
Ich hätte wohl doch etwas länger googlen sollen. Die Variante mit den ImageMaps ist natürlich geradezu dafür zugeschnitten oO :D

edit2:
Erkenntnis 1:

/system-hp/css/design.css
Code:
.site{
margin:auto;
}
Tut es schonmal wesentlich besser als
Code:
.site{
text-align:center;
}


edit3:
Also hab jetzt mal padding und margin auf 0 gesetzt in allen divs (die später anklickbar sind)
Bei rund der hälfte der divs klappt das auch wunderbar in beiden Browsern. Die Position der Boxen ist ca. richtig und auch wenn ich das Fenster schmaler schiebe, bleiben die Linkboxen an der richtigen Position über der Grafik. Allerdings nicht alle, obwohl sie meiner Meinung genau gleich aufgebaut sind.

Könnt euch ja mal als Beispiel auf *website* begeben und das Browserfenster schmaler schieben. Die Linkbox für die Lautsprecher bleibt genau an der richtigen Position über der Grafik, die Linkbox des Druckers aber nicht. Als Beweis, dass beide mit dem gleichen Code arbeiten folgendes:

index.php
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" xml:lang="de" lang="de" >

<head>
[...]
</head>


<body>
<div class='site'>
	<div class='main-header'></div>
	<div class='main-system'>
			
				
				<div id='lautsprecher'><a href="#" title="<?php echo $lautsprecher; ?>"><img src="/system-hp/images/spacer.png" id='lautsprecher'></img></a></div>
				<div id='pcdrucker'><a href="#" title="<?php echo $pcdrucker; ?>"><img src="/system-hp/images/spacer.png" id='pcdrucker'></img></a></div>
				[...]
	</div>
	<div class='main-legend'></div>
</div>


</body>

</html>

sys-elemente.css
Code:
img#lautsprecher{
	width:240px;
	height:165px;
	padding: 0;
	margin: 0; 
}

div#lautsprecher{
	position:relative; 
	left:710px;
	top:-385px; 
	width:240px;
	padding: 0;
	margin: 0; 
}

img#pcdrucker{
	width:182px;
	height:203px;
	padding: 0;
	margin: 0; 
}

div#pcdrucker{
	position:relative; 
	left:647px;
	top:-538px; 
	width:182px;
	padding: 0;
	margin: 0; 
}

design.css
Code:
.site{
margin:auto;
}

.site img{

}

.main-header{
	background-image: url(/system-hp/images/main-header.jpg);
	background-repeat:no-repeat;
	width:450px;
	height:96px;
	margin:auto;
}

.main-system{
	background-image: url(/system-hp/images/main-system.jpg);
	background-repeat:no-repeat;
	width:1000px;
	height:987px;
	margin:auto;
	left:300px;
}


.main-legend{
	background-image: url(/system-hp/images/main-legend.jpg);
	background-repeat:no-repeat;
	width:835px;
	height:151px;
	margin:auto;
}
 
Zuletzt bearbeitet:

templar_style

Noch nicht viel geschrieben

AW: Problem mit div-Positionierung

würde das hier nicht auch gehen ?


* {
margin: 0 0 0 0;
}


? Oder muss man immer in jedem einzelnen Punkt diese 0 Werte eintragen?
 

LarsVern

Noch nicht viel geschrieben

AW: Problem mit div-Positionierung

* {
margin:0;
}

könnte auch funktionieren. Vom Prinzip her sollte CSS Eigenschaften vererben. Eine Null reicht aber, weil alle Kanten ja auf Null stehen sollen. Mehrere Angaben sind nur interessant, wenn die Kanten unterschiedlich sein sollen.

Gruss

Lars
 

LarsVern

Noch nicht viel geschrieben

AW: Problem mit div-Positionierung

Hi,

also bei position:relative hast du immer das Problem, dass sich das DIV nach dem vorherigen DIV richtet und das Folge DIV wiederum durch die Größe des aktuellen beeinflusst wird.

Um die genaue Wirkungsweise zu testen würde ich an deiner Stelle die ganze Geschichte einmal entschlacken. Fang mit zwei Elementen an und versuche die so zu positionieren wie du dir das denkst. Wenn das hin haut, dann probiere Varianten aus, die aus deiner Sicht genauso hin hauen müssten.

Im nächsten Schritt packst du dann mehr Elemente hinzu. Und um zu sehen wie sich gewisse Dinge verhalten kannst du entweder deinen Rahmen verwenden oder was ich gerne mache, background-color (mit unterschiedlichen Farben), darüber lassen sich die Auswirkungen besser sichbar machen.

Wenn du position:relative verwendest kommen beim IE gegenüber den anderen Browsern noch die unterschiede der Rahmen hinzu. Der IE interpretiert die einfach anders als FireFox, Opera und Safari oder Chrome und Flock. Sprich das Folgeelement sitzt dann nicht ganz dort wo es soll und die Verschiebung nimmt pro Element zu.

Allerdings gibt es in deinem Source ein Problem, wie relevant das ist kann ich nicht genau sagen. Du verwendest die IDs doppelt. Klar, einmal als DIV und einmal als IMG, allerdings weiß ich nicht ob diese Unterscheidung ausreicht, es könnte sein, dass Einstellungen aus den Bildern in die DIVs vererbt werden.

Ich habe das jetzt aber nicht ausprobiert.

Gruss

Lars
 

LarsVern

Noch nicht viel geschrieben

AW: Problem mit div-Positionierung

FEHLER:

<div id='router'><a href="#" title="router"><img src="/system-hp/images/spacer.png" id='router'></img></div></a></div>

In der Zeile vom Router hast du ein DIV zu viel geschlossen und ab da klappt das mit der Positionierung auch nicht mehr.
 

cebito

undefined

AW: Problem mit div-Positionierung

Also ich hab das so gelöst:

CSS

Code:
BODY {
.........[COLOR=Red][B]TEXT-ALIGN: center;[/B][/COLOR]
}

#container {
        PADDING-RIGHT: 0px; ..... WIDTH: 800px; [COLOR=Red][B]POSITION: relative;[/B][/COLOR] 
}
Der Container ist relativ positioniert und wird immer mittig angezeigt (nicht schmaler als 800 px.

... dann im Quelltext

HTML:
<html>
<body>
<div id=container>

Hier alle div absolut positioniert...

</div>
</body>
</html>
Alle div innerhalb des container positionieren sich jetzt absolut innerhalb des containers an seinen Begrenzungen...
Das funktioniert in allen mir bekannten Browsern.
 

d34th

Clan-Designer

AW: Problem mit div-Positionierung

Ah Danke LarsVern (und natürlich auch den anderen) so viele Augen sehen natürlich mehr als meine beiden. Jetzt bleiben schon alle Boxen auf der richtigen Stelle und werden in beiden Browsern gleich angezeigt.

Der Rest sollte nurnoch Anpassung der Koordinaten sein.
 

sokie

Mod | Web

AW: Problem mit div-Positionierung

edit: Beitrag falsch / Fehler in der Logik
Danke für die Hilfestellung@cebito
 
Zuletzt bearbeitet:

cebito

undefined

AW: Problem mit div-Positionierung

Soso, dann mach dir mal zwei Dateien und teste das mal aus:

container.css

Code:
BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; FONT-FAMILY: VERDANA,ARIAL,HELVETICA; HEIGHT: 100%; FONT-SIZE: 11px; COLOR: #303030; TEXT-ALIGN: center;
}

#container {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 800px; HEIGHT: 800px; PADDING-TOP: 0px; POSITION: relative; BACKGROUND: #000000; BORDER: 3px; TEXT-ALIGN: left;
}

#tab1 {
        Z-INDEX: 3; LEFT: 82px; POSITION: absolute; TOP: 200px; HEIGHT: 50px; WIDTH: 100px; BACKGROUND: #FF0000;
}


#tab2 {
        Z-INDEX: 3; LEFT: 432px; POSITION: absolute; TOP: 360px; HEIGHT: 120px; WIDTH: 250px; BACKGROUND: #FFFF00;
}
wieauchimmer.html

HTML:
<!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>

<link href="container.css" type=text/css rel=stylesheet>

</head>


<body>

<div id=container>


<div id=tab1> Ich bin wo ich bin!!! Absolut im Container, relativ zum Browserfenster!</div>

<div id=tab2> Ich bin wo ich bin!!! Absolut im Container, relativ zum Browserfenster!</div>



</div>

</body>

</html>
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: Problem mit div-Positionierung

Hallo cebito,
Danke für die Mühe und den Hinweis. ich habs ausprobiert, stimmt...da hab ich diesen Sachverhalt ganz fehlinterpretiert
 

d34th

Clan-Designer

AW: Problem mit div-Positionierung

Habe es schön gelöst. Schuld am Ganzen war tatsächlich der eine div-Tag, der zu viel geschlossen wurde.

Das schon funktionstüchtige, wenn auch nicht komplett fertige Ergebnis:

Danke für die Hilfe euch allen!
 

cebito

undefined

AW: Problem mit div-Positionierung

Hallo cebito,
Danke für die Mühe und den Hinweis. ich habs ausprobiert, stimmt...da hab ich diesen Sachverhalt ganz fehlinterpretiert

No Prob, hab vor ca. nem Jahr ganz schön rumgegoogelt, bis ich was gefunden. Wollt mich halt nich zufriedengeben damit...
 
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

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.849
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben