• Locked
4 replies [Last post]
Sun, 2012-11-11 11:02
Chrissy
Chrissy's picture
Offline
newbie
Germany
Last seen: 1 year 27 weeks ago
Germany
Timezone: GMT+9
Joined: 2012-10-27
Posts: 5
Points: 7

Since few days I´m trying to solve the problem with the sidebars in my wordpress layout. Now the sidebars are on their place but now the content appears below it. I´m working currently in xampp, so I could only make a screenshot.
Here is a pic how it looks like.

layout_0.jpg

my php code:

<?php get_header(); ?>
<div id="page">
<!--Inhalt-->   
<div id="contentwrapper">
<?php get_sidebar(); ?>
<div id="left-sidebar"><?php include (TEMPLATEPATH . '/sidebar-left.php'); ?></div>
<div id="right-sidebar"><?php include (TEMPLATEPATH . '/sidebar-right.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(); ?>">
<p class="datum"><span class="content">Posted by: <?php the_author() ?><br />Tag: <?php the_category(', '); ?>
<br />Date: <?php the_time('jS, M, Y') ?></span></p>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div style="clear:both;"></div>
<div class="entry-content">
<?php the_content(''); ?>
</div>
<div class="commentpost"><a href="http://s803.photobucket.com/albums/yy314/chrissy2504/Startingdays/?action=view&amp;current=comments.png" target="_blank"><img src="http://i803.photobucket.com/albums/yy314/chrissy2504/Startingdays/comments.png" border="0" alt="Photobucket"></a> <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?></div>
</div>
<!--post-end-->
<?php endwhile; ?>   
<?php if(function_exists('wp_paginate')) {
    wp_paginate();
} ?>
</div><!--Inhalt--> 
</div>
<?php get_footer(); ?>

My css code:

body{
font-family: Verdana;
font-size:7pt;
text-align:center;
color: #383838;
margin:0 auto;
padding:0;
border:0; 
background-color: #000; 
height:100%;
}
 
html {
  padding: 0px;
  margin: 0px;
 
}
 
#page1{
width: 1250px; 
margin: 0 auto;
 
position:relative;
 
}
#page{
width: 1250px; 
margin: 0 auto;
background-image: url(<a href="http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/bg-1.jpg" rel="nofollow">http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/bg-1.jpg</a>);
background-repeat: repeat-y;
height:100%;
position:relative;
 
}
#header {
height: 550px;
}
 
#contentwrapper{
float: center;
width: 1250px;
margin-top: 0px;
padding: 0px;
overflow: hidden ;}
 
 
 
 /* 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: #A8EBFB;
text-decoration: none;
font-size: 14px;
line-height: 30px;
text-shadow: #000 1px 1px;
margin: 4px}
 
#navmenu ul li a:hover {color: #FFFFFF;
text-decoration: none;
font-size: 14px;
line-height: 30px;
text-shadow: #000 1px 1px;
margin: 4px}
 
 
 
 /* Welcome Message */
#welcome {
color: #E3E3E3;
text-shadow: #000 2px 2px;
text-align: center;
font-family: verdana;
font-size: 8pt;
font-style: italic;
} 
 
#welcome b{
color: #b9b985;
} 
 
#welcome i{
color: #e4d9ce;
} 
 
 
 /* -------- Content Structure -------------- */
 
 
/* Post Style*/
 
 
.entry {
width: 545px;
float: right;
margin-right: 355px;
color: #fff;
font-family: verdana;
font-size: 7pt;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom: 10px;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow:  3px 3px 3px #000;
box-shadow:  3px 3px 3px #000;
background-color: #4B4B4B;
top: 0px;}
 
.entry a {
color: #81C0D2;
font-family: verdana;
font-size: 7pt;
text-transform: uppercase;
 
}
 
.entry a:hover {
color: #B9B9B9;
font-family: verdana;
font-size: 7pt;
text-transform: uppercase;
 
}
.entry-content {
color: #EBEBEB;
font-family: verdana;
font-size: 7pt;
text-align: left;
padding-bottom: 10px;
padding-left: 3px;}
 
.entry-meta-out {
text-align: left;
background-color: #F9EDED;
padding: 5px 10px;
}
 
.entry-meta1 {
color: #414141;
text-align: left;
font-family: "Trebuchet MS", Tahoma;
font-size: 11px;
margin: 0px;
}
 
.entry-meta1 a{
color: #13516E;
text-decoration: none;
}
 
.nav-entry {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
.entry h1 {
color:#BCECF8;
text-shadow: #000 1px 1px;
font-family: century gothic;
font-size: 11pt;
margin: 15px 75px 0px 0px;
 
}
 
.entry h1 a{
color: #81C0D2;
text-align: center;
font-family: century gothic;
font-size: 11pt;
margin: 15px 0px 0px 0px;
}
 
.entry h1 a:hover {
color: #fff;
text-align: center;
font-family: century gothic;
font-size: 11pt;
margin: 15px 0px 0px 0px;
}
.entry h2 {
color: #686868;
text-align: left;
font-family: "Trebuchet MS";
font-size: 10px;
padding: 3px 7px;
margin: 0px;
}
 
.entry h2 a{
color: #13516E;
text-decoration: none;
}
 
.entry h2 i{
color: #333;
text-decoration: none;
}
 
.entry h3{
color: #FDA150;
text-shadow: #000 1px 1px;
font-family: Trebuchet MS;
font-size: 9pt;
font-weight: bold;
text-align: center;
margin: 0px 7px;
padding: 12px 0px 0px 5px;
text-transform: Uppercase;}
 
.entry h4 {
color:#FDA150;
text-shadow: #000 1px 1px;
font-family: century gothic;
font-size: 12pt;
text-align: center;}
 
.page h1 {
color: #333;
text-shadow: #d4d4d4 1px 1px;
border-bottom: 0px dotted #fff;
background: #e0e0e0;
text-align: center;
font-family: "Trebuchet MS", Arial;
 
font-size: 13px;
text-transform: uppercase;
font-style: italic;
padding: 3px;
margin: 0px 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
 
.page h1 a{
color: #2e2820;
text-decoration: none;
}
 
 
 
/* Comment Style*/
 
h3{
color: #81C0D2;
text-shadow: #000 1px 1px;
font-family: Trebuchet MS;
font-size: 8pt;
font-weight: bold;
text-align: left;
margin: 0px 7px;
padding: 12px 0px 0px 5px;
text-transform: Uppercase;
 
}
 
.comments-title {
color: #fff;
text-align: left;
font-family: Trebuchet MS;
font-size: 10pt;
font-weight: bold;
margin: 0px;
text-shadow: #222 1px 1px;
text-transform: lowercase;
}
 
.comments-title a{
color: #afaf8f;
text-decoration: none;
}
 
.comments-title strong{
color: #cbc4bb;
text-decoration: none;
}
 
.comments-content {
color: #958679;
padding: 0px 3px 0px 3px;
font-family: verdana;
font-size: 7pt;
text-align: justify;
}
 
.comment-space {
margin: 15px;
}
 
img.avatar {  
float:left;
margin-right:5px;
display: inline;
background: #fff;
padding: 3px;
border-right: 1px solid #111;
border-bottom: 1px solid #111;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
} 
 
img.avatar:hover {  
float:left;
margin-right:5px;
display: inline;
background: #5a4f42;
padding: 3px;
border-right: 1px solid #111;
border-bottom: 1px solid #111;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
} 
 
 
/*Sidebar style*/
 
.widget .title {
color: #8FE3FA;
font-family: century gothic ;
font-size: 11pt;
text-transform: uppercase;
text-align: center;
text-shadow: #000 1px 1px;
}
 
 
 
.widget {
color: #ffffff;
background-color:#4B4B4B;
font-family: verdana;
font-size: 7pt;
text-align: left;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow:  3px 3px 3px #000;
box-shadow:  3px 3px 3px #000;
width: 300px;
overflow: hidden;}
 
 
.widget ul{
margin: 0;
list-style-type: none;
}
 
.widget li{
margin: 0;
list-style-type: none;}
 
.widget p {
margin-left: 0px;}
 
 
.widget h2 {
font-family: Trebuchet MS;
margin: 5px 0px 0px 0px;
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: #B9B9B9;
text-transform: uppercase;
font-family: verdana;
font-size: 7pt;
}
 
 
 
/*Options style*/
 
a {
color: #FFA95D;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
color: #186B92;
}
 
.image {  
margin: 2px;
padding: 7px;
background: #6c5f50;
border: 1px solid #554a3d;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
} 
 
.image:hover {  
margin: 2px;
padding: 7px;
background: #2a241e;
border: 1px solid #2a241e;
} 
 
 
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: 2px solid #000;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
 
.affiliates img {
margin: 5px;
}
 
 
input, textarea, option, select, button {
font-family: Verdana, Helvetica;
font-size: 7pt;
color: #000;
padding: 3px;
border: 3px solid #fff;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #B9B9B9;
 
}
 
.clear {
clear: both;
height:1px;
margin:0;
overflow:hidden;}
 
 
{
list-style-type: none;}
 
/*--navigation--*/
 
.navigation {
	float: center;
	width: 300px;
	margin-bottom: 20px ;
	margin-left: 170px;
}
 
 
/*---Datum----*/
 
.datum {
display: block;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 80px;
width: 180px;
float: left;
background: url(<a href="http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/entry1-3.png" rel="nofollow">http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/entry1-3.png</a>) no-repeat;
}
 
.datum .content {
line-height: 15px;
text-align: left;
color: #EBEBEB;
font-family: Verdana;
font-size: 7pt;
margin: 15px 0px 0px 59px;
display:inherit;
}
 
/*---Footer----*/
#footer {
background-image: url(<a href="http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/Footer2-1.jpg" rel="nofollow">http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/Footer2-1.jpg</a>);
background-repeat: none;
height: 94px;
width: 1250px;
margin: 0 auto;
clear:both;
}
 
 
 
.footer-text {
font-family: verdana;
font-size: 7pt;
color: #fff;
text-align: center;
padding-top: 25px;}
 
 
 
  /* Comment in Postings */
.commentpost {
text-align: right;
color: #7d7d7d;
font-family: Verdana;
font-size: 7pt;
margin: 0px 7px 3px 0px;
display:inherit; }
 
a img { border:0;}
 
 
  /* Div Sidebars */
 #right-sidebar {
   overflow: hidden; 
   float: right; 
   position: absolute; 
   margin-left: 913px;
    padding: 0px 0px 0px 0px; 
   display: inline; 
  top: 0%;
 }
 #left-sidebar {
	 overflow: hidden; 
   float: left; 
   position: relative; 
   margin-left: 35px;
   display: inline;
    }
 
 
 /* Linkfarbe */
 
 a { color: #81C0D2;
text-transform: uppercase;
font-family: verdana;
font-size: 7pt;}
 
