CSS-Layout Browser Probleme

Edures · 15. November 2006

hallo

hab eine hp erstellt mit css-container und hab auch einen php code dabei.

die Seite hab ich mir immer im IE angeschaut und da passt es perfekt, nun hab ich auch im opera und firefox die page getestet, jedoch schaut das nicht mehr gut aus.

Deshalb poste ich euch mein Stylesheet und ich hoffe ihr könnt mir helfen.

Probleme Opera:

die Seite ist nich mehr zentriert
das letzte div element wird nicht angezeigt
die positionierung im verschaltetm container ist aufgehoben

probleme Firefox

background bild in der navigation wird nicht angezeigt
seite ist nicht zentriert
die positionierung im verschaltetm container ist aufgehoben

Code:

body {
	text-align:center;
	background-color:#666666;
	z-index: 100%;
}

#content { 
	position:static;
	width:802px;
	background-color:#E4E4E4;
}

#header {
	position: static;
	text-align:left;
	height: 200px;
	border: 1px solid #993300;
}

#navigation {
	text-align:center;
	position:static;
	width: 800px;
	height: 25px;
	background-color: #FFFFFF;
	background-image:url(../Menü/Bilder/menueverlauf.jpg);
	background-repeat: no-repeat;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #993300;
	border-right-color: #993300;
	border-bottom-color: #993300;
	border-left-color: #993300;
}

#right {
	position: static;
	float: left;
	width: 230px;
	height: 550px;
	text-align: center;
	background-image:url(../img/bg_left.gif);
	background-repeat: repeat;
	border: 1px solid #993300;
}
#main {
	position: static;
	float: left;
	width: 569px;
	text-align:left;
	height: 550px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #993300;
	border-right-color: #993300;
	border-bottom-color: #993300;
	border-left-color: #993300;
	background-color: #EAEAEA;
}
#inline_right {
	position: static;
	width: 200px;
	height: 430px;
	margin-top: 60px;
	text-align: center;
	background-image:url(../img/right/box.gif);
	background-repeat: no-repeat;
}
#inline_right_main {
	position: static;
	text-align: center;
	width: 180px;
	height: 365px;
	margin-top: 40px;
	
}

#inline_right_info {
	position: static;
	text-align: center;
	width: 180px;
	height: 40px;
	margin-top: 10px;
	
}
#inline_right_more {
	position: static;
	text-align: center;
	width: 20px;
	height: 20px;
	margin-top: 20px;
	
}
.Stil1 {
	color: #FF0000;
	font-weight: bold;
}
.abstand_main {
margin-left: 20px;
}


.textblock_ub {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	left: 10px;
	font-weight: bold;
	font-size: 12px;
	color: #993300;
}

.right_ub {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left: 10px;
	font-weight: bold;
	font-size: 12px;
	color: #993300;
	border: thin none #CCCCCC;
}
.textblock_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	margin-bottom: 10px;
}
.üb1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bolder;
	color: #666666;
	margin-left: 20px;
	margin-top: 15px;
}

.abstand {
	margin-right: 25px;
	margin-left: 25px;
	
}
.nav-schrift {
	text-decoration:none;
	font-family: Verdana;
	font-size: 11px;
	font-weight: bolder;
	color: #FFFFFF;
	margin-top: 7px;
}

.nav-schrift:link {
	text-decoration: none;
	color: #FFFFFF;
}
.nav-schrift:visited {
	text-decoration: none;
	color: #FFFFFF;
}
.nav-schrift:hover {
	text-decoration: none;
	color: #CCCCCC;
}
.nav-schrift:active {
	text-decoration: none;
	color: #FFFFFF;
}
.schattenrechts { 
	background-image:url(../shadow/senkrecht.gif); 
	background-repeat:repeat-y; 
} 

.schattenunten { 
	background-image:url(../shadow/senkrecht.gif); 
	background-repeat:repeat-x; 
}
.right_info_fett {
	font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
}

