✔ Problem mit Template-Struktur

Joe · 20. Mai 2010

Kann mir denken das das Thema mittlerweile nervt. Da mir aber hier noch etwas die Erfahrung fehlt frage ich mal nett euch.

Im FF sieht das ganze ja recht geschmeidig aus allerdings im IE7 schiebt es den div#content nach unten den div#upper-content darauf ebenso.
Hier mal die DIVs als Code:

Code:

body
{
background-color: #1e1e1e;
background-image: url(../img/HG-Main.png);
background-repeat: no-repeat;
background-position:top center;
// background-attachment:fixed;
padding:0px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
div#wrapper{
width: 1000px;
height: 800px;
margin: 15px auto;
text-align: left;
background-image: url(../img/HG-Main.png) no-repeat;
}
div#navi{
margin: 29px 0px 0px 35px;
padding: 10px 0px 0px 10px;
background: url(../img/Navi-Main.png) no-repeat;
width: 175px;
height: 685px;
float: left;
}
div#header-pic{
margin: 29px 40px 0px 0;
background: url(../img/Header-Pic.png) no-repeat;
width: 174px;
height: 120px;
float: right;
}
div#header{
margin: 29px 11px 0px 0;
background: url(../img/MainHeader.png) no-repeat;
width: 555px;
height: 120px;
float: right;
}
div#content-pic{
margin: 9px 40px 0px 0px;
background: url(../img/Content-Pic.png) no-repeat;
width: 174px;
height: 270px;
float: right;
}
div#content{
margin: -565px 224px 0px 0px;
background: url(../img/Main-Content.png) no-repeat;
width: 555px;
height: 444px;
float right;
}
div#upper-pic{
margin: 289px -174px 0px 0px;
background: url(../img/Upper-Pic.png) no-repeat;
width: 174px;
height: 276px;
float: right;
}
div#uppercontent{
margin: 183px 224px 0px 0px;
background: url(../img/Upper-Content.png) no-repeat;
width: 555px;
height: 110px;
float: right;
}
div#mappic{
background: url(../img/fff2.png);
margin: 6px 6px 6px 6px;
width: 543px;
height: 432px;
float: center;
}

.clear{
clear: both;
}

Tja und um ein besseres Bild zu zeigen hier mal der header.php wo meine DIVs gezeigt werden

PHP:

<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrapper">
	<?php include  'templates/userstats.tpl'; ?>
	<div id="header">
	<div id="title">
	<p class="title_ausrichtung">
	<span class="title_gam">entspechender Titel</span><br />
	<span class="title_keywords">keywords eben und so on</span></p>
	</div>
	</div>
	<?php include 'navi.php';?>
	<div id="content-pic">
	</div>
	<div id="upper-pic">
	</div>
	<div id="uppercontent">
	</div>
	<br class="clear" />

Der entsprechende <div id="content"> wird je nach template-site geladen.

Die Frage ist wie ich meine DIVs im IE am besten ordentlich positionieren kann.

Maik · 20. Mai 2010

Hi,

Joe hat gesagt.:
im IE7 schiebt es den div#content nach unten

[...]

Der entsprechende <div id="content"> wird je nach template-site geladen.

verrätst du uns auch, an welcher Stelle des Markups das DIV #content geladen wird?

mfg Maik

Joe · 20. Mai 2010

Öhm ich hoffe ich habe dich richtig verstanden. Ja Also die Templateengine lädt also zb die
startseite.tpl

PHP:

<? include("inc.header.php"); ?>
<div id="content">
	<h1>Titelzeile</h1>
	<p>Text<br> 
Text.<br>
Text.</p>
<p>Text.</p>
</div>

Also immer erst am Ende wird der #content geladen.
Was mich eben genau zu diesen negativen Zahlen im margin zwingt.

Optimal wäre ja wenn man das gleich mit in die Templateengine arbeiten könnte aber das wäre wohl nen andres Thema.

Maik · 20. Mai 2010

Joe hat gesagt.:
Also immer erst am Ende wird der #content geladen.

An welchem Ende?

Zwischen #uppercontent und dem <br>-Tag?
Zwischen dem <br>- und </div>-Tag von #wrapper?
Im Anschluß an #wrapper?

Eine heitere Raterunde, die du hier eröffnet hast

mfg Maik

Joe · 20. Mai 2010

) Ja is nicht meine Stärke.

inc.header.php wird includet also das oben gepostete und dann der #content

Mit andren worten wird der #content dirckt nach dem <br class="clear" /> geladen.
Oder meinst du wo der div etwa in der Ausgabe steht? Das wäre so ziemlich genau die Mitte aller andren Divs.

Sorry das ich mit dem Thema deine Nerven überstarapaziere

Maik · 20. Mai 2010

Joe hat gesagt.:
Oder meinst du wo der div etwa in der Ausgabe steht? Das wäre so ziemlich genau die Mitte aller andren Divs.

Darf ich das jetzt abzählen, und hoffen, dass ich so ziemlich die Mitte getroffen habe? :suspekt:

Zeig mal besser den geparsten PHP-Code, also was der Browser als HTML-Code ausgibt (Ansicht -> Seitenquelltext anzeigen), oder nenne den Link zu deiner Seite, damit wir hier vorankommen.

