Muckel1986
Erfahrenes Mitglied
Hallo zusammen,
habe vor einigen Tage ein Layout für meine Pfadfindergruppe erstellt. Zu erst habe ich es als reine html und css Datei erstellt, wie man hier sehen kann. Nachdem das funktioniert hat, habe ich es für das Wordpress angepasst und es erstmal auf meiner "Spielwiese" getestet. Dabei hat sich gezeigt, dass es ein Problem gibt, welches auf der "Fotoseite" und bei der "Syntax-Hervorhebung" deutlich wird.
Bei der Fotoseite gibt es das Problem, dass jene eine "definierte Liste" nutzt. In dem Shortcode für die Gallerie kann man angeben, wie viele Bilder nebeneinander (Spalten) dargestellt werden sollen. Am Ende von der "Spalten anzahl" gibt es ein
Jenes hat zur Folge, dass es nicht nur einen normalen Zeilenumbruch gibt, sondern sich jener so auswirkt, dass die neuen Bilder erst am Ende der linken Menü Leiste auftauchen.
Dazu sollte ich vielleicht kurz den Aufbau der Seite schildern. Oben gibt es ein DIV in dem das Logo der Seite ist. Darunter kommt ein DIV, in dem das Menü der Seite zu sehen ist. Jenes habe ich durch display:block und den Außenabständen so angepasst, dass sie direkt unterhalb des Logos ist und das es etwas Rand zum Browser Ende hat. Auf der rechten Seite (also direkt neben der Menü Leiste" befindet sich ein weiteres DIV, in dem der Hauptinhalt der Seite sein soll. Jenes hat ebenfalls Außenabstände damit etwas Freiraum zum Browser Ende entsteht. In diesem DIV ist dann ein div mit der Klasse inhalt, damit ich den Inhalt der Seite gezielt gestalten kann.
Unter diesen beiden "Spalten" ist das letzte DIV, welches ich mit clear:both unter beiden angeordnet habe. In jenem sind nur die Angaben zu finden, um welche Webseite es sich handelt. Die CSS-Bereiche schauen so aus:
Und der html-Aufbau wäre in Kurzform so:
Wie man oben auf den Links sehen kann, klappt dies soweit ja auch. Nur mit dem
bei der Fotogallerie gibt es das Problem, dass jenes auch die Menü-Spalte berücksichtigt. Gibt es eine Möglichkeit, dass ich jenes ändere? Denn immerhin befindet sich die clear-Angabe ja auf der Untersten-Ebene:
Kann man das so ändern, dass sie dieses unterstee clear-Anweisung sich nur innerhalb des DIV mitte auswirkt? Denn damit wäre das Problem dann behoben. Als System hinter unserer Webseite setzten wir das Wordpress-System ein. Jenes hat alle Funktionen die wir brauchen (erstellen von festen Seiten, erstellen von Artikeln die in Kategorien sortiert sind und durch Schlagworte optimiert werden können, Kommentarfunktion). Durch verschiedene PlugIns kann man die Funktionen des Blogs noch erweitern. Die Gallerie-Funktion ist aber schon bestandteil des Blogs und man nutzt jene über einen Shortcode und kann bei jenem eben auch die Anzahl der Spalten bestimmen, was dann so aussieht:
Habe selbst zwar schon die Suchmachiene bemüht, aber leider keine Lösung für dieses Problem gefunden, weshalb ich hoffe, dass ihr mir helfen könnt.
Vielen Dank und ein schönes Wochenende
Muckel
habe vor einigen Tage ein Layout für meine Pfadfindergruppe erstellt. Zu erst habe ich es als reine html und css Datei erstellt, wie man hier sehen kann. Nachdem das funktioniert hat, habe ich es für das Wordpress angepasst und es erstmal auf meiner "Spielwiese" getestet. Dabei hat sich gezeigt, dass es ein Problem gibt, welches auf der "Fotoseite" und bei der "Syntax-Hervorhebung" deutlich wird.
Bei der Fotoseite gibt es das Problem, dass jene eine "definierte Liste" nutzt. In dem Shortcode für die Gallerie kann man angeben, wie viele Bilder nebeneinander (Spalten) dargestellt werden sollen. Am Ende von der "Spalten anzahl" gibt es ein
Code:
<br style="clear: both" />Dazu sollte ich vielleicht kurz den Aufbau der Seite schildern. Oben gibt es ein DIV in dem das Logo der Seite ist. Darunter kommt ein DIV, in dem das Menü der Seite zu sehen ist. Jenes habe ich durch display:block und den Außenabständen so angepasst, dass sie direkt unterhalb des Logos ist und das es etwas Rand zum Browser Ende hat. Auf der rechten Seite (also direkt neben der Menü Leiste" befindet sich ein weiteres DIV, in dem der Hauptinhalt der Seite sein soll. Jenes hat ebenfalls Außenabstände damit etwas Freiraum zum Browser Ende entsteht. In diesem DIV ist dann ein div mit der Klasse inhalt, damit ich den Inhalt der Seite gezielt gestalten kann.
Unter diesen beiden "Spalten" ist das letzte DIV, welches ich mit clear:both unter beiden angeordnet habe. In jenem sind nur die Angaben zu finden, um welche Webseite es sich handelt. Die CSS-Bereiche schauen so aus:
Code:
body {
margin:0em;
padding:0em;
background-color:#000000;
color:#BFBFBF;
font-family: Calibri, "Sans Serif", "Century Gothic";
overflow:auto;
}
#oben {
display:block;
margin:0em 15% 0em 15%;
padding:0em;
text-align:center;
border:none;
}
#links {
display:block;
float:left;
min-width:10em;
width:15%;
background-color:#1F497D;
margin:0em 2em 0em 15%;
padding:0em;
color:#BFBFBF;
border-top:none;
border-left:none;
border-right:none;
border-bottom:none;
}
#mitte {
display:block;
margin:0em 15% 0em 30%;
padding:0em;
border-top:none;
border-left:none;
border-right:none;
border-bottom:none;
}
#unten {
clear:both;
display:block;
margin:0em;
padding:0em 15% 0.5em 15%;
font-size:0.8em;
text-align:center;
border-top:#009900 solid 0.05em;
border-left:none;
border-right:none;
border-bottom:none;
}
.inhalt {padding:0.5em}
HTML:
<!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>Pfadfinderstamm Ambronen im Deutschen Pfadfinderbund Hamburg e.V.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="Bilder/buendisches/wappen/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="oben">
<img src="Bilder/buendisches/wappen/oben.jpg" alt="Logo" />
</div>
<div id="links"><div class="ul"><div class="ur"><div class="inhalt2">
<p>Hier ist die linke Spalte, die als Menue dienen soll.</p>
</div></div></div></div>
<div id="mitte"><div class="inhalt">
<h1>Inhalt der Seite</h1>
<p>In der Mitte dieser Website soll der Inhalt jener auftauchen...</p>
</div></div>
<div id="unten"><p><font size="+1"><strong>Name oder Titel der Seite</strong></font><br />
weitere Angaben die noch aufgefuert sein sollen</p></div>
</body>
</html>Wie man oben auf den Links sehen kann, klappt dies soweit ja auch. Nur mit dem
Code:
clear:both;- Start der Seite mit den 4 Haupt-DIV-Bereichen die alle als Block angezeigt werden.
- Ein weiteres DIV (inhalt) in mittleren Bereich der Webseite.
- clear-Angabe im Artikel
- Ein weiteres DIV (inhalt) in mittleren Bereich der Webseite.
Kann man das so ändern, dass sie dieses unterstee clear-Anweisung sich nur innerhalb des DIV mitte auswirkt? Denn damit wäre das Problem dann behoben. Als System hinter unserer Webseite setzten wir das Wordpress-System ein. Jenes hat alle Funktionen die wir brauchen (erstellen von festen Seiten, erstellen von Artikeln die in Kategorien sortiert sind und durch Schlagworte optimiert werden können, Kommentarfunktion). Durch verschiedene PlugIns kann man die Funktionen des Blogs noch erweitern. Die Gallerie-Funktion ist aber schon bestandteil des Blogs und man nutzt jene über einen Shortcode und kann bei jenem eben auch die Anzahl der Spalten bestimmen, was dann so aussieht:
Code:
[gallery columns="3"]Habe selbst zwar schon die Suchmachiene bemüht, aber leider keine Lösung für dieses Problem gefunden, weshalb ich hoffe, dass ihr mir helfen könnt.
Vielen Dank und ein schönes Wochenende
Muckel
weiter, interessante Artikel, Beispiele, u.ä. im globalen Dorf aufzuspüren 
