✔ CSS Definition über PHP (!)nach dem Header ergänzen

Status
Nicht offen für weitere Antworten.
flyMASTER

flyMASTER

Grünschnabel
Ich bastle gerade ein wenig PHP und erstelle mir kleinere Scripte (Gallerie, News, Gästebuch udg.)
Um es ganz besonders elegant zu machen wollte ich in die Hauptseite ein CSS-Definitionsfile im Header mit einbinden, dass nur die classes und id's enthält die ich allgemein auf der Seite immer wieder verwende.
In den kleinen Scripten (die ich per Include in die Hauptseite einbaue - sie liegen in Unterordner) brauche ich aber wiederum noch extra CSS Definitionen, die in Unterordner wie $scriptname/inc/style.css liegen.
Wenn ich ein weiteres CSS File im Header linke, überschreibt dieses nur das vorangegangene statt es zu ergänzen... wie bekomme ich es hin das der Phraser die eine CSS Definition um die andere ergänzt? Geht das ggf. auch ausserhalb des Headers?
 
Hi,

hast du das Stylesheet schon mal vor den anderen Stylesheets im Dokumentheader notiert?

So kann es auch nicht die nachfolgenden CSS-Formatierungen "überschreiben".
 
Ja...
Code: 
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>Mainpage</title>
<link href=\"inc/style.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"irgendeinscriptbla/inc/style.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>";

Das zweite File überschreibt immer das erste File anstatt das vorangegangene nur zu ergänzen... wie bekomme ich denn hin das es sich "nur" ergänzt?
 
michaelsinterface hat gesagt.:
Wie lauten denn die Quellcodes der beiden CSS-Dateien?
Zum Vergrößern anklicken....

Der lautet für die index.php
Code: 
/* INDEX Definitionen */

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #0000FF;
	text-decoration: none;
}

a:focus {
	color: #0000FF;
	text-decoration: none;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	
}

.extra_a {
	font-size: 10px;
}

.rahmen {
	background-color: #FFFFFF;
	color: #000000;
	text-align: center;
}

#rahmen_linksoben {
	width: 160px;
	height: 120px;
	background-image: url(../pics/rahmen.links.oben.jpg);
	float: left;
	border: 1px dashed #000000;
}

#rahmen_linksoben:hover {
	background-image: url(../pics/rahmen.links.oben.hover.jpg);
}

#rahmen_mitteoben {
	width: auto;
	height: 120px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

#rahmen_rechtsoben {
	width: 160px;
	height: 120px;
	border: 1px dashed #000000;
	background-image: url(../pics/rahmen.rechts.oben.jpg);
	float: right;
}

#rahmen_rechtsoben:hover {
	background-image: url(../pics/rahmen.rechts.oben.hover.jpg);
}


#rahmen_linksmitte {
	width: 160px;
	float: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: dashed;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

#rahmen_mittemitte {
	text-align: left;
	height: auto;
	width: auto;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: dashed;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

#rahmen_content {
	margin-right: 160px;
	margin-left: 160px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: dashed;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	padding: 10px;
	text-align: center;
}

#rahmen_rechtsmitte {
	width: 160px;
	float: right;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	
}

#rahmen_untenabschluss {
	border: 1px dashed #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	text-transform: uppercase;
	text-align: center;
}



/* Menüdefinitionen */

#menuumrahmung_links {
	width: 120px;
	border: 1px dashed #000000;
	margin: 16px;
}

#menuumrahmung_rechts {
	width: 120px;
	margin: 16px;
	border: 1px dashed #000000;
}

.menulinks {
	width: 120px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

.menulinks a{
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	background-color: #FFFFFF;
}

.menulinks a:hover {
	color: #0000FF;
	font-size: 12px;
	background-color: #FFFFFF;
}

#menulinksabschluss {
	border: 0px none #000000;
}

und für einen der Scripte z.B.
Code: 
/* Gallerie CSS Definitionen */

#gallerycontent_rahmen {
	text-align: left;
}

#gallery_pic_rahmen {
	border: 1px dashed #000000;
	margin: 20px;
	padding: 10px;
}
.gallerypic_rahmen_vorschau {
	width: 130px;
	border: 1px dashed #000000;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	margin: 5px;
	text-align: center;
	float: left;
}

.gallerypic_title_vorschau {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	text-align: center;
	background-color: #FFFFFF;
}

.gallerypic_datum_vorschau {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#clear {
	clear: left;
}

/* Gallery Admin CSS */

#adminlogindiv {
	background-position: center;
	width: 250px;
	border: 1px dashed #000000;
	text-align: right;
	padding: 10px;
	font-size: 14px;
	text-transform: uppercase;
}

#failur {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FF0000;
}

#adminmenu {
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px;
	float: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: dashed;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	text-align: center;
}

#admin_rahmen_content {
	margin-left: 162px;
	padding: 10px;
	text-align: center;
	border: 1px dashed #000000;
}

#gallery_pic_admin_rahmen {
	border: 1px dashed #000000;
	padding: 10px;
	width: 580px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

.divfloatleft {
	float: left;
	margin: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}

#admin_usertabelle {
	padding: 10px;
	width: 500px;
	border: 1px dashed #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin: auto;
}

#admin_subgui {
	border: 1px dashed #000000;
	padding: 10px;
	width: 350px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
 
Im zweiten Stylesheet kann ich keine "doppelten" Selektoren entdecken, die die des ersten Stylesheets überschreiben könnten.

Hast du es schon mal mit unterschiedlichen Dateinamen für die einzelnen CSS-Dateien versucht?
 
Ich hab jetzt mal mit zwei vereinfachten Stylesheets versucht, das Problem zu reproduzieren, aber bei mir wird das erste vom zweiten Stylesheet nicht überschrieben, sondern wie gewünscht ergänzt.
 
Kannst du für beide css files sowie das main file pls als quellcode posten?
 
Zuletzt bearbeitet:
Kein Problem, ist aber, wie gesagt, ein vereinfachtes Experiment:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<link href="inc/style.css" rel="stylesheet" type="text/css">
<link href="test/inc/style.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="content">
     <p>Testabsatz</p>
     <ul><li><a href="#">Testlink</a></li></ul>
</div>

</body>
</html>
inc/style.css
Code: 
body {
background: #cfcfcf;
color: #000;
}

a:link, a:visited {
text-decoration: none;
color: #ff0000;
}

a:hover {
text-decoration: underline;
}

p {
color: #0000ff;
}
test/inc/style.css
Code: 
div#content {
background: #fff;
border: 1px solid #000;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück