✔ Div richtig Positionieren - Wie?

N

nchristoph

Erfahrenes Mitglied
Hallo,

Wie kann ich einen Div Container an der selben Position halten?

Wenn ich auf der Startseite bin(siehe normal.jpg) dann ist der schwarze Verlauf ziwschen Menü und Content an der Richtigen Position.

Sobald ich aber auf einen anderen Menüpunkt mit mehr Content gehe, wird der Verlauf nach unten verschoben(siehe fehler.jpg).

Hier der Code, mit dem ich den DIV-Container positioniere.

CSS: 
#seppic{
height:0px;
left:155px;
position:relative;
top:-801px;
width:2px;
z-index:4;
}

Wie kann ich den Verbessern?

Grüsse
 

Anhänge

  • normal.jpg
    normal.jpg
    515,4 KB · Aufrufe: 24
  • fehler.jpg
    fehler.jpg
    388,8 KB · Aufrufe: 30
Dann bleibt er zwar in der Höhe gleich, sobald ich aber die Auflösung ändere oder sich die Grösse vom Bildschirm ändert(hab hier einen 19 Zoll normal, zuhause einen 22" wide) ist er aber von links her verschoben, sowohl mit fixed als auch mit absolute.

Komischerweise lässt er mich nur 1 Bild Hochladen, aber das Ergebnis ist bei beiden dasselbe.

Hier der neue CSS Code mit Fixed;

CSS: 
#seppic{
	position:fixed;
	height:10px;
	left:402px;
	top:80px;
	width:2px;
	z-index:4;
}
 

Anhänge

  • absolute.jpg
    absolute.jpg
    479,9 KB · Aufrufe: 16
Dann ist die Ursache an anderer Stelle zu suchen, denn die beiden empfohlenen Positionierungsarten funktionieren grundsätzlich bzw. sollten zu deinem erwünschten Verhalten führen:

  1. Du hast hierbei auch, wie im verlinkten Kapitel beschrieben, berücksichtigt, dass sich position:fixed auf den Dokumentrand (<body>) bezieht?

  2. Desweiteren fehlt wohl in deiner Seitenformatierung position:relative für das Parent-DIV, damit sich darin die absolute Positionierung position:absolute relativ verhält, und nicht auf den Dokumentrand bezieht, was sich beim Skalieren des Viewports bemerkbar macht.
 
Zuletzt bearbeitet:
Das ganze ist ein Joomla Template und ich positioniere das ganze über das Eigenen Inhalt(HTML) Modul.
Habe als Position left genommen, weil es im linken Menü am besten passen würden, meiner Meinung nach.

Ich zeit einfach mal meinen HTML code

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" xml:lang="de-de" lang="de-de" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Keplinger Neu Test V2</title>
  <link href="/kepneu/templates/keplingerv2/favicon.ico" rel="shortcut icon" type="image/x-icon" />

  <script type="text/javascript" src="/kepneu/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/kepneu/media/system/js/caption.js"></script>


<link rel="stylesheet" href="/kepneu/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/kepneu/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/kepneu/templates/keplingerv2/css/template.css" type="text/css" />
<link rel="stylesheet" href="/kepneu/templates/keplingerv2/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/kepneu/templates/keplingerv2/css/blue_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/kepneu/templates/keplingerv2/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="page_bg" class="color_blue bg_blue width_fmax">
<a name="up" id="up"></a>

<div class="center" align="center">
	<div id="wrapper">
		<div id="wrapper_r">
			<div id="header">
				<div id="header_l">
					<div id="header_r">
						<div id="logo"></div>
						
                    </div>
				</div>

			</div>

			<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						<!--<table cellpadding="0" cellspacing="0" class="pill">
							<tr>
								<td class="pill_l">&nbsp;</td>
								<td class="pill_m">
								<div id="pillmenu">
									
								</div>
								</td>
								<td class="pill_r">&nbsp;</td>
							</tr>
							</table>-->
						</div>
					</div>

				</div>
			</div>

			<div id="search">
				
			</div>

			<div id="pathway">
				
			</div>

			<div class="clr"></div>

			<div id="whitebox">
				<div id="whitebox_t">
					<div id="whitebox_tl">
						<div id="whitebox_tr"></div>
					</div>
				</div>

				<div id="whitebox_m">
					<div id="area">

									

						<div id="leftcolumn">
															<div class="module_menu">
			<div>
				<div>
					<div>
													<h3>Hauptmenü</h3>
											<ul class="menu"><li id="current" class="active item136"><a href="http://localhost/kepneu/"><span>Startseite</span></a></li></ul>					</div>

				</div>
			</div>
		</div>
			<div class="module_menu">
			<div>
				<div>
					<div>
													<h3>Produkte</h3>

											<ul class="menu"><li class="parent item13"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=68&amp;Itemid=13"><span>Boden</span></a></li><li class="item11"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=126&amp;Itemid=11"><span>Furniere</span></a></li><li class="item49"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=66&amp;Itemid=49"><span>Dendrolight</span></a></li><li class="parent item9"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=63&amp;Itemid=9"><span>Holz</span></a></li><li class="parent item15"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=52&amp;Itemid=15"><span>Holz im Garten</span></a></li><li class="parent item10"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=67&amp;Itemid=10"><span>Holzwerkstoffe</span></a></li><li class="parent item16"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=76&amp;Itemid=16"><span>Möbelteile</span></a></li><li class="parent item14"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=79&amp;Itemid=14"><span>Türen</span></a></li></ul>					</div>
				</div>
			</div>
		</div>

			<div class="module_menu">
			<div>
				<div>
					<div>
													<h3>uberuns</h3>
											<ul class="menu"><li class="item126"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=126"><span>Firmengeschichte</span></a></li><li class="item127"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=20&amp;Itemid=127"><span>Impressum</span></a></li><li class="parent item128"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=46&amp;Itemid=128"><span>Presse</span></a></li><li class="item131"><a href="/kepneu/index.php?option=com_joomap&amp;Itemid=131"><span>Sitemap</span></a></li><li class="item132"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=80&amp;Itemid=132"><span>Standort</span></a></li><li class="item133"><a href="/kepneu/index.php?option=com_content&amp;view=article&amp;id=121&amp;Itemid=133"><span>Unser Team</span></a></li></ul>					</div>

				</div>
			</div>
		</div>
			<div class="module_menu">
			<div>
				<div>
					<div>
													<h3>Social Network</h3>

											<ul class="menu"><li class="item110"><a href="http://www.facebook.com/pages/Traun-Austria/Keplinger-GmbH/155814581117189"><span>Facebook</span></a></li></ul>					</div>
				</div>
			</div>
		</div>
			<div class="module_menu">
			<div>
				<div>
					<div>

													<h3>Suche</h3>
											<form action="index.php" method="post">
	<div class="search_menu">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Suchen" class="inputbox_menu" type="text" size="20" value="Suchen..."  onblur="if(this.value=='') this.value='Suchen...';" onfocus="if(this.value=='Suchen...') this.value='';" />	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="136" />
</form>					</div>

				</div>
			</div>
		</div>
			<div class="module">
			<div>
				<div>
					<div>
											<table border="0" width="108" align="center">
<tbody>

<tr>
<td><img src="/kepneu/templates/keplingerv2/images/adler.jpg" border="0" alt="Adler" width="100" height="117" align="middle" /></td>
</tr>
</tbody>
</table>					</div>
				</div>
			</div>
		</div>
	
												</div>					  
						<div id="maincolumn">
													
							<table class="nopad">

								<tr valign="top">
									<td>
										<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p style="text-align: center;"><span style="font-size: 14pt;"><span style="font-family: Verdana;"><ins>Willkommen bei Keplinger Holz &amp; Furniere</ins></span></span></p>
<p> </p>
<p>Der Name Keplinger steht seit mehr als 80 Jahren für Kompetenz und Zuverlässigkeit sowohl für die Industrie, das Bau- und Zimmerer- und insbesondere das Tischlergewerbe in ganz Österreich. Unser Sortiment umfasst folgende Produktgruppen:</p>
<ul>
<li><strong><ins><strong>Furniere:</strong></ins></strong> Das Lagersortiment umfasst alle heimischen und nahezu alle gängigen, ausländischen Holzarten. Somit sind ständig über 100 verschiedene Hölzer auf Lager, darunter auch ausgefallene wie Makassar, Black Pearl (weiße Makassar), Olive, europäischer Apfel, Mooreiche, Palisander u.v.m.</li>
</ul>
<ul>

<li><strong><ins><strong>Holz</strong></ins>:</strong> Ausgewähltes hochwertiges Schnittholz wird überdacht bzw. kammertrocken gelagert. Rund 3.000 m³ Laub- und Nadelholz aus ca. 90 Holzarten werden für die Kunden bereitgehalten. </li>
</ul>
<ul>
<li><strong><ins><strong>Holzwerkstoffe</strong></ins>:</strong> Die Produktpalette umfasst alle Qualitätsmarken von Rohspan bis zu melaminharzbeschichteten Holzwerkstoffen, MDF-, OSB-, 1-Schicht- und 3-Schicht- und edelfurnierten Platten. Das Programm wird mit Türen und edlen Produkten im Bereich Boden, Wand und Decke abgerundet.</li>
</ul>
<p>Die Fa. Keplinger bietet für seine Kunden in ganz Österreich:</p>
<ul>
<li>ein abgestimmtes Produktangebot für Möbel, Böden, Dächer und Wände</li>

