ich möchte aber wissen weelche datei das css nutzt bzw. es einbindet.
geht das auch?
Um was für eine Seite handelt es sich denn? Vermutlich wird es eine Config oder index.html/php sein oder einfach jede Seite einzeln
In so einem Fall würde ich mal eine HTML-Datei incl. CSS-Datei bzw. CSS-Header basteln, und hier veröffentlichen, oder einen Link zu einer Datei auf dem Server machen, damit man sich das ganze genauer vorstellen kann.
Bitte erwarte nicht von den Antwortern, dass sie sich erst mühsam eine eigene Datei basteln, und dann irgendwo auf einen Server packen.
Was den Borderradius angeht, so ist dieses eine Eigenschaft, die sich noch nicht für alle Browser durchgesetzt hat. Derzeit gibt es viele Varianten, die man alle berücksichtigen sollte:
-moz- (Firefox); -khtml- (Safari und Konqueror); -webkit- (Safari, Google Chrome, Chromium); -o- (Opera bis zur Version 9:wink:
-khtml-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Firefox hat seit der 13er Version nicht mehr die -ms-Variante.
Alle Varianten werden derzeit in den Wikibooks mit angegeben. Und dennoch werden sie beim Internet-Explorer nicht mit angezeigt.
Zudem würde ich auch sprechendere CSS-Klassennamen verwenden. Das macht später mal die Nacharbeit einfacher. Mit .opc .step .col2-set .col-1 kann man nicht viel anfangen.
.header
.content-top
.content-main
.content-bottom
.content-left
.content-right
.footer
Solche Angaben versteht man auch, wenn man mit der fremden CSS-Datei nicht vertraut ist. Vor allem, wenn man die CSS-Datei Monate oder Jahre später nacharbeitet, oder einem Kollegen übergibt.
Weiterhin würde ich nicht einfach nur 0 hinschreiben sondern 0px. Auch wenn dieses nicht unbedingt notwendig ist, so vermeidet man doch einige Fehlinterpretationen.
Wenn es um einen Kunden-Auftrag geht, ist es immer noch die sicherste Variante, eine 3x3 Tabelle zu erstellen, und mit entsprechenden Hintergrundgrafiken zu füllen. Dies würde überall ein gleichbleibendes Erscheinungsbild sichern. Andernfalls muss sich der Kunde bewusst sein, dass der IE die Eigenschaft nicht interpretieren kann.
Selbst die Angabe min-height:240px wird nicht überall gleichermaßen gut dargestellt, so dass es mitunter sicherer ist, eine extra Zelle (1px breit) der Tabelle mit einer durchsichtigen Grafik zu füllen. (transparente 1px Grafik auf die richtige Länge gezogen).
Dann ist noch nicht überall gleichermaßen geklärt, wie man das Verhältnis der Border-Weite richtig interpretiert, so dass man mit einigen Browserweichen arbeiten muss.
Letztlich arbeitet man lieber an einer Datei, als am blanken Quelltext.
Wie wird die HTML-Datei erstellt?
Statisch, PHP oder ein CMS-System?
Kannst du mal eine Dummy-Seite basteln?
Sorry, aber ich kenne das gegebene div nicht und daher ist es schwer, das gerade auf Anhieb zu durchblicken. Aber zurück zu deiner Frage. Also wenn das kein Grundelement des Templates ist, dann mache ich mich bei Joomla immer auf die Suche nach so einer Datei, indem ich schaue, welches Modul (so heißt das in Joomla) ich da gerade verändern möchte und durchsuche dann auf dem FTP-Server den Ordner dieses Moduls nach index.php-Dateien o.ä. Also ich suche dann auch händisch.
Naja angenommen du hast 2 Dateien „Seite1.html“ und „Seite2.html“ und in beiden befindet ein DIV namens „Header“ oder ein h1 … dann greifen beide Dateien darauf zu.
Der Zugriff erfolgt exakt dann wenn du die Seite aufrufst.
Nur die HTML-Datei greift auf CSS zu, sonst weiss der Kompiler ja nicht wie die Seite aussehen soll. Das wird im Header vom HTML-Gerüst verlinkt und dann entsprechend abgearbeitet.
Hoffe ich konnte helfen.
Liebe Grüße
Wenn du den oberen Elementen andere Eigenschaften zuweisen willst wie den unteren, so macht es Sinn diesen unterschiedliche Klassen zu geben (zumindest den umgebenden divs). Anschließend kannst du über diese Klassen genau festlegen, wie deine oberen, unteren (und rechten, linken) div Elemente aussehen sollen.
beispiel html:
test col-1 top
test col-2 top
test col-1 bottom
test col-2 bottom
beispiel css:
.col2-set-top .col-1 {
float:left;
width:47.5%;
min-height:240px;
padding: 5px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border-bottom: none;
}
.col2-set-top .col-1 .buttons-set{
border: 1px solid #C0C0C0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.col2-set-top .col-2 {
float:right; width:47.5%;
min-height:240px;padding: 5px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border-bottom: none;
}
.col2-set-top .buttons-set{
border: 1px solid #C0C0C0;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.col2-set-bottom .col-1 {
float:left;
width:47.5%;
min-height:240px;
padding: 5px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: none;
}
.col2-set-bottom .col-1 .buttons-set{
border: 1px solid #C0C0C0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.col2-set-bottom .col-2 {
float:right; width:47.5%;
min-height:240px;padding: 5px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: none;
}
.col2-set-bottom .buttons-set{
border: 1px solid #C0C0C0;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
Ich habe dein CSS genommen, ohne genauer zu überprüfen was es macht und etwas angeglichen.
Ich hoffe damit ist deine Frage beantwortet?
Viele Grüße
MalU