Eine grafische Vorschau des Soll-Zustandes wäre zur besseren Orientierung auch nicht schlecht.

mfg Maik

Joe · 20. Mai 2010

PHP:

<!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>
		<meta name="robots" content="index,follow" />
<meta name="description" content="Informationen ï¿½ber das Browsergame End of Time" />
<meta name="keywords" content="Kampf, Erkunde die Welt, Items, Rï¿½stung, Waffen" />
<title>End of Time</title>
 
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrapper">
	<div id="header-pic">
	<h2>
		Name:Usai<br>Position:100,100<br>	</h2>
</div>	<div id="header">
	<div id="title">
	<p class="title_ausrichtung">
	<span class="title_praxis">End of Time das Browsergame</span><br />
	<span class="title_keywords">Aufbau &middot; Forschung &middot; Items &middot; erkunde die Welt</span></p>
	</div>
	</div>
				<div id="navi">
<table style="border:2px solid #000000;" width="155"  >
 <tr>
  <td padding="10px 0 0 10px">
<ul class="navi">
<li><a href="main.php?section=bunker" class="navi">Bunker</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=charackter" class="navi">Charackter</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=ausrÃ¼stung" class="navi">Ausr&uuml;stung</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=gepÃ¤ck" class="navi">Gep&auml;ck</a></li>
				</ul>
<ul></ul>
<ul class="navi">
<li><a href="main.php?section=sammeln" class="navi">Sammeln</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=erkunden" class="navi">Erkunden</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=arbeiten" class="navi">Arbeiten</a></li>
				</ul>
<ul></ul>
<ul class="navi">
<li><a href="main.php?section=arena" class="navi">Arena</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=markt" class="navi">Markt</a></li>
				</ul>
<ul class="navi">
<li><a href="main.php?section=map" class="navi">Map</a></li>
				</ul>
  </td>
 </tr>
</table>
<table  style="border:2px solid #000000; margin:225px 0 0 0;" width="155"  >
 <tr>
  <td padding="10px 0 0 10px">
				<ul class="navi">
<li><a href="main.php?section=hilfe" class="navi">Hilfe</a></li>
				</ul>
				<ul class="navi">
<li><a href="main.php?section=forum" class="navi">Forum</a></li>
				</ul>
				<ul class="navi">
<li><a href="main.php?section=chat" class="navi">Chat</a></li>
				</ul>
				<ul class="navi">
<li><a href="main.php?section=impressum" class="navi">Impressum</a></li>
				</ul>
  </td>
 </tr>
</table>
 
 
<table  style="border:2px solid #000000; margin:10px 0 0 0;" width="155"  >
 <tr>
  <td padding="10px 0 0 10px">
				<ul class="navi">
<li><a href="main.php?section=logout" class="navi">Logout</a></li>
				</ul>
  </td>
 </tr>
</table>
</div>	<div id="content-pic">
	</div>
	<div id="upper-pic">
	</div>
	<div id="uppercontent">
	</div>
	<br class="clear" />	<div id="content">
	<h1>Titeltext</h1>
	<p>Text.</p>
</div>

Naja so einfach ist das nicht ich geb dir mal den Link von der Seite da kannst dies anschauen:
http://www.endtime.kilu.de
Man muss allerdings einlogen ums zu sehen.

Maik · 20. Mai 2010

Dann schlage ich vor, dass du deine PHP-Templates umstrukturierst, damit das Element im HTML-Code an entsprechender Stelle ausgegeben wird, denn da unten hat es definitiv nichts verloren - und der negative margin-top-Wert hätte sich damit auch erübrigt.

mfg Maik

Maik · 20. Mai 2010

Joe hat gesagt.:
http://www.endtime.kilu.de

Dort erscheint das Element doch auch an ganz anderer Stelle im Markup.

Joe hat gesagt.:
Man muss allerdings einlogen ums zu sehen.

Ah ja, mit "Sesam öffne dich", oder wie? Extra registrieren werde ich mich jetzt hierfür ganz sicher nicht

Alles weitere hätten wir hier ja dann besprochen.

Viel Erfolg!

mfg Maik

Joe · 20. Mai 2010

Ja stimmt der schliessende div-Tag fehlte.
OK nun siehts schon mal gleich verschoben aus auf beiden Browser.
Hmm und clear scheint dort auch verkehrt zu stehen.

Hmkey zum umstrukturieren ist mir auch was eingefallen: Ich könnte in den jeweiligen Templates am Ende die drauffolgenden Divs wie Uppercontent ausgeben. Was zwar bissel schräg im Code aussieht aber immerhin funktionieren sollte.

Mike ich habe alle Fragen versucht so genau wie möglich zu stellen bzw deine zu beantworten. Einloggen geht gewöhnlich über das Registrieren was natürlich schon etwas viel verlangt ist .. ich meine das war nicht die Intention der Fragestellung des Threads. Da ich nicht grad nen Asci Artist bin konnt ichs auch nicht auf die schnelle mal malen

kk trotzdem thx.

✔ Problem mit Template-Struktur

Joe

Erfahrenes Mitglied

Maik

Joe

Erfahrenes Mitglied

Maik

Joe

Erfahrenes Mitglied

Maik

Joe

Erfahrenes Mitglied

Maik

Maik

Joe

Erfahrenes Mitglied

Neue Beiträge