.mehr {
	text-decoration:none;
	font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
	color: #999999;
	
}
.mehr:link {
	color: #999999;
	text-decoration: none;
}
.mehr:visited {
	color: #999999;
	text-decoration: none;
}
.mehr:hover {
	color: #993300;
	text-decoration: none;
}
.mehr:active {
	text-decoration: none;
}

Maik · 15. November 2006

Um die Seite im Fenster horizontal zu zentrieren, empfehle ich dir:

Code:

#content { 
	position:static;
	width:802px;
	background-color:#E4E4E4;
        margin: 0 auto;
}

Für alles weitere solltest du hier den HTML-Code posten, oder noch besser den Link zur Seite nennen, damit man da einen Blick drauf werfen kann, denn aufgrund des CSS-Codes lässt sich als Außenstehender nicht nachvollziehen, welche DIVs du jetzt konkret meinst

Edures · 16. November 2006

Danke
ich habs jetzt so gelöst ist aber eh das gleiche

margin-left: auto;
margin-right: auto;

und noch der code einer seite die mit dem css formatiert wird

Code:

<?php


   include("functions/functions.inc.php");
   
   
   //Überprüfen auf welcher Seite wir uns befinden
   if ( isset ( $_REQUEST["seite"] ) && $_REQUEST["seite"] != "")
   {
   		$seite = $_REQUEST["seite"];  
   }
   else
   {
   		$seite = 1;	
   }	
   
   
   connection();
   
   //Bestimmen der Einträge-Anzahl
   $gesamt = howmany_news();
   $seitengesamt = ceil ($gesamt / 5);
   $offset = ($seite - 1) *5;
   
   
   
   $query = "SELECT * FROM dbnews ORDER BY id DESC LIMIT " . $offset . ", 5";
   
   $result = mysql_query($query);
   
   if ( ! $result )
   {
      die("Fehler");
   }

   $anzahl = mysql_num_rows( $result );
   
   
   
   
  // eventsauslese
   
   
   
   $event_query = "SELECT * FROM dbevents ORDER BY DATUM";
   
   $event_result = mysql_query($event_query);
   
   if ( ! $event_result )
   {
      die("Fehler");
   }
	
	$event = mysql_fetch_array($event_result);

?>

<!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=iso-8859-1" />

<title>Antenne News</title>
<link href="css/Antenne.css" rel="stylesheet" type="text/css" />
</head>


<div id="content">

	<div id="header">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="200">
        <param name="movie" value="swf/header.swf" />
        <param name="quality" value="high" />
        <embed src="swf/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="200"></embed>
      </object>
	</div>
	
	<div id="navigation" align="center">
	
	  <p class="nav-schrift" >
	   <img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r5" width="9" height="9" border="0" align="baseline"  /> <a class="nav-schrift" href="news.php">NEWS</a>
	   <span class="abstand"></span>
		
		
			   
		<img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r4" width="9" height="9" border="0" align="baseline" />  <a class="nav-schrift"  href="events.php">EVENTS</a> 
		<span class="abstand"></span>
		
			
		<img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r3" width="9" height="9" border="0" align="baseline" /> <a class="nav-schrift"  href="gallerie.php">GALLERY</a> 
	   <span class="abstand"></span>
	   
	   
	   <img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r2" width="9" height="9" border="0" align="baseline" />  <a class="nav-schrift"  href="kunden.php">KUNDEN</a> 
	    <span class="abstand"></span>
		
		
	   <img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r1" width="9" height="9" border="0" align="baseline" />  <a class="nav-schrift"  href="kontakt.php">KONTAKT</a>      </p>
	</div>
	
	
	<div id="main">
	
	<p class="üb1">Aktuelles von uns</p>
	
	<?php
  	for ( $i=1; $i<= $anzahl; $i++)
	{
    	$datensatz = mysql_fetch_array( $result );   
	?>
	<table  width="350" border="0" class="abstand_main">
    <tr>
      <td width="250" >
	  <p class="textblock_ub"><img src="forms/rot.gif" width="9" height="9" /><?php echo " ". $datensatz["UB"];?></p>	  </td>
    </tr>
    <tr>
      <td align="justify" valign="top"><p class="textblock_text"><?php echo $datensatz["TEXT"]; ?> 
	  <a class="mehr" href="mehr_news.php?id=<?php echo $datensatz["ID"]; ?>">[mehr...]</a></p></td>
	  </tr>
	</table>
	
	
	<?php
  	} 
  	?>
	</div>
	
	<div id="right">
		<div id="inline_right">
			<div id="inline_right_main">
				
				<table align="center">
				<tr>
				<td class="right_ub" height="20">
				<img src="forms/rot.gif" alt="r5" width="9" height="9" border="0" align="baseline" /> <?php echo $event["UB"]; ?>				</td>
				</tr>
				
			
				<tr>
				<td>
				<img src="<?php echo $event["BILDPFAD"];?>" />				</td>
				</tr>
				</table>
				
				<div id="inline_right_info">
				
				<table align="center">
				<tr>
				<td align="left" class="textblock_text">Datum:</td>
				<td align="center" class="right_info_fett"><?php echo $event["DATUM"];?></td>
				</tr>
				
				<tr>
				<td align="left" class="textblock_text">Eintritt:</td>
				<td align="center" class="right_info_fett"><?php echo $event["EINTRITT"];?></td>
				</tr>
				
				<tr>
				<td align="left" class="textblock_text">Ort:</td>
				<td align="center" class="right_info_fett"><?php echo $event["ORT"];?></td>
				</tr>				
				</table>
				</div>

			<div class="mehr" id=inline_right_more>
				<a href="mehr_events.php?<?php echo $event["ID"]; ?>" class="mehr" >[mehr...]</a>				</div>
			</div>
		</div>
	</div>
	
	<div id="navigation">	</div>
</div>






</body>
</html>

Maik · 16. November 2006

So wie ich das derzeit überblicke, muß nach den floatenden Boxen wieder der normale Textfluss im Dokument hergestellt werden:

Code:

.clear {
clear: left;
font-size: 1px;
}

Das DIV .clear fügst du nach dem DIV #right ein:

Code:

<div id="main">...</div>
<div id="right">...</div>
<div class="clear">&nbsp;</div>

Desweiteren muß eine ID in einem Dokument eindeutig sein, d.h. sie darf nur einmal darin vorkommen. Die ID #navigation wird aber zweimal aufgerufen. In diesem Fall muß stattdessen eine Klasse .navigation verwendet werden.

Zudem fehlt in dem Dokument der öffnende <body>-Tag.

Edures · 16. November 2006

das hab ich jetzt auch gelöst hab statt margin einfach in dem div außerhalb padding benutzt und siehe da es

jetzt hab ich nur noch ein problem mit Firefox
denn dieser zeigt die Bilder in der navigation nicht an

Maik · 16. November 2006

Bin mir jetzt nicht sicher, aber es könnte evtl. hieran liegen:

Code:

<img src="Men&uuml;/Bilder/9x9-rot-r-01.gif" alt="r4" width="9" height="9" border="0" align="baseline" />

Probier es stattdessen mal so:

Code:

<img src="Menü/Bilder/9x9-rot-r-01.gif" alt="r4" width="9" height="9" border="0" align="baseline" />

Edures · 16. November 2006

nein das war es leider nicht

es wird im firefox nur der alt tag angezeigt d.h. es steht da r4

aber auch das bild das ich im css container navigation eingefügt habe funktioniert nicht

hab schon probiert das mit z-index = 1 oder display: block aber nichts hat funktioniert

Maik · 16. November 2006

Keine Ahnung, was da bei dir falsch läuft, aber bei mir zeigt Firefox die Grafiken und das Hintergrundbild im DIV #navigation an. (Habe zu Testzwecken ein paar Grafiken von meiner Festplatte in dem Dokument eingefügt)

CSS-Layout Browser Probleme

Edures

Grünschnabel

Maik

Edures

Grünschnabel

Maik

Edures

Grünschnabel

Maik

Edures

Grünschnabel

Maik

Neue Beiträge