Seltsames Verhalten einer "Div"-Layout-Seite in di

zimboo · Beitrag von **zimboo** » Fr 1. Jul 2005, 07:13

Morgen Community,

ich habe nun - endlich - eine Seite mit Contenido erstellt (Div Layout... von wegen Barrierefreiheit usw.)... und muss jetzt feststellen das diese Seite in Opera und Mozilla Browser ziemlich sch.... aussieht. Alles total verschoben und irgendwie passt gar nix mehr...

Wenn ich das selbe Layout von der Festplatte aus in den verschiedenen Browsern anschaue sieht es überall genau gleich aus... So soll's ja dann auch sein...

Hier mal der link zur "Vorläufigen"-Site

http://www.george-w-arrington.de/contenido/fsj/

Im IE 6.0 SP 1 sieht die Seite auch aus wie sie soll (aber das heisst ja nix

)

Und hier nun der Quellcode, den ich im Layout bei Contenido hinterlegt habe:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Jörg Zimmermann" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/mainstyle.css">
<title></title>
</head>
<a name="#top"></a>
<body>
<div style="width:760px;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #000000;">
	<!-- Bannerbox -->
	<div id="title">
		CMS_CONTAINER[1]
	</div>
                
               
	       <!-- Menü-Box links -->
	       <div id="left">
                              CMS_CONTAINER[2]	
                       </div>

	     <!-- News-Box rechts -->
	     <div id="right">
	            <div>
		CMS_CONTAINER[3]
	           </div><br>
		<div>
		   CMS_CONTAINER[4]
		</div>
	       </div>

	      <!-- Inhalt -->
	      <div id="content">
		<p>CMS_CONTAINER[5]</p>
		<p>CMS_CONTAINER[6]</p>
		<p>CMS_CONTAINER[7]</p>
		<p>CMS_CONTAINER[8]</p>
		<p class="counter">CMS_CONTAINER[9]</p>
		<p>CMS_CONTAINER[10]</p>
		<p>CMS_CONTAINER[11]</p>
		<p>CMS_CONTAINER[12]</p>
		<p>CMS_CONTAINER[13]</p>
		<p>CMS_CONTAINER[14]</p>
                                <p>CMS_CONTAINER[15]</p>
		<p>CMS_CONTAINER[16]</p><br><br>
	

<div id="right" style="background-color:#efeff7;"><img src="upload/gifs/aufwaerts.gif"><a href="#top">nach oben</a></div>
</div>

 <br style="clear:both;" />
</div>
</body>
</html>

Kann es sein, dass Contenido den Code irgendwie verändert??? (Ist mein Layout eventuell nicht xHTML-Konform????)

Hier der Quellcode den Contenido generiert hat:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Jörg Zimmermann" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/mainstyle.css">
<title>.:: Willkommen auf den Seiten des FSJ beim DRK ::.</title>
<meta name="generator" content="CMS Contenido 4.4.5">
<meta name="author" content="J&ouml;rg Zimmermann">
<meta name="date" content="29.06.2005">
<meta name="description" content="Startseite des Internetauftritts des FSJ DRK KV Koeln">
<meta name="keywords" content="FSJ, Freiwilliges Soziales Jahr, FSJ beim DRK, Deutsches Rotes Kreuz, FSJ Trägerschaft durch DRK, Freiwilliges Soziales Jahr beim Deutschen Roten Kreuz">
<meta name="revisit-after" content="10Days">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<a name="#top"></a>
<body>
<div style="width:760px;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #000000;">
	<!-- Bannerbox -->
	<div id="title">
		<img src="http://www.george-w-arrington.de/contenido/fsj/upload/jpg/banner.jpg" border="0">
	</div>
                
               
	       <!-- Menü-Box links -->
	       <div id="left">
                                <div class="menu"> 
   <ul class="e1">
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" style="background-color:#efeff7; color:#426bbd;" href="front_content.php?idcat=23" class="e1p"><img src="upload/gifs/pfeilrechts.gif" style="border:0px;">&nbsp;Startseite </a>
</li>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=24" class="e1p">Das FSJ </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=29" class="e1p">Aus den Seminaren </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=30" class="e1p">Das FSJ-Team </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=32" class="e1p">Bewirb Dich jetzt </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=33" class="e1p">Sie als Einsatzstelle </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=34" class="e1p">Links </a>
<!-- Generated by Contenido 4.4.5-->
    <a class="menu" href="front_content.php?idcat=35" class="e1p">Impressum </a>
   </ul> 
  </div>
	
                       </div>

	     <!-- News-Box rechts -->
	     <div id="right">
	            <div>
		<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="30" colspan="2" ></td></tr><tr><td height="21" width="22" style=" font-size: 15; background-color: #426BBD"><img src="upload/gifs/pfeilrechts.gif" width="10" height="10" border="0"></td><td width="100%" style="border: 1px; border-left:0px; border-color: #426BBD; border-style: dashed; background-color: #efeff7; padding-left:2px; font-size: small; color:#426bbd; font-weight:bold;">Aus den Seminaren:</td></tr><tr><td colspan="4" class="text" height="30"style="font-size: small; padding-left:5px"><img src="upload/gifs/pfeilrechts.gif">&nbsp;<a href="front_content.php?client=3&lang=3&idcat=29&idart=37&m=&s=">Erfahrungsbericht aus dem FSJ</a></td></tr><tr><td colspan="4" class="text" height="30"style="font-size: small; padding-left:5px"><img src="upload/gifs/pfeilrechts.gif">&nbsp;<a href="front_content.php?client=3&lang=3&idcat=29&idart=36&m=&s=">Leben auf Burg Gemen</a></td></tr><tr><td colspan="4" class="text" height="30"style="font-size: small; padding-left:5px"><img src="upload/gifs/pfeilrechts.gif">&nbsp;<a href="front_content.php?client=3&lang=3&idcat=29&idart=35&m=&s=">Schade - die Woche war so schnell vorbei</a></td></tr></table><br> 


	           </div><br>
		<div>
		    


		</div>
	       </div>

	      <!-- Inhalt -->
	      <div id="content">
		<p><H1>Willkommen beim FSJ des DRK Köln</H1></p>
		<p>Hier erfährst Du einiges über das Wie, Wer, Wo und Wann bezüglich des "Freiwilligen Sozialen Jahr" unter der Leitung des Deutschen Roten Kreuz Köln</p>
		<p><p style="text-align:center;"><img src="http://www.george-w-arrington.de/contenido/fsj/upload/jpg/gemeinsam1.jpg" border="0"></p></p>
		<p><P align=center>An der Bottmühle 2+15 - 50678 Köln - Telefon (0221) 93 190 16 </P></p>
		<p class="counter">
</p>
		<p>
</p>
		<p>
</p>
		<p>
</p>
		<p>
</p>
		<p>
</p>
                                <p>
</p>
		<p>
</p><br><br>
	

<div id="right" style="background-color:#efeff7;"><img src="upload/gifs/aufwaerts.gif"><a href="#top">nach oben</a></div>
</div>

 <br style="clear:both;" />
</div>
</body>
</html>

Und hier noch das Stylesheet:

Code: Alles auswählen

body 
{
 font-family:Verdana;
 font-size:12px;
 background-color:#bdbec6;
 text-align:center;
 margin:0px;
}
h1 {font-size:18px;background-color:#426bbd;padding:3px;text-align:center;font-weight:bold;color:#ffffff;margin-bottom:2px;}
h2 {font-size:16px;background-color:#426bbd;padding:3px;text-align:center;font-weight:bold;color:#ffffff;}
h3 {font-size:14px;color:#426bbd;}

p.counter {
 text-align:center;
 font-weight:bold;
}

a:link, a:visited, a:active, a:hover
{ 
  text-decoration:underline;
  font-weight:normal;
  color:#426bbd;
  font-size:12px;
}
a:active, a:hover
{
  text-decoration: underline overline; 
  color:#cc3300;
}
a.menu {
 display:block;
 padding:3px;
 
 border-top:1px dashed #000;
 background-color:#426bbd;
 text-align:center;
 color:#efeff7;
 text-decoration:none;
 }
a.menu:link, a.menu:visited
{ 
  color:#efeff7;
 background-color:#426bbd;
 text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{ 
 color:#426bbd; font-weight:bold;
 background-color:#efeff7;
}

#title {
height:34px;
padding:0px;
background-color:#426bbd;
border-bottom:1px solid #000;
}
#left {
background-color:#426bbd;
width:130px;
float:left;
}
#right {
background-color:#bdbec6;
width:120px;
float:right;
}
#content {
border:1px solid #efeff7;
background-color:#efeff7;
width:465px;
float:left;
padding:0px 3px;
}

Vielleicht kann mir ja jemand nen Tipp geben, der ähnliche Erfahrungen gemacht hat...

Gruß an Alle

Jörg

i-fekt · Beitrag von **i-fekt** » Fr 1. Jul 2005, 11:57

Wenn es etwas zerreist, liegt das an dir. Du musst die Module natürlich auch anpassen von wegen HTML Code.

Beleuchtfix · Beitrag von **Beleuchtfix** » Fr 1. Jul 2005, 13:53

Ein Problem, das ich sehe: du hast title mit einer height von 34px eingegeben, das Bild ist garantiert größer (82 habe ich gerade herausgefunden).

Das behebt schon einiges

Viel Erfolg
Florian

Übrigens bei www.x28.de findest du auch Module für eine Artikelliste in CSS, ohne Tabelle

zimboo · Beitrag von **zimboo** » Fr 1. Jul 2005, 19:47

Hallo Beleuchtfix,

was so'n blödes "height" alles anrichten kann

Also da hätte ich ja wirklich auch von alleine drauf kommen können... Seltsam ist halt nur, das IE das ganz offensichtlich völlig ignoriert und die höhe an das tatsächliche Bild anpasst.... Während Mozilla und Opera genau das machen was man ja eigentlich auch will.... auch wenn es dann unter umständen falsch ist...l

Aber nun sieht die Site in allen drei Browsern gleich ... ääähm gut???? aus

Danke und Gruß us Kölle

Schöne WE

Jörg

Beleuchtfix · Beitrag von **Beleuchtfix** » Fr 1. Jul 2005, 20:20

Hallo Jörg,

freut mich, dass es klappt. Übrigens ein tolles Tool für den Firefox ist das Webdeveloper-Plugin.

Kann ich nur wärmstens empfehlen. Da habe ich mal eben die Height im CSS-Editor geändert und schon sah es richtig aus.

Übrigens, man kann auch negative Margins setzten, die dritte Ebene wird ziemlich verschluckt.

Gruß
Florian

Darth-Vader · Beitrag von **Darth-Vader** » Fr 1. Jul 2005, 22:44

@Beleuchtfix: gib ma bitte URL!

Beitrag von **Halchteranerin** » Fr 1. Jul 2005, 22:54

nicht dass ich Beleuchtfix heisse ...

http://extensionroom.mozdev.org/more-info/webdeveloper

Beleuchtfix · Beitrag von **Beleuchtfix** » Mo 4. Jul 2005, 17:18

@Christa Danke, ich war ein paar Tage weg.

Übrigens im Firefox unter Extras / Erweiterungen und dann Erweiterungen Herunterladen kommt man schnell an die Plugins.

Gruß
Florian