<li>kompetente Beratung durch Spezialisten mit "Liebe zum Holz"</li>
<li>ein umfangreiches Lager mit Zustellservice durch den unternehmenseigenen Fuhrpark</li>
</ul>
<p><br /> <img src="/kepneu/../bilder/allgemein/fsc.png" border="0" alt="FSC Logo" width="100" height="152" /> <img src="/kepneu/../bilder/allgemein/PEFC.png" border="0" alt="PEFC Logo" width="90" height="145" /></p></td>
</tr>



</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>

</tr>

<tr>
	<td valign="top">
		<table width="100%"  cellpadding="0" cellspacing="0">
		<tr>
										<td valign="top" width="100%" class="article_column">
				
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p><ins><strong><font face="verdana,arial,helvetica,sans-serif" size="4">Lehrstelle</font></strong></ins></p>
<p> </p>
<p><font face="verdana,arial,helvetica,sans-serif" size="2">Zur Verstärkung unserer Teams suchen wir</font></p>
<p> </p>
<p><strong><font face="verdana,arial,helvetica,sans-serif" size="2">kaufmännische Lehrlinge (Großhandel) m/w.</font></strong></p>
<p> </p>
<p><font face="verdana,arial,helvetica,sans-serif" size="2">Sie weisen gute schulische Leistungen nach, verfügen über sehr gute
   <br />Deutschkenntnisse, der tägliche Kontakt mit Menschen macht Ihnen Spaß und Sie
   <br />haben Interesse an einer umfassenden kaufmännischen Tätigkeit.
   <br />Sie erfüllen genau diese Voraussetzungen und haben Freude am Umgang mit dem
   <br />Werkstoff Holz? Dann senden Sie Ihre Bewerbungsunterlagen an unsere unten
   <br />angeführte Firmenadresse z.Hd.: Herrn Dr. Josef Buczkowski oder unsere
   <br />Emailadresse.</font></p>

<p> </p>
<p><img src="/bilder/adresse.jpg" border="0" /></p></td>
</tr>



</table>
<span class="article_separator">&nbsp;</span>
</td>
								
		</tr>
		</table>
	</td>
</tr>

</table>

												<div class="moduletable">
					<div id="sidepic"><img src="/kepneu/templates/keplingerv2/images/general.png" border="0" alt="General" /></div>		</div>
			<div class="moduletable">
					<div id="seppic"><img src="/kepneu/templates/keplingerv2/images/sidepic.png" border="0" alt="Seperator" /></div>		</div>
	
									</td>
																	</tr>

							</table>
						</div>
						<div class="clr"></div>
					</div>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	</div>

</div>
</body>
</html>

Ich hab mir schon überlegt, ob es nicht besser ist, das ich einen leeren Div-Container nehme und das Bild via CSS einbaue.

Dann sollte doch die Positionierung auch einfacher sein oder?
 
Wenn die Positionierung eines einzelnen DIVs solche Probleme bereitet, wäre es mein nächster Vorschlag gewesen, die Grafik kurzerhand in einem der entsprechenden DIVs als Hintergrundbild einzubetten, und mittels background-position an den vorgesehenen Platz auszurichten.

Btw, der HTML-Code ist ohne die dazugehörige CSS-Formatierung aussagelos ;)
 
Ups sry.

Ich werds so machen, das ich die Div extra im HTML Code einbette und dort dann positioniere.

Danke für die Hilfe, bei Fragen werd ich mich noch mal melden.
 
Sry für Doppelpost:

Ich habs jetzt hingekriegt:

Hab den Div in den Div für die Linke Navi eingebaut und den dort absolute positioniert.

Ist zwar nicht ganz sauber die Lösung (finde ich zumindest), aber der W3C Validator erkennt sowohl den HTML Code als auch den CSS Code als Valid an.

Danke für die Hilfe.
 
Hallo,
auf das positionieren von Divs stosse ich auch immer wieder und habe für mich folgende Lösung gefunden die ich mit Hilfe des Clientcide Frameworks löse.

Auszug aus der Doku:
$('meineDivId').setPosition({
relativeTo: $('zielId') /*Das ist das Div Objekt an das sich das meineDivId ausrichten soll*/
});

Vorteil:
- Browser unterschiede kümmert sich das Framework drum

Nachteil:
- man bindest sich an ein Framework

Vielleicht ist es eine Alternative für dich.

http://www.clientcide.com/wiki/cnet-libraries/04-element/04-element.position
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück