Antworten auf deine Fragen:
Neues Thema erstellen

Shoutbox sprengt design (css+php+html)

BlackHawk3

Aktives Mitglied

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

Excel (SVERWEIS...)

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

Aktives Mitglied

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

Aktives Mitglied

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 :D

Thx für dein Hinweis MainAngler

LG
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben