Shoutbox sprengt design (css+php+html)

BlackHawk3 · 08.04.2009

Hallo,
ich habe folgendes Problem:

Ist man im IE unterwegs wird alles richtig angezeigt, aber im Mozilla nicht (was mir persönlich wichtiger ist).

Das komplette Design is mit CSS umgesetzt.

Code der Seite:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link type="text/css" rel="stylesheet" href="stylesheets.css" />
</head>

<body style="background-image:url(bilder/background.png)">

<div class="body">
<div><img src="bilder/banners.png" border="0" /></div>
<br />
<div class="button">

<a href="#" class="button_normal"><span class="button">> Home</span></a>
<a href="#" class="button_normal"><span class="button">> Member</span></a>
<a href="#" class="button_normal"><span class="button">> Forum</span></a>
<a href="#" class="button_normal"><span class="button">> G&auml;stebuch</span></a>
<a href="#" class="button_normal"><span class="button">> Tutorials</span></a>
<a href="#" class="button_normal"><span class="button">> Partner</span></a>
<a href="#" class="button_normal"><span class="button">> &Uuml;ber uns</span></a>
<a href="#" class="button_normal"><span class="button">> Kontakt</span></a>
<br />
<a href="indexj.php"><img src="bilder/jumper_klein.png" border="0" /></a>
<!-- Shoutbox -->
<?PHP
include("shout.php");
?>
<!--SHoutbox ende -->
</div><!-- Button ende -->
<div style="float:right; margin-right:50px;">
<img src="bilder/shufflemann.png" width="100" height="400"/>
</div>
<div class="welcome">
	blablablabla
</div><!--Welcome ende --><br />


<!--News -->
<?PHP
$subfolder = "01scripts/"; // Unterverzeichnis
$modul = "01article"; // Modul- und Verzeichnisname (ID-Name), ggf. &auml;ndern

// ->>An dieser Stelle k&ouml;nnen weitere, optionale Parameter eingef&uuml;gt werden<<-

include($subfolder."01module/".$modul."/01article.php");
?>
<!-- News ende -->



</div><!-- Body ende -->

</body>
</html>

Code der CSS-Datei:

Code:

@charset "utf-8";
/* CSS Document */

div.body
{
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#000000;
	width:800px;
	border:1px solid #400002;
	margin:auto;
}

div.button
{
	margin-left:20px;
	width:100px;
	float:left;
}

div.welcome
{
	width:500px;
	margin: auto;
}

span.button
{
	margin-left:15px;
}

a.button_normal:link, a.button_normal:visited
{
	color:#ffffff;
	background-image:url(bilder/b_bg.png);
	display:block;
	width: 100px;
	height: 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-decoration:none;
	border:0;
	margin:0;
	padding-top:10px;
	
}
	
a.button_normal:hover, a.button_normal:active
{
	color: #ffffff;
	background-image:url(bilder/b_bg_active.png);
	display:block;
	border:0;
	width: 100px;
	height: 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

Und der Code fürs Stylesheet für das Newssystem:

Code:

@charset "utf-8";
/* CSS Document */

/* Äußere Box für den gesamten Artikel-Bereich - DIV selber (id = 01article) */
#_01article{
	text-align:left;
        display:block;
	}

.box_out{
	width: 600px;
	margin-left:150px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	}

/* Link-Definitionen (box_out) */
.box_out a:link,.box_out a:visited  {
	text-decoration: none;
	color: #fff;
}
.box_out a:hover  {
	text-decoration: underline;
	color: #fff;
}


	
	
	



	
	
.artikel_headline {
	width:100%;
	}
	
/* Artikel-Titel (innerhalb von artikel_headline) */
h2.titel{
	font-weight:bold;
	font-size:1.4em;
	color:#fff;
	margin-bottom:0;
	padding-bottom:10px;
	text-decoration:none;
	}

/* Link-Definitionen (titel) */
.titel a:link, .titel a:visited {
	text-decoration:none;
	border:0;
	color:#fff;
	}

/* Informationen zum Artikel unterhalb des Titels */
.headline_small, .footline_small {
	width:100%;
	font-size:10px;
	text-decoration:none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	}
	
/* Link-Definitionen (artikel_headline) */
.artikel_headline a:link,.artikel_headline a:visited  {
	text-decoration: none;
	color: #fff;
}
.artikel_headline a:hover  {
	text-decoration: none;
	color: #fff;
}




	
	

	
	
	
	
	
/* Aussehen der Artikel-DIV-Box */
.artikel_textbox {
	border-bottom: 1px dotted #999;
	}
	
/* Aussehen der Artikel-Texte / der Artikel-DIV-Box */
.artikel_text, body.mceContentBody {
	font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	}

/* Link-Definitionen (artikel_text) */
.artikel_text a:link, .artikel_text a:visited, .mceContentBody a  {
	text-decoration: none;
	color: #0099FF;
}
.artikel_text a:hover  {
	text-decoration: underline;
	color: #0099ff;
}
	
/* CSS-Eigenschaten für das Kategorie-Bild */

.artikel_catimg img {
	text-align:left;
	float:left;
	padding:5px;
	padding-top:15px;
	}

	
	
	






	

/* Definition für TABELLE mit der Seiten-Navigation */
.table_page {
	padding-top:15px;
	width:100%;
	border:0;
	}
	
/* Textdefinition für Seiten-Navigation (Vor, Zurück etc.) */
.page_text {
	font-size:12px;
	text-decoration:none;
	}
	
/* Definition für Tabellenabschnitt mit weiteren Feldern (Suchbox, RSS, Archiv, Seiten etc.) */
.table_page_fields {
	padding-top:15px;
	width:150px;
	border:0;
	}
	
.table_page_fields td {
	padding:5px;
	}




	
	
/* Tabelle für Archiv-Ansicht */
.table_archiv {
	width:100%;
	border:0;
	}

.table_archiv td {
	padding:5px;
	}
	
.table_archiv_headline {
	font-weight:bold;
	}
	
	
	

	
/* Definition für Kommentar-Box (Anzeige von Kommentaren) */
.commentbitbox {
	width:600px;
	text-align:left;
	border: 1px dotted #999;
	padding:8px;
	}
	
.comment_text {
	font-size:10px;
	text-decoration:none;
	}

/* Definition für "Kommentar-Hinzufügen"-Tabelle */
.commentaddbox {
	width:100%;
	text-align:left;
	border: 1px dotted #999;
	padding:8px;
	}
	

	

	
/* Aussehen von kleinem Text */
.small01acp, .small01acp a:link,.small01acp a:visited {
	font-size:10px;
	text-decoration:none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	}
.small01acp a:link,.small01acp a:visited {
	text-decoration:underline;
	}
.box_out a:hover  {
	text-decoration: none;
}
	
/* Hervorgehobener, wichtiger Text */
.highlight {
	font-weight:bold;
	color:red;
	}
	


	
	



/* Formular-Elemente */
/* Normales Textfeld */
.input_field {

	}
	
/* Formular-Buttons */
.input_button {

	}
	
/* Dropdown-Boxen */
.input_selectfield {
	
	}
	
	
	
	
	
	
	
/* Rahmen bei Bildern mit Link entfernen */
img {
	border: 0;
	}
	
.float_left {
	text-align:left;
	float:left;
	}
.float_right {
	text-align:right;
	float:right;
	}
	
	
/* Copyright-Hinweis */
/* Sichtbare Hinweis darf ohne eine entsprechende Lizenz NICHT entfernt werden! */
.copyright {
	padding-top:15px;
	font-size:11px;
	text-decoration:none;
	}

.lightbox {

}

Es wäre super toll wenn mir da einer weiterhelfen könnte. Ich verzweifel langsam daran. =(

LG

MainAngler · 08.04.2009

AW: Shoutbox sprengt design (css+php+html)

Also "laut" der Web Developer Toolbar scheinen es zwei versch. Boxen zu sein:uhm:, deshalb sind die beiden auch nicht direkt untereinander.

Die gelbe Linie welche ich eingezeichnet habe schein eine extra Box (?) zu sein.
Das hellgrüne (2x) zeigt die einzelnen Boxen.

Anklicken zum Vergrößern:

BlackHawk3 · 08.04.2009

AW: Shoutbox sprengt design (css+php+html)

Hmmm okay.. das bedeutet also das für jeden Newseintrag der geschrieben wird eine neue box generiert wird.... das is hier aber irgendwie gar nich mal so gut^^

könnte es helfen wenn ich das php-include für die news in ein extra div reinmache? ich frag das, weil ichs schonma gemacht habe, es aber nicht geklappt hatte. und ich sag das jetzt weil es sein kann das ich damals das falsch gemacht habe^^

BlackHawk3 · 09.04.2009

AW: Shoutbox sprengt design (css+php+html)

So habs Problem gelöst!

Habe einfach einen Container gebaut in dem 2 Divs drinne sind. Einmal für die Navileiste und einmal für den Content und die mit float nebeneinander angeordnet....für die, die es interessiert

Thx für dein Hinweis MainAngler

LG

MainAngler · 09.04.2009

AW: Shoutbox sprengt design (css+php+html)

Immer wieder gern!