Guten Morgen,
ich möchte nun anfangen, mir ein eigenes Theme zu basteln. Natürlich gibt es viele, die gut sind - aber ich möchte einfach mein Persönliches haben.
Meine Frage ist nun, ob das wordpress schon css ausgaben tätigt, die irgendwo vorgegeben sind? Falls ja, was hat mehr prioritäten - die evtl. ausgaben von WP oder meine eigene style.css ?
Gruß Muckel
was gibt wp aus ~ bezüglich eigenes theme
-
-
- Gerade eben
- Anzeige
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
- ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
- ✔️ Deutsche Server & DSGVO-konform
- ✔️ Persönlicher Support (kein 0815-Ticket-System)
-
du kannst alle Ausgaben komplett selbst formatieren, feste Vorgaben gibt es nicht.
-
Das sit gut zu hören!
Jedoch habe ich am Anfang schon ein problem. Vielleicht liegt es aber auch ''nur'' am IE Box Bug, da ich aber in der Schule bin, kann ich es nicht ander testen.
Ich möchte oben einen header haben, der 100% breite hat. Darunter links einen Content Bereich von 60% breite (also das, wo der Inhalt steht), daneben drei Bereiche mit jeweils 30% Breite. (Ein für Zufallsbild, eins für Zitate und eines für die sidebar). Darunter, am ende also, einen footer mit wiederum 100% Breite.
Header sollte ganz oben sein und der footer unten positioniert sein. Der Contentbereich sollte den Bereich dazwischen aus füllen. (soweit bin ich noch nicht)
Es habert schon daran, dass die Boxen nicht rechts neben dem Content angezeigt werden. Den html aufbau und die css Datei habe ich hier angehangen, so wie ein Bild zum besseren verständnis.
Die index und die style habe hier die endung txt, da das css bzw. html Format nicht erlaubt ist.
Hoffe ihr könnt mir helfen, denn ich sehe gerade meinen Fehler nicht.
Gruß und vielen Dank
Muckel -
Ein wenig bin ich weiter gekommen, wie ihr unter Testseite sehen könnt. Das css schaut wie folgt aus:
Code
Alles anzeigenbody{ /*Angaben der Hauptseite*/ position:fixed; background-color:#000066; color:#cccccc; margin:0px;/*Aussenabstand*/ padding:0px;/*Innenabstand*/ } #header{ /*Angaben des Kopfes*/ background-color:#FFFFFF; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:5px; padding:2px;/*Innenabstand*/ width:100%; height:20px; } #content{ /*Inhalt*/ background-color:#FFFFFF; color:000000; float:left; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:5px; margin-bottom:5px; padding:;/*Innenabstand*/ width:600px; height:400px; } #random{ /*rotierendes Bild*/ background-color:#FFFFFF; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:5px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ width:100px; float:right; } #zitat{ /*Zitate im wechsel*/ background-color:#FFFFFF; color:000000; margin-top:5px;/*Aussenabstand*/ margin-left:5px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ width:100px; float:right; } #sidebar{ /*Sidebar*/ background-color:#FFFFFF; color:000000; margin-top:5px;/*Aussenabstand*/ margin-left:5px; margin-right:0px; margin-bottom:5px; padding:;/*Innenabstand*/ width:100px; float:right; } #footer{ /*Seitenfuß*/ background-color:#FFFFFF; color:cccccc; clear:left; margin-top:5px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ height:10px; width:100%; clear:both; }Ich möchte jetzt den footer ganz unten haben und muss da wohl noch mit einer position angabe arbeiten. Das Zufallsbild, Zitat und Random sollen unter einander stehen. Dazu werde ich evtl. ein div im div nehmen - ist da valid?
das würden dann z.B. so ausschauen:
-
die Sache mit den Prozenten
Im Internetexplorer wird der Bereich nun fast richtig angezeigt, im Firefox nicht. Wieso? Link: Testseite
css:
Code
Alles anzeigenbody{ /*Angaben der Hauptseite*/ position:fixed; background-color:#000066; color:#cccccc; margin:0px;/*Aussenabstand*/ padding:0px;/*Innenabstand*/ } #header{ /*Angaben des Kopfes*/ background-color:#FFFFFF; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:5px; padding:2px;/*Innenabstand*/ width:100%; height:20px; } #content{ /*Inhalt*/ background-color:#FFFFFF; color:000000; float:left; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:5px; margin-bottom:5px; padding:;/*Innenabstand*/ width:60%; height:400px; } #spalte{ background-color:#FFFFFF; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:5px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ width:30%; float:right; } #random{ /*rotierendes Bild*/ background-color:#666666; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ } #zitat{ /*Zitate im wechsel*/ background-color:#666666; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ } #sidebar{ /*Sidebar*/ background-color:#666666; color:000000; margin-top:0px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ } #footer{ /*Seitenfuß*/ background-color:#FFFFFF; color:cccccc; clear:left; margin-top:5px;/*Aussenabstand*/ margin-left:0px; margin-right:0px; margin-bottom:0px; padding:;/*Innenabstand*/ height:10px; width:100%; clear:both; }html:
HTML
Alles anzeigen<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Testseite</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> /* ... hier sind dateispezifische Formate erlaubt ... */ </style> </head> <body> <div id="header">Kopf der Seite</div> <div id="content">Inhalt der Seite</div> <div id="spalte"> <div id="random">Zufallsbild</div> <div id="zitat">Zitat Random</div> <div id="sidebar">Sidebar</div> </div> <div id="footer">Fuß der Seite</div> </body> </html> -
In Deiner CSS-Datei findest Du einige Befehle, die so aussehen:
padding:;
Ändere diese mal in padding:0px;Es kann sein, dass deswegen diese oder andere Probleme und Ungereimtheiten auftreten.
VG Elke
-
Guten Abend,
habe das mit dem padding nun behoben. Im Firefox aber immer noch keine besserung und im IE auch nicht wirklich. Wie sieht es in eurem (evtl. neueren IEs aus?)
Gruß und Danke
Muckel -
Du denkst nicht in Boxen ;)
fließt etwas nach rechts muss es VOR der Box stehen, neben der es rechts stehen sollte.
content sidebar
sidebar soll nach rechts fließen, dann muss es im Quelltext so aussehen
sidebar content
anders geht das nie
daher lasse ich immer alle Boxen nach links fließen und umgib sie mit einer Üherhalte* Box
mache bei meinem Tutorial mit, dass ich im Footer verlinkt habe, dann wirst du eher verstehen
lg
-
So, habe nun ein wenig weiter gebastelt. Allerdings bislang nur für den Mozilla Firefox. Ich habe oben zwei div Bereiche. Einen für den Titel und einen rechts für ein Bild. Darunter dann drei neben einander. Der ganz links geht bis ganz unten und die beiden anderen enden über dem footer.
Mein Problem liegt jetzt darin, dass das Bild nicht rechtsbündig ist. Es hat da einen spalt, so breit wie die rechte spalte ist. (siehe bild).
Für das Bild habe ich aber gesagt, dass der abstand nach recht 0 betragen soll:
Code#bild { position: absolute; top: 0; right: 0; width: 150px; height: 100px; padding: 0; overflow: hidden; border-left: 1px solid #000000; }Bei der rechten spalte klappt dieses auch:
Code#rechts { position: absolute; top: 100px; /* Abstand zum oberen Fensterrand */ bottom: 60px; /* Abstand zum unteren Fensterrand */ right: 0; /* Abstand zum rechten Fensterrand */ width: 150px; /* Blockbreite */ padding: 0; /* Interpretation Boxmodell! */ overflow: hidden; /* Scrollbalken unterdrücken */ border-left: 1px solid #000000; }Die komplette css Datei sowie die html Datei und ein Bild des Fehlers habe ich angehangen. Zu finden ist das alles auch unter: Testseite
Hoffe ihr könnt mir helfen.
Danke
Muckel -
Problem behoben. Das div für das Bild war in dem div für den header eingeschlossen - des sollte nicht sein. Bislang ist das Design auch valid: jurtenrunde.de, muckels-fahrtenleben.de, muckels-leben.de ~ der Jugendbewegung verschrieben .
In den nächsten Tagen werde ich die umgebung für den Internetexplorer schreiben und mir des bei bringen.
Danach werde ich das Design für das Wordpress auf arbeiten. Das Design ist bewusst einfach gehalten - ist dadurch nicht zu über deminisional.
Gruß Muckel
-
In meinem Layout habe ich rechts ein div, in dem mehr oder weniger ein zweites Menue rein soll. In der index sieht es so aus:
PHP<div id="rechts" class="spalten"> <!-- Zitate --> <?php include ("zitate.php");?> <!-- menue zwei --> <?php include ("menue2.php");?> </div>das div rechts definiert die rechte spalte - also den Bereich zweischen dem header und dem footer. Dieses div habe ich aber nochmal auf geteilt in dem Bereich zitate und menue2.
In dem zitat steht nur ein Absatz mit einer class als <p class="zitate">. Die class schaut so aus:
Code*.zitat { background-color: #000000; color: #cccccc; font-size:15px; text-align:center; height:100px; display: table-cell; vertical-align: middle; }Mit diesen eigenschaften konnte ich den Text vertikal zentrieren, was ich auch wollte.
Nun habe ich darunter noch einen Absatz definiert. In jenem wollte ich den Inhalt aber unten am Ende des divs anordnen, welches ich so probiert habe:
Wenn ich mir aber das Ergebnis im Firefox anschaue, so macht der mir die beiden Absätze Nebeneinander und nicht unter einander - wieso? Und wie kann ich das Problem beheben?
Gruß und Danke
Muckel -
Kann es sein, dass Du versehentlich in Deiner css-Datei das e bei zitat vergessen hast?
Zitat
<p class="zitate">*.zitat {....
VG Elke
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!