Wrapper Background not showing up

2 replies [Last post]

Mon, 2013-09-16 18:24

Chrissy

Offline

newbie

Germany

Last seen: 1 year 18 weeks ago

Germany

Timezone: GMT+9

Joined: 2012-10-27

Posts: 5

Points: 7

Good evening! I have looked thru the forum to find a solution for my problem, but I couldn´t find one.
I have a wrapper background on my index.php but its not showing up

<?php get_header(); ?>
 
<div id="page">
<!--Inhalt-->   
<strong><div id="wrapper"></strong>
 
<div id="left-sidebar"><?php include (TEMPLATEPATH . '/sidebar.php'); ?></div>
 
<!--post-->
<?php query_posts($query_string.'&cat=-3&&order=DESC'); 
while (have_posts()) : the_post(); ?>
<div class="entry" id="post-<?php the_ID(); ?>"><div id="headerentry">
<p class="datum"><span class="day"> <?php the_time('jS') ?></span><span class="year"><?php the_time('F') ?></span></p>
<div class="entry-top"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div> </div>
<div style="clear:both;"></div>
<div class="entry-content">
<?php the_content(); ?>
</div>
<div class="commentpost">✩ <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?> ✩</div>
 
<!--post-end-->
 </div>
 
<?php endwhile; ?>   
 
</div><!--Inhalt--> 
</div>

and here is the css

/*
Theme Name: Kuromi
Theme URI: <a href="http://startingdays.com/
Description:" rel="nofollow">http://startingdays.com/
Description:</a> My wordpress theme! Do not steal or copy!!! 
Version: 8.0
Author: Chrissy
*/
 
 
 
body{
font-family: Verdana;
font-size:7pt;
text-align:center;
color: #FFFFFF;
margin:0 auto;
padding:0;
border:0; 
background-color: #08090a;
background-image: url(<a href="http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/Background-1.jpg" rel="nofollow">http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/Background-1.jpg</a>);
 
 }
 
html {
  padding: 0px;
  margin: 0px;
}
 
#page{
width: 975px; 
margin: 0 auto;
position:relative;
 
}
 
#header {
heigth: 400px;
margin-top:0px;}
 
#wrapper{
margin: 0 auto;
padding: 0px;
background-image: url('http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/background-1.png') ;
background-repeat: repeat-y;
 width: 975px;
}
 
 
@font-face {
    font-family: 'streetwise_buddyregular';
    src: url('http://www.startingdays.com/font/streetwisebuddy-webfont.eot');
    src: url('http://www.startingdays.com/font/streetwisebuddy-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.startingdays.com/font/streetwisebuddy-webfont.woff') format('woff'),
         url('http://www.startingdays.com/font/streetwisebuddy-webfont.ttf') format('truetype'),
         url('http://www.startingdays.com/font/streetwisebuddy-webfont.svg#streetwise_buddyregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
 /* Navigation */
#navmenu {
color: #764F92;
text-align: left;
font-family: century gothic;
font-size: 20pt;
line-height: 30px;
text-shadow: #000 3px 3px;
list-style-type: none;
margin: 7px;
padding: 5px 20px 5px 20px;} 
 
#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
 
#navmenu li {display: inline; }
 
#navmenu ul li a {color: #343A5A;
text-decoration: none;
font-size: 18px;
line-height: 30px;
font-family: 'Patrick Hand SC', cursive;
text-shadow: #fff 2px 2px;
margin: 4px;
font-weight: bold;}
 
#navmenu ul li a:hover {color: #343A5A;
text-decoration: none;
font-size: 18px;
line-height: 30px;
font-family: 'Patrick Hand SC', cursive;
text-shadow: #fff 2px 2px;
margin: 4px;
font-weight: bold;
background-color: #D2D2D2;}
 
 
 /* Welcome Message */
 
#welcome {
color: #fff;
text-shadow: #000 1px 1px;
text-align: center;
font-family: verdana;
font-size: 8pt;
font-style: italic;
} 
 
#welcome b{
color: #fff;
} 
 
#welcome i{
color: #fff;
} 
 
 
 /* -------- Content Structure -------------- */
 
 
/*Entry*/
 
.entry {
width : 570px;
float:left;
color : #fff;
font-family : tahoma;
font-size : 7pt;
background-color : #08090b;
text-align : left;
left: 150px;
border-style : solid;
border-color : #fdc9d7;
border-width : 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
 margin-bottom: 10px;
 
margin-left: 29px;
 
}
 
 
 
.entry a {
color : #9996C5;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
}
 
.entry a:hover {
color : #618391;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
 
 
}
 
.entry-content {
color : #fff;
font-family : century gothic;
font-size : 8pt;
text-align : left;
padding-bottom : 10px;
padding-left : 3px;
}
 
.nav-entry {
display : block;
text-align : center;
margin-bottom : 60px;
}
 
.entry h1 {
 font-family : century gothic;
font-size : 11pt;
font-weight : normal;
margin-top : -8px;
text-align : center;
}
 
.entry h1 a {
color: #fff;
    text-shadow: 0 0 0.5em #8EA4CF, 0 0 0.5em #A47DAD, 0 0 0.5em #8EA4CF;
text-align : center;
font-family : 'streetwise_buddyregular';
font-size : 13pt;
 font-weight: bold;
text-transform : uppercase;
}
 
.entry h1 a:hover {
color : #000;
text-align : center;
font-family : 'streetwise_buddyregular';
font-size : 13pt;
 
text-transform : uppercase;
}
 
.entry h2 {
color : #686868;
text-align : left;
font-family : "Trebuchet MS";
font-size : 10px;
padding : 3px 7px;
margin : 0;
}
 
.entry h2 a {
color : #13516E;
text-decoration : none;
}
 
.entry h2 i {
color : #333;
text-decoration : none;
}
 
.entry h3 {
color : #1175AD;
text-shadow : 1px 1px #fff;
font-family : Trebuchet MS;
font-size : 9pt;
font-weight : normal;
text-align : center;
margin : 0 7px;
padding : 12px 0 0 5px;
text-transform : uppercase;
}
 
.entry h4 {
color : #11628D;
text-align : center;
font-family : century gothic;
text-shadow : 2px 2px #fff;
font-size : 11pt;
}
 
.entry img { 
border: 3px solid #6772A4;
padding: 0px;
margin-bottom : 10px;
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
 } 
 
.entry img:hover {
 border: 3px solid #FFF;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
margin-bottom : 10px;
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
 ;} 
 
/*Page*/
.page {
width : 570px;
float : left;
color : #fff;
font-family : tahoma;
font-size : 7pt;
background-color : #08090b;
text-align : left;
 
top : 0;
border-style : solid;
border-color : #fdc9d7;
border-width : 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom: 10px;
 
margin-left: 29px;
 
}
 
#headerentry {
padding-top: 8px;
 
height: 25px;
}
 
.page a {
color : #9996C5;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
}
 
.page a:hover {
color : #618391;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
 
 
}
 
.page-content {
color : #fff;
font-family : tahoma;
font-size : 8pt;
text-align : left;
padding-bottom : 10px;
padding-left : 3px;
}
 
.nav-entry {
display : block;
text-align : center;
margin-bottom : 60px;
}
 
.page h1 {
color: #fff;
    text-shadow: 0 0 0.5em #8EA4CF, 0 0 0.5em #A47DAD, 0 0 0.5em #8EA4CF;
text-align : center;
font-family : 'streetwise_buddyregular';
font-size : 13pt;
 font-weight: bold;
text-transform : uppercase;}
 
.page h1 a {
color: #fff;
    text-shadow: 0 0 0.5em #8EA4CF, 0 0 0.5em #A47DAD, 0 0 0.5em #8EA4CF;
text-align : center;
font-family : 'streetwise_buddyregular';
font-size : 13pt;
 font-weight: bold;
text-transform : uppercase;
}
 
.page h1 a:hover {
color : #000;
text-align : center;
font-family : 'Patrick Hand SC';
font-size : 16pt;
font-weight: bold;
text-transform : uppercase;
}
 
.page h2 {
color : #686868;
text-align : left;
font-family : "Trebuchet MS";
font-size : 10px;
padding : 3px 7px;
margin : 0;
}
 
.page h2 a {
color : #13516E;
text-decoration : none;
}
 
.page h2 i {
color : #333;
text-decoration : none;
}
 
.page h3 {
color : #1175AD;
text-shadow : 1px 1px #fff;
font-family : Trebuchet MS;
font-size : 9pt;
font-weight : normal;
text-align : center;
margin : 0 7px;
padding : 12px 0 0 5px;
text-transform : uppercase;
}
 
.page h4 {
color : #11628D;
text-align : center;
font-family : century gothic;
text-shadow : 2px 2px #fff;
font-size : 11pt;
}
 
h3 {
color : #81C0D2;
text-shadow : 1px 1px #000;
font-family : Trebuchet MS;
font-size : 8pt;
font-weight : bold;
text-align : left;
margin : 0 7px;
padding : 12px 0 0 5px;
text-transform : uppercase;
}
 
/*Comment*/
 
.commentlist .quote {
 
	padding-left: 5px;
	padding-top: 5px;
	width: 550px;}
 
.commentlist li {
 
	margin-top:15px;
	background: url(<a href="http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Furukawa%20Yuuta/Kommentar.png" rel="nofollow">http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Furukawa%20Yuuta/Kommentar.png</a>) bottom no-repeat;
	color:#e4edee;
	width: 550px;
	height: 150px;
	}
 
.commentlist cite {
	display:block;
	font-style:normal;
	padding-left: 5px;
	}
 
.commentlist cite a:link, .commentlist cite a:visited {
	color:#88e5f0;
	text-decoration:none;
	}
 
.commentlist cite a:hover, .commentlist cite a:active {
	color:#FFF;
	text-decoration:underline;
	}
 
img.avatar {
float : left;
margin-right : 5px;
display : inline;
background : #fff;
padding : 3px;
border-right : 1px solid #111;
border-bottom : 1px solid #111;
border-radius : 4px;
}
 
img.avatar:hover {
float : right;
display : inline;
background : #5a4f42;
padding : 3px;
border-right : 1px solid #111;
border-bottom : 1px solid #111;
border-radius : 4px;
}
 
/*Sidebar*/
 
.widget .title {
color: #fff;
text-shadow: 0 0 0.5em #8EA4CF, 0 0 0.5em #A47DAD, 0 0 0.5em #8EA4CF;
font-family : 'streetwise_buddyregular';
font-size : 12pt;
font-weight: bold;
text-transform : uppercase;
text-align: center;
padding-top:2px;
 
}
 
.widget {
color : #fff;
background-color : #08090b;
font-family : tahoma;
font-size : 8pt;
text-align : left;
border-style : solid;
border-color : #fdc9d7;
border-width : 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
 
background-image: url(<a href="http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Studio%20Sunshine/widgetbackground-2.jpg" rel="nofollow">http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Studio%20Sunshine/widgetbackground-2.jpg</a>);
background-repeat:no-repeat;
width : 330px;
overflow : hidden;
 
}
 
.widget ul {
margin : 0;
list-style-type : none;
}
 
.widget li {
margin : 0;
list-style-type : none;
}
 
.widget p {
margin-left : 0;
}
 
.widget h2 {
font-family : Trebuchet MS;
margin : 5px 0 0 0;
color : #949050;
text-align : left;
text-transform : uppercase;
font-size : 8pt;
letter-spacing : 2px;
word-spacing : 1px;
}
 
.widget .clear {
clear : both;
padding : 10px 0 0 0;
}
 
.widget a {
color : #9996C5;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
}
 
.widget a:hover{
color : #618391;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
 
 
}
 
.image {
margin : 2px;
padding : 7px;
background : #6c5f50;
border : #554a3d solid 1px;
border-radius : 5px;
}
 
.image:hover {
margin : 2px;
padding : 7px;
background : #2a241e;
border : #2a241e solid 1px;
}
 
blockquote {
font-family : Trebuchet MS;
font-size : 11px;
line-height : 14px;
color : #aea294;
padding : 2px 15px 2px 15px;
background-image : url(images/bg.jpg);
border : #000 solid 2px;
border-radius : 10px;
}
 
 
input, textarea, option, select, button {
font-family : Verdana, Helvetica;
font-size : 7pt;
color : #000;
padding : 3px;
border : #CDCDCD solid 3px;
border-radius : 5px;
background-color : #CECECE;
}
 
.clear {
clear : both;
height : 1px;
margin : 0;
overflow : hidden;
}
 
.datum{
display: block;
margin: -25px 0px 0px 0px;
padding: 3px 0 0;
height: 80px;
width: 150px;
float: left;
background: url(<a href="http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/Datum-2.png" rel="nofollow">http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/Datum-2.png</a>) no-repeat;
}
 
.datum .day {
display: block;
text-align: center;
color: #fff;
font-family: "Georgia", Trebuchet MS, Tahoma;
font-size: 20px;
line-height: 14px;
margin: 20px 0px 5px  55px;
text-shadow: #000 1px 1px;
font-style: normal;
}
 
.datum .year {
display: block;
text-align: center;
color: #fff;
font-family: "Georgia", Trebuchet MS, Tahoma;
font-size: 11pt;
margin: 0px 0px 0px 55px;
text-shadow: #000 1px 1px;
}
 
.footer-text {
font-family : verdana;
font-size : 7pt;
color : #767676;
text-align : center;
padding-top : 25px;
}
 
/*Kommentar Link*/
 
.commentpost {
text-align : right;
color : #9996C5;
font-family : Verdana;
font-size : 8pt;
margin : 0 7px 3px 0;
display : inherit;
}
 
.commentpost a{
color : #9996C5;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
font-style: none;
 
}
 
.commentpost a:hover {
color : #FFF;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
text-decoration: blink;
 }
 
a img {
border : 0;
}
 
 
a {
color : #618391;
text-transform : uppercase;
font-family : verdana;
font-size : 7pt;
text-decoration:none;
}
 
 
/*--navigation--*/
 
.navigations {
display:block; margin:10px 0 20px 0; padding:0; text-align:center;}
.navigations p {margin:0; padding:0;}
 
 
/*Affilation*/
 
.input {font-size: 7pt;
font-family : Verdana, Helvetica;
font-size : 7pt;
color : #000;
padding : 3px;
border : #fff solid 3px;
border-radius : 5px;
background-color : #B9B9B9;
width: 88px;
height: 30px;
}
 
.input1 {font-size: 7pt;
font-family : Verdana, Helvetica;
font-size : 7pt;
color : #000;
padding : 3px;
border : #fff solid 3px;
border-radius : 5px;
background-color : #B9B9B9;
width: 100px;
height: 30px;
}
 
.input2 {font-size: 7pt;
font-family : Verdana, Helvetica;
font-size : 7pt;
color : #000;
padding : 3px;
border : #fff solid 3px;
border-radius : 5px;
background-color : #B9B9B9;
width: 468px;
height: 30px;
}
 
 
/*Sidebar*/
 
#left-sidebar {
overflow : hidden;
float : right;
display : inline;
margin-right: 20px;
}
 
.cpmfetch {
border-style : solid;
border-color : #6772A4;
border-radius : 5px;
border-width : 4px;
}
.cpmfetch:hover {
border: 4px solid #FFF;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */}

Here is the link to my homepage. Thank you in advance

Tags:

Mon, 2013-09-16 22:34

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 4 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Un-enclosed float elements

Do this:

#wrapper {
  background-image: url("http://i913.photobucket.com/albums/ac335/startingdays/Layouts/Kuromi/background-1.png");
  background-repeat: repeat-y;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  width: 975px;
  }

See Enclosing float elements for an explanation.

You have html errors that can cause problems, especially the repeated use of an id token. A given id may only be used once on a page. See html validator.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2013-09-17 16:54

Chrissy

Offline

newbie

Germany

Last seen: 1 year 18 weeks ago

Germany

Timezone: GMT+9

Joined: 2012-10-27

Posts: 5

Points: 7

Thank you so much. It helps

Thank you so much. It helps me a lot. I could fix the problem now.

Wrapper Background not showing up

Un-enclosed float elements

Thank you so much. It helps

User login

Navigation