Zum Inhalt springen

merkwürdiges Problem mit CSS Klasse

pascal87

Von pascal87
in Webdesign

 Teilen

Empfohlene Beiträge

pascal87

pascal87

Geschrieben
Geschrieben

Hi!

Seit gestern Abend habe ich ein recht merkwürdiges Problem, auch nach allem suchen stoße ich einfach nicht auf die Ursache.

Ich habe eine datei "formate.css" über die das gesamte Layout formatiert wird, so auch die Navigation, eine einfache Liste, bei der beim überfahren mit der Mouse die Hintergrundfarbe geändert wird, soweit alles klar.

Mein Problem: Scheinbar werden alle Links, die ich auf der Seite einbaue mit den Eigenschaften, die ich nur der Navi gegeben habe formatiert, als wäre ein div an der falsches Stelle geschlossen o.ä. aber das ist nicht der Fall.

Hier mal der Code der Index.php:



<?php

error_reporting(E_ALL);

echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";

echo "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";

echo "<html>\n";

echo     "<head>\n";

echo         "<title>Home - xxxxxx</title>\n";

echo         "<link rel=\"stylesheet\" type=\"text/css\" href=\"formate.css\" />\n";

echo         "<meta http-equiv=\"Content-Type\"content=\"text/html; charset=ISO-8859-1\" />\n";

echo     "</head>\n";

echo     "<body>\n";

echo         "<div id=\"main\">\n";

echo             "<div id=\"inner_banner\">\n";

                       include "banner.php";

echo             "</div>\n";

echo             "<div id=\"inner_navi_txt\">\n";

                       include "navi.php";

echo             "</div>\n";

echo             "<div id=\"inner_content_txt\">\n";

                       include "inhalt.php";

echo             "</div>\n";

echo             "<div id=\"inner_thema_txt\">\n";

                       include "thema.php";

echo             "</div>\n";

echo "            <br style=\"clear:both;\" />\n";

echo         "</div>\n";

echo     "</body>\n";

echo "</html>\n";

?>

[/PHP]

Die Formate.css

[code] /* PHP Training */ /* designed by Peter Soltau | webmaster@peter-soltau.de */ /* last update by Peter Soltau */ /*******************************/ * { padding:0px; margin:0px; } body { background-color: #FFFFFF;} /**** Titles *****/ h1 { font-size:16px; color:#000000; font-family:Arial; } h2 { font-size:14px; color:#003366; padding-bottom:5px; font-family:Arial; } /**** Banner *****/ /*******************************/ div#inner_banner { padding:5px; margin-bottom:5px; float:left; height:200px; width:684px; background-color: #FFFFFF; border:1px solid #6699CC; } /**** Navigation *****/ /*******************************/ p#title_box { color:#FFFFFF; background-color:#CC3333; font-weight:bold; font-size:15px; margin-bottom:5px; padding-left:10px; padding-top:5px; padding-bottom:5px; font-family:Arial; font-size:14px; } div#inner_navi_txt { width:158px; height:210px; background-color:#FFFFFF; border:1px solid #CC3333; float: right; margin-left:5px; } [B]ul#navi_main { margin-left: 0px !important; list-style-type: none; } ul#navi_main LI A { display: block; text-decoration: none; padding-left:23px; margin-bottom:3px; } ul#navi_main LI A:link, A:visited { color:#006699; border: 1px; padding-left:23px; margin-bottom:3px; } ul#navi_main LI A:hover, A:active { background-color:#CC3333; color:#FFFFFF; border: 1px; padding-left:23px; margin-bottom:3px; }[/B] /**** Mainpage *****/ /*******************************/ div#main { background-color:#EEEEEE; width:861px; padding:20px; margin-top:20px; margin-left:auto; margin-right:auto; } p#title_content { color:#FFFFFF; background-color:#6699CC; font-weight:bold; font-size:15px; margin-bottom:5px; padding-left:5px; padding-top:5px; padding-bottom:5px; font-family:Arial; font-size:14px; } div#inner_content_txt { width:694px; background-color:#FFFFFF; color:#006699; font-family:Arial; border:1px solid #6699CC; float:left; font-size:14px; } div#content { margin-top:5px; padding-left:5px; padding-right:5px; } span#date { float:right; font-size:14px; } /**** Thema *****/ /*******************************/ div#inner_thema_txt { width:158px; height:188px; background-color:#FFFFFF; border:1px solid #CC3333; float: right; margin-left:5px; } [B]ul#navi_thema { margin-left: 0px !important; list-style-type: none; } ul#navi_thema LI A { display: block; text-decoration: none; padding-left:23px; margin-bottom:3px; } ul#navi_thema LI A:link, A:visited { color:#006699; border: 1px; padding-left:23px; margin-bottom:3px; } ul#navi_thema LI A:hover, A:active { background-color:#CC3333; color:#FFFFFF; border: 1px; padding-left:23px; margin-bottom:3px; }[/B] /**** News *****/ /*******************************/ [COLOR="Blue"]a.news { color:#006699; font-family: Arial; text-decoration:none; padding:none; margin:none; } a.news:link { color:#006699; font-family: Arial; text-decoration:none; padding:none; margin:none; } a.news:visited { color:#006699; font-family: Arial; text-decoration:none; padding:none; margin:none; } a.news:hover { color:#006699; font-family: Arial; text-decoration:none; padding:none; margin:none; } a.news:active { color:#006699; font-family: Arial; text-decoration:none; padding:none; margin:none; }[/COLOR] [/code]

Ich habe die Stellen fett gemacht, wo ich die Navi und Unternavi formatiere, Problem: Bei den Links der Klasse .news (habe ich blau gemacht) ziehen auch die Eigenschaften der Navigationen.

Link: PHP-Training wie Ihr seht werden die Links, "Details", "Kommentare", "An einen Freund senden" beim anklicken "active" rot hinterlegt und verschoben, also die Eigenschaften von meinen Navis....

Die Links habe ich mit <a class="news" href="blaaa">ccc</a> versehen und trotzdem werden auch die anderen Eigenschaftne gezogen.

Würde mich freuen, wenn jemandem etwas dazu einfällt!

Link zu diesem Kommentar
Auf anderen Seiten teilen
sunny.p

sunny.p

Geschrieben
Geschrieben

Ohne größeres Studium Deines (umfangreichen) ;) Quellcodes würde ich jetzt einfach mal annehmen, dass sich die Vorgaben aus den Links der seitlichen Navi auf die anderen Links vererbt.

