Hallo,
ich bin gerade dabei mein eigenes Theme zu schreiben.
Dazu habe ich zuerst ein HTML-Template angelegt. Dieses sieht so aus:
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" xml:lang="de" lang="de">
<head> <title>FarmPlayer</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /></head><body>
<div id="container"> <div id="menue"> <ul> <li><a href="farmflüsterer">FarmFlüsterer</a></li> <li><a href="farmplayer">FarmPlayer</a></li> <li><a href="farmeramania">Farmeramania</a></li> </ul> </div><!--#menue--> <div id="logo"> <a href="./index.html"> <div id="header"> </div><!--#header--> </a> </div> <div id="hauptteil"> <div id="side"> <div id="side_links"> </div><!--#side_links--> <div id="side_mitte"> </div><!--#side_mitte--> <div id="side_rechts"> </div><!--#side_rechts--> </div><!--#infos--> <div id="artikel"> <div id="artikel_1"> <a href="./eh-monatspaket"><img class="artikelimg" src="./bilder/eh-monatspaket.png" /> <h3>Erntehelfer-Monatspaket wieder im Shop</h3></a> </div><!--#artikel_1--> <div id="artikel_2"> <a href="./event-kalender"><img class="artikelimg" src="./bilder/event-kalender.png" /> <h3>Der Event-Kalender für den Monat Januar</h3></a> </div><!--#artikel_2--> <div id="artikel_3"> <a href="./shop-sale"><img class="artikelimg" src="./bilder/shop-sale.png" /> <h3>Shop-Sale ab Montag!</h3></a> </div><!--#artikel_3--> <div id="artikel_4"> <a href="./setzlinge"><img class="artikelimg" src="./bilder/setzlinge.png" /> <h3>Setzlings-Event am Wochenende</h3></a> </div><!--#artikel_4--> </div><!--#artikel--> <div id="top"> <h1>Top-Artikel:</h1> <a href="./silverster"><img id="top_img" src="./bilder/silvester.png" /> <div id="top_h2"><h2>FAQ Silvester Event 2013</h2></div></a> <div id="top_p"><p>Hier findet irh die FAQ für das Silvester Event, welches bis zum 02. Januar in Farmerama stattfindet. Alle Infos zu diesem Event findet ihr also hier!</p></div> <div id="top_date">02. Januar 2014</div> </div><!--#top--> <div id="unterteil"> <div id="cat_one"> <a href="./gewinnspiele"><h1>Gewinnspiele:</h1></a> <a href="./orochi"><img class="catimg" src="./bilder/orochi.png" /> <h2>Gewinnt einen Orochi</h2></a> <div id="strich_1">w.w.17 | Läuft bis: 05. Januar 2014</div> <br /> <p>Macht mit bei unserem großem Orochi-Gewinnspiel und gewinnt einen von 100 Orochis oder 10 von 50 TG. Benatwortet einfach folgende Frage: Wann feiert FarmPlayer.de einjähriges Jubiliäum! Ihr habt bis zum 10. Januar Zeit teilzunehmen! Viel Erfolg wünscht das FarmPlayer Team</p> </div><!--#cat_one--> <div id="cat_two"> <a href="./events"><h1>Events:</h1></a> <a href="./silvester"><img class="catimg" src="./bilder/silvester.png" /> <h2>FAQ Silvester Event</h2></a> <div id="strich_2">w.w.17 | Endet am: 02. Januar 2014</div> <br /> <p>Pflanzt Glücksklee und sammelt Hufeisen um euch die super Preise beim Event abzuholen. Unteranderme könnt ihr einen Knallfrosch und die beiden neuen Silvester Items. Euer FarmPlayer-Team</p> </div><!--#cat_two--> <div id="cat_thr"> <a href="./gerüchte"><h1>Gerüchte:</h1></a> <a href="./baum"><img class="catimg" src="./bilder/bäume.png" /> <h2>Neue Bäume im Spiel?</h2></a> <div id="strich_1">w.w.17 | Schon im Spiel? Nein</div> <br /> <p>Bald wird es neue Bäume im Spiel geben! Im Gespräch sind dabei der Zuckerahorn und der Pinienbaum! Ob und wie diese Bäume ins Spiel kommen werden ist nicht bekannt. Sobald wir mehr wissen, werden wir euch schnellstmöglich informieren! Euer Team</p> </div><!--#cat_thr--> <div id="video"> <div id="juro"> </div><!--#juro--> <div id="koeler"> </div><!--#koeler--> </div><!--#video--> </div><!--#unterteil--> <div id="clearer"><!--hebt später die floats auf --> </div> </div><!--#hauptteil--> <div id="footer"> <h3><center>Übungsseite ww</center></h3> </div><!--#footer--> </div><!-- /#container -->
</body></html>Das Stylesheet dazu:
Code
body { background: #9db3b3 url(img/background.png) no-repeat ;
background-position: top;
color: #333;
margin: 0; padding: 0;
font: 70.5%/1.5 'Comic Sans MS', verdana, sans-serif;
text-align: center; /* Zentriert den Inhalt für ältere Browser */
}
#header{
height: 200px;
width: 980px;
background: url(img/logo.png) no-repeat;
}
#logo{
height: 200px;
width: 980px;
display: block;
margin-left: auto;
margin-right: auto;
}
#menue {
font: bold 15px Tahoma, georgia, serif;
letter-spacing: 2px;
background: #ff8c00;
color: #fff;
}
#menue ul {
padding: 0 25px; margin: 0;
list-style: none;
height: 38px; line-height: 38px;
}
#menue li {
float: left;
}
#menue li a {
color: #fff;
text-decoration: none;
margin-right: 17px;
}
#menue li a:hover, #menue .aktiv {
text-decoration: underline;
}
#hauptteil {
padding: 20px;
font-size: 14px;
clear: left;
background: #ebebeb;
margin: 0 auto; text-align: left;
width: 960px;
border: 1px solid #474B52;
position: relative;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright: 75px;
-webkit-border-top-left-radius: 75px;
-webkit-border-top-right-radius: 75px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
border-top-color: #474B52;
border-top-style: solid;
border-top-width: 1px;
border-left-color: #474B52;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #474B52;
border-right-style: solid;
border-right-width: 1px;
}
#hauptteil p, #mittelbereich ul, #mittelbereich ol,
#mittelebereich dl, #mittelbereich form {
margin-top: 7px; margin-bottom: 17px;
}
#hauptteil a {
color: #72811F; text-decoration: none;
}
#hauptteil a:hover {
color: #333; text-decoration: underline;
}
#hauptteil .clearer {
clear: both;
}
#footer {
width: 952px;
background: #41454b repeat-x bottom center;
color: #fff;
padding: 25px 25px 10px 25px;
font-size: 11px;
margin: 0px auto;
}
#side{
height: 150px;
}
#artikel{
margin: 0;
width: 960px;
height: 270px;
line-height: 150%;
padding: 10px 0;
border-top-color: #474B52;
border-top-style: solid;
border-top-width: medium;
border-bottom-color: #474B52;
border-bottom-style: solid;
border-bottom-width: medium;
}
#artikel a:hover{
text-decoration: none;
color: #ff8c00;
}
#artikel_1{
width: 240px;
height: 270px;
text-align: center;
position: absolute;
left: 20px;
border-right-color: #a2a2a2;
border-right-style: dotted;
border-right-width: medium;
}
#artikel_2{
width: 240px;
height: 270px;
text-align: center;
position: absolute;
left: 260px;
border-right-color: #a2a2a2;
border-right-style: dotted;
border-right-width: medium;
}
#artikel_3{
width: 240px;
height: 270px;
text-align: center;
position: absolute;
left: 500px;
border-right-color: #a2a2a2;
border-right-style: dotted;
border-right-width: medium;
}
#artikel_4{
width: 240px;
height: 270px;
text-align: center;
position: absolute;
left: 740px;
}
#top{
width: 960px;
height: 230px;
border-bottom-color: #a2a2a2;
border-bottom-style: solid;
border-bottom-width: medium;
padding: 5px;
}
#top h1{
text-align: center;
font-size: large;
}
#top_h2{
position: absolute;
left: 300px;
top: 500px;
}
#top_p{
position: absolute;
left: 300px;
top: 550px;
font-size: 100%;
}
#top_img{
position: absolute;
left: 50px;
top: 485px;
}
#top_date{
position: absolute;
left: 850px;
top: 675px;
}
#top a:hover{
text-decoration: none;
color: #ff8c00;
}
#unterteil{
height: 580px;
padding: 25px 0 0 0;
}
#unterteil a:hover{
text-decoration: none;
color: #ff8c00;
}
#unterteil h1{
color: #606060;
}
#cat_one{
position: absolute;
left: 20px;
width: 320px;
height: 580px;
border-right-color: #a2a2a2;
border-right-style: dotted;
border-right-width: medium;
}
#cat_two{
padding: 0 5px 0 5px;
position: absolute;
left: 345px;
width: 320px;
height: 580px;
}
#cat_thr{
padding: 0 5px 0 5px;
position: absolute;
left: 665px;
width: 320px;
height: 580px;
border-left-color: #a2a2a2;
border-left-style: dotted;
border-left-width: medium;
}
#strich_1{
border-top-color: #a2a2a2;
border-top-style: solid;
border-top-width: small;
height: 3px;
width: 300px;
}
#strich_2{
border-top-color: #a2a2a2;
border-top-style: solid;
border-top-width: small;
height: 3px;
width: 300px;
}
#strich_3{
border-top-color: #a2a2a2;
border-top-style: solid;
border-top-width: small;
height: 3px;
width: 300px;
}Jetzt würde ich dies gerne in ein Theme umschreiben.
Nun stellt sich mir aber folgende Frage:
Wie kann ich den Loop schreiben, so dass die Artikel oben horizontal nebeneinander ausgebenen werden?
Und wie kann ich unten immer den neusten Beitrag eine Kategorie ausgeben lassen?
Muss ich das vlt durch zwei Loops lösen? Geht das überhaupt?
Ich würde mich über eure Hilfe wirklich sehr freuen
w.w.17