a :hover { color: #fff;
text-transform: uppercase;
font-family: verdana;
font-size: 7pt;}
 
/*---Coppermine Gallery----*/
 
.cpmfetch { border-style: solid;
border-color:#B9B9B9;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-width: 4px;}	
 
/* Other Style*/
 
.affi img {
border-width :2px;
border-color: #ffffff;
margin: 1px;
border-style: solid;
}
 
.a {font-family: Trebuchet MS;
    font-size: 10pt;
	color: #fff;
	text-align:	center;
	text-transform: uppercase;
	border-image: none;}

Thank you in advance!

Top
Tags:
Sun, 2012-11-11 18:20
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Show us html, not php

From the browser, view source. Copy/paste that to your post. We need the html as seen by the browser.

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.

Top
Sun, 2012-11-11 22:02
#2
Chrissy
Chrissy's picture
Offline
newbie
Germany
Last seen: 1 year 27 weeks ago
Germany
Timezone: GMT+9
Joined: 2012-10-27
Posts: 5
Points: 7

I figured out what the

I figured out what the problem is. I´ve changed the index.php to

<?php get_header(); ?>
<div id="page">
<!--Inhalt-->   
<div id="contentwrapper">
 
<div id="left-sidebar"><?php include (TEMPLATEPATH . '/sidebar-left.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(); ?>">
<p class="datum"><span class="content">Posted by: <?php the_author() ?><br />Tag: <?php the_category(', '); ?>
<br />Date: <?php the_time('jS, M, Y') ?></span></p>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div style="clear:both;"></div>
<div class="entry-content">
<?php the_content(''); ?>
</div>
<div class="commentpost"><a href="http://s803.photobucket.com/albums/yy314/chrissy2504/Startingdays/?action=view&amp;current=comments.png" target="_blank"><img src="http://i803.photobucket.com/albums/yy314/chrissy2504/Startingdays/comments.png" border="0" alt="Photobucket"></a> <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?></div>
</div>
<!--post-end-->
<?php endwhile; ?>   
 
 
</div><?php if(function_exists('wp_paginate')) {
    wp_paginate();
} ?>
<div id="right-sidebar"><?php include (TEMPLATEPATH . '/sidebar-right.php'); ?></div></div><!--Inhalt--> 
</div>
<?php get_footer(); ?>

site url: www.phelps-twins.com (this morning it was down because for maintenance )
Its working well in IE9 and Google Chrome, but not in Firefox.

Top
Sun, 2012-11-11 23:49
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have some contradictory

You have some contradictory property values in #right-sidebar. Try this:

#right-sidebar {
    left: 913px;
    position: absolute;
    top: 0;
    }

I'd prefer to not use absolute positioning, but to use floats robustly, a refactoring of the document structure would be necessary.

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.

Top
Mon, 2012-11-12 07:24
#4
Chrissy
Chrissy's picture
Offline
newbie
Germany
Last seen: 1 year 27 weeks ago
Germany
Timezone: GMT+9
Joined: 2012-10-27
Posts: 5
Points: 7

Thank you so much ! I´ve

Thank you so much Smile ! I´ve changed the code in my right-sidebar and now it works in every browser!

Top
  • Locked