Hast Du die Definitionen für die Navi-Links wirklich "lokal" angelegt oder wirken sie sich doch auf das basis <a>-Tag aus?

Gruß

Peter

Link zu diesem Kommentar
Auf anderen Seiten teilen
pascal87

pascal87

Geschrieben
  • Autor
Geschrieben
Ohne größeres Studium Deines (umfangreichen) ;) Quellcodes würde ich jetzt einfach mal annehmen, dass sich die Vorgaben aus den Links der seitlichen Navi auf die anderen Links vererbt.

Hast Du die Definitionen für die Navi-Links wirklich "lokal" angelegt oder wirken sie sich doch auf das basis <a>-Tag aus?

Gruß

Peter

Lokal habe ich die Eigenschaften nicht angegeben, alles in die Formate.css ausgelagert, die Eigenschaften der Navi wirken sich auf alle <a> aus, unerheblich welche Klasse sie haben, auch wenn ich eine Extraklasse definiere, dann kommen nur die Eigenschaften von der dazu.

Ich könnte wohl eine separate "navi.css" anlegen und die Navieigenschaften dorthin auslagern aber normalerweise dürften sich die Eigenschaften der Navigation doch auf garnichts anderes auswirken, wenn es nicht mit der entsprechenden Klasse deklariert ist bzw. es sich nicht im entsprechenen <div> befindet ?

Ein derartiges Problem hatte ich noch bei keinem Projekt, deshalb lag meine Vermutung eher in der Richtung,dass ich durch den php-Code irgendetwas auslöse, weil dies meine ersten Schritte mit php sind.

Wobei deine Idee mit der Vererbung interessant klingt, werde mal nochmal auf die Suche gehen!

Danke erstmal!

Peter

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
Kommt vieleicht irgendwer darauf, warum die CSS Klasse der Navi an die andere Stelle vererbt wird? Bin eigentlich alle anderen Möglichkeiten durchgegangen...

Vielleicht kannst du deinen HTML Code und dein CSS reduzieren und das dennoch nachstellen (also so wenig wie möglich, aber so viel wie nötig). Das würde es für andere viel übersichtlicher machen. Außerdem fehlt bei deinem Code (index.php) ja auch das entscheidende, nämlich das war bei den includes angezeigt wird. Und ich finde deine index.php sehr unsauber und unschön, aber das ist ein andere Thema :)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Krain

Krain

Geschrieben
Geschrieben 



ul#navi_main LI A:link, A:visited {

    color:#006699;

    border: 1px;

    padding-left:23px;

    margin-bottom:3px;

}


ul#navi_main LI A:hover, A:active {

    background-color:#CC3333;

    color:#FFFFFF;

    border: 1px;

    padding-left:23px;

    margin-bottom:3px;

}
Sorry, hatte leider nicht die Zeit, alles durchzulesen - mir ist nur folgendes aufgefallen: IMHO musst du an diesen beiden Stellen jeweils den full qualified path angeben - etwa so: 


ul#navi_main LI A:link, [B]ul#navi_main[/B] A:visited {

    color:#006699;

    border: 1px;

    padding-left:23px;

    margin-bottom:3px;

}


ul#navi_main LI A:hover, [B]ul#navi_main[/B] A:active {

    background-color:#CC3333;

    color:#FFFFFF;

    border: 1px;

    padding-left:23px;

    margin-bottom:3px;

}

Link zu diesem Kommentar
Auf anderen Seiten teilen
pascal87

pascal87

Geschrieben
  • Autor
Geschrieben
Vielleicht kannst du deinen HTML Code und dein CSS reduzieren und das dennoch nachstellen (also so wenig wie möglich, aber so viel wie nötig). Das würde es für andere viel übersichtlicher machen. Außerdem fehlt bei deinem Code (index.php) ja auch das entscheidende, nämlich das war bei den includes angezeigt wird. Und ich finde deine index.php sehr unsauber und unschön, aber das ist ein andere Thema :)

Reduzieren, ja mach ich, haste wohl Recht!

Was meinst du mit "was bei den includes agezeigt wird"?

Was findest du unsauber? Wäre schön zu wissen, wie du den Code der Index.php aufbauen würdest, wenn du ihn kritisiertst...

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

Was findest du unsauber? Wäre schön zu wissen, wie du den Code der Index.php aufbauen würdest, wenn du ihn kritisiertst...



<?php

     error_reporting(E_ALL);


     // showBanner()

     // zeigt das aktuelle Banner an

     function showBanner()

     {

     	$result = "";

     	// Code für Banner zusammenstellen und in $result schreiben

	  return $result;

     }

     //...

     // etc.

     // etc.

     //...


     echo "<?xml version="1.0" ?>"; // wegen den short open tags

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

	<head>

		<title>Home - xxxxxx</title>

		<link rel="stylesheet" type="text/css" href="formate.css" />

		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	</head>

	<body>

		<div id="main">

			<div id="inner_banner">

			<?php

			     echo showBanner();

			?>

			</div>

			<div id="inner_navi_txt">

			<?php

			     echo showNavi();

			?>

			</div>

			<div id="inner_content_txt">

			<?php

			     echo showContent();

			?>

			</div>

			<div id="inner_thema_txt">

			<?php

			     echo showSubject();

			?>

			</div>

			<br style="clear:both;" />

		</div>

	</body>

</html>

 [/php]

Alles in eigene Dateien auszulagern und dann per include einzubinden mag vielleicht total genial aussehen, aber Der Code für eine Seite, verteilt auf 5 Dateien... Wenn da mal bissl mehr code zusammenkommt hast du absolut keinen Überblick mehr und machst es dir selbst schwer.

Mit der Methode oben kannst du die Seite sogar in einem HTML-Editor bearbeiten oder dir zumindest mal so anzeigen lassen, ohne dass HTML ausgeführt wird und du hast schonmal deine Grundseite. Und vorallem musst du nicht tausende Echos machen, nur für 4 Zeilen PHP-code ;) (Und wenn du dein HTML ändern/erweitern willst, tust du dich so auch viel leichter)

EDIT:

Ach ja, und deinen PHP-Code hast du dennoch zentral und ausgelagert...

EDIT2:

Aber ausgaben hast du trotzdem genau an einer Stelle, deswegen das mit dem Return. Wenn du überall verteilt in deinen Dokumenten 1000e Echos machst, wirst du irgendwann verrückt wenn du nach ner fehlerhaften Ausgabe suchst o.ä. ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...