|
|||
Problem mit Boxendarstellung mit Bild
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; } 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(); ?> |
Sponsored Links |
|
|||
Zitat:
Auch das HTML ist fehlerhaft. Du kannst kein div in ein a schachteln. |
Sponsored Links |
|
|||
Erstmal danke für den ersten Fehler, glaubste das ich das gesehen hab ? ^^
Wie meinst du das mit a in Div schachteln ? Also muss ich das Bild via HTML einfügen und nicht als Background in CSS ? Sry bin echt ein Neuling Geändert von Sordum (22.06.2008 um 16:50 Uhr) |
|
|||
Weil man Fheler selbst leicht übersieht gibt es Validatoren. Nutze sie!
Zitat:
Bitte informier dich über Syntaxregeln von HTML. Das ist Grundwissen und sicher in deinem Buch nachzulesen. |
|
|||
Lösch das Div. Gib dem A dein Hintergrundbild.
Zitat:
|
|
|||
Das mit den Bild hab ich verstanden und schon abgeändert, validierung war auch alles okay.
Ich wollte dir gerade ein PN schreiben, ob du vllt. Zeit und Lust natürlich gegen Bezahlung das für mich zu übernehmen. Kannst dich ja melden ICQ: 178 203 793 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bild über Bild legen mit position: relative (IE6 Problem) | naitsab | CSS | 3 | 09.06.2009 14:20 |
z-index Problem, Bild ist auch transparent | hinkel11 | CSS | 1 | 22.04.2009 16:03 |
CSS Problem beim IE6/IE7 | olliu | CSS | 4 | 01.03.2009 19:40 |
Bild verrutscht bei variabler Schriftgröße | thalon | (X)HTML | 5 | 06.10.2007 03:30 |
Problem mit IE: Text wird unter links-gefloatetes Bild geschoben | Markus_S | CSS | 3 | 20.06.2006 15:29 |