Erstmal ein dickes fettes Hallo an alle hier,
und kaum ist der neue da, hatter Probleme
Ich arbeite derzeit an einem Reiseportal und nutze Wordpress 2.5.1 als CMS.
Ich komme derzeit einfach nicht weiter und zwar habe ich einen Container namens "frontbox" erstellt, in diesem will ich 2 weitere haben ( WillkommenBox und rechts daneben eine kleine box ) diese wollte ich mit float left und right anordnen.
Wenn ich das machen brauch die untere Inhaltsbox auch float left, dabei rutscht aber der footer nach oben.
Weiter sollen 2 sidebars rechts hin. Jetzt muss ich ja irgendwo einen Denk und Arbeitsfehler haben. ( bin noch recht frisch was css betrifft )
Weiter wird unten rechts im Footer die Grafik aus einem mir unerklärlichen Grund nicht angezeigt.
URL zur "Problemseite" :
Domain123.de
Hier mal ein Bild damit ihr wisst, was ich meine:
BILD: http://xild.de/bild.php/699,problem1NBT3.gif
Quellcode der CSS:
Code:
/* Allgemeines */
body {
font-size: 11px;
font-family: Verdana;
background: #ffffff;
color: #000000;
text-align: left;
margin: 0px auto 0px;
padding: 0px;
}
#page {
background: #FFFFFF;
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}
/* Header */
#header {
width: 960px;
height: 42px;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.logo {
background: #ffffff url(images/logo.gif);
width: 288px;
height: 42px;
float: left;
margin: 30px 0px 0px 0px;
padding: 0px;
}
#nav {
background: #ffffff;
float: right;
margin: 73px 0px 0px 0px;
padding: 0px;
}
a.link {
display:block;
color:#fff;
width:102px;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
background-image:url(images/headernav.gif);
padding: 6px 0px 0px 0px;
}
a.link:hover {
display:block;
color:#fff;
text-decoration:underline;
background-image:url(images/headernav.gif);
}
#nav li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
/* HeaderBar */
#headerbar {
background-image: url(images/header_middle.gif);
background-repeat: repeat-x;
width: 960px;
height: 23px;
margin: 50px 0px 0px 0px;
padding: 0px;
}
.left {
background: #ffffff url(images/header_left.gif);
background-repeat: no-repeat;
width: 3px;
height: 23px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.right {
background: #ffffff url(images/header_right.gif);
background-repeat: no-repeat;
width: 3px;
height: 23px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}
/* Box */
#box {
width: 960px;
margin: 25px 0px 0px 0px;
padding: 0px;
}
/* FrontBox */
#frontbox {
width: 560px;
padding: 0px;
}
.welcomeheadline{
background: #58aade;
color: #ffffff;
width: 382px;
margin: 0px auto 0px;
padding: 5px 0px 5px 5px;
}
.welcomebox {
color: #3175a1;
width: 387px;
border: 1px;
border-color: #58aade;
border-style: solid;
margin: 0px 0px 15px 0px;
padding: 0px;
}
.welcomeboxb {
padding: 10px;
}
.topicheadline{
background: #ffe400;
color: #003c60;
width: 156px;
margin: 0px auto 0px;
padding: 5px 0px 5px 5px;
}
.topicbox {
background-color: #fefadb;
color: #003b5f;
width: 160px;
border: 1px;
border-color: #ffe400;
border-style: solid;
margin: 0px 0px 15px 0px;
padding: 0px;
}
.topicboxb {
padding: 10px;
}
#topicbox h1 {
display: inline;
color: #003c60;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin-bottom:0px;
}
#topicbox a {
color: #fff;
text-decoration: none;
}
#topicbox a:hover {
color: #FA9C3A;
text-decoration: none;
}
/* Content */
#content {
width: 560px;
padding: 0px;
}
.headline{
background: #58aade;
color: #ffffff;
width: 555px;
margin: 0px auto 0px;
padding: 5px 0px 5px 5px;
}
.box {
color: #3175a1;
width: 560px;
border: 1px;
border-color: #58aade;
border-style: solid;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.boxb {
padding: 10px;
}
#content h1 {
display: inline;
color: #ffffff;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin-bottom:0px;
}
#content h1 a {
color: #fff;
text-decoration: none;
}
#content h1 a:hover {
color: #FA9C3A;
text-decoration: none;
}
#content h2 {
display: inline;
color: #ffffff;
font-size: 11px;
font-family: Verdana;
font-weight: normal;
margin-bottom:0px;
}
#content h2 a {
color: #fff;
text-decoration: none;
}
#content h2 a:hover {
color: #FA9C3A;
text-decoration: none;
}
/* Sidebar left */
#sidebarleft {
width: 160px;
margin: 25px 0px 0px 0px;
padding: 0px;
}
/* Sidebar right */
#sidebarright {
width: 208px;
margin: 70px 0px 0px 0px;
padding: 0px;
}
/* Footer */
#footer {
color: #a0a0a0;
font-size: 11px;
background: #003c60;
width: 960px;
height: 7px;
margin: 15px 0px 0px 0px;
padding: 0px;
}
.footerleft {
background-image: url(images/footer_left.gif);
background-repeat:no-repeat;
width: 3px;
height: 7px;
float: left;
margin: 0px;
padding: 0px;
}
.footerright {
background-image: url(images/footer_right.gif);
background-repeat:no-repeat;
width: 3px;
height: 7x;
float: right;
margin: 0px;
padding: 0px;
}
#footercredits {
color: #a0a0a0;
font-size: 11px;
width: 960px;
margin: 10px 0px 0px 0px;
padding: 0px;
}
.copy {
float: left;
padding: 0px;
}
.footernav {
float: right;
padding: 0px;
}
Und der Code der index Datei:
Code:
<?php get_header(); ?>
<div id="box">
<div id="content">
<div id="frontbox">
<div class="welcomebox">
<div class="welcomeheadline"><h1>Herzlich Willkommen</h1></div>
<div class="welcomeboxb">Hier finden Sie Informationen rund um´s Reisen. Text blabla</div>
</div>
</div>
<div class="box">
<div class="headline"><h1><?php the_category(', ') ?>: </h1><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2></div>
<div class="boxb">Hier der Inhalt des letzen Artikels</div>
</div>
</div>
<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>
</div>
<?php get_footer(); ?>
Danke im vorraus. Gruß Paul