zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Boxendarstellung mit Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2008, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2008
Beiträge: 4
Sordum befindet sich auf einem aufstrebenden Ast
Standard 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;
	}
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2008, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Sordum Beitrag anzeigen
.footerright {
background-image: url(images/footer_right.gif);
background-repeat:no-repeat;
width: 3px;
height: 7x;
float: right;
margin: 0px;
padding: 0px;
}
Siehe auch: W3C CSS Validator results for http://www.meintag-blog.de/reiseportal/ (CSS level 2)
Auch das HTML ist fehlerhaft. Du kannst kein div in ein a schachteln.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2008, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2008
Beiträge: 4
Sordum befindet sich auf einem aufstrebenden Ast
Standard

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 15:50 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2008, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Weil man Fheler selbst leicht übersieht gibt es Validatoren. Nutze sie!

Zitat:
<a href="http://www.meintag-blog.de/reiseportal/"><div class="logo"></div></a>
Das ist falsch. Kein Div in einem A. A ist Inline, Div ist Block.
Bitte informier dich über Syntaxregeln von HTML. Das ist Grundwissen und sicher in deinem Buch nachzulesen.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2008, 15:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2008
Beiträge: 4
Sordum befindet sich auf einem aufstrebenden Ast
Standard

Okay das versteh ich, jedoch was muss ich mit den Boxen machen ? Hast du da eine Ahnung

Bald hab ich mit dem Mist die *** voll ^^ Da lass ich mir das ganze erstellen.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.06.2008, 15:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Sordum Beitrag anzeigen
Okay das versteh ich, jedoch was muss ich mit den Boxen machen ?
Lösch das Div. Gib dem A dein Hintergrundbild.

Zitat:
Bald hab ich mit dem Mist die *** voll ^^ Da lass ich mir das ganze erstellen.
Wenn du schon bei diesen einfachen Grundlagen die Nase voll hast, wäre das vermutlich die beste Lösung.
Mit Zitat antworten
  #7 (permalink)  
Alt 22.06.2008, 16:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2008
Beiträge: 4
Sordum befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild über Bild legen mit position: relative (IE6 Problem) naitsab CSS 3 09.06.2009 13:20
z-index Problem, Bild ist auch transparent hinkel11 CSS 1 22.04.2009 15:03
CSS Problem beim IE6/IE7 olliu CSS 4 01.03.2009 18:40
Bild verrutscht bei variabler Schriftgröße thalon (X)HTML 5 06.10.2007 02:30
Problem mit IE: Text wird unter links-gefloatetes Bild geschoben Markus_S CSS 3 20.06.2006 14:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:42 Uhr.