88casino royale.com.REGISTER NOW GET FREE 888 PESOS REWARDS!

mhensler
(@mhensler)

15 years, 6 months ago

Alright, so I’m trying to get a Theme designed. I mocked up the layout and began putting it together in Dreamweaver, which then I will be setting up for WordPress (inserting all the backend code). Well, I’m running into a weird issue at the bottom of my sidebar (although it’s not in the #sidebar container). Here’s the page

The issue is that piece at the bottom of the sidebar that just isn’t lining up.

Here’s a copy of my CSS as well.

Any ideas?

Viewing 11 replies - 1 through 11 (of 11 total)

Thread Starter

(@mhensler)

Nevermind…FINALLY figured it out.

However, now a new issue. The site alignment is WAY off in IE 8, but fine in FF. What’s not cross browser compatible? I checked in it Dreamweaver, and there were no compatibility issues.

Peter Boosten

(@pboosten)

15 years, 6 months ago

Most errors with IE are because of xhtml errors.

Peter

Thread Starter

mhensler

(@mhensler)

15 years, 6 months ago

Validation errors were simply “alt” missing from my image tags and missing the form action. Those wouldn’t cause the alignment issues.

Peter Boosten

(@pboosten)

15 years, 6 months ago

Oke, that was the easy shot ??

Your clearing of the floats isn’t right.
#content is supposed to be around .blog-content and #sidebar, but it isn’t. Try this by giving #content a red border, you’ll see.

I think you got to reevaluate the position of the clear: both;, or the way to put it there (I usually create an empty div).

Peter

Thread Starter

mhensler

(@mhensler)

15 years, 6 months ago

Hmmm…thanks. I looked over the code, and #content appears to be wrapped around both .blog-content and #sidebar (the divs I’m assuming, right)? I put the clear:both in an empty Div and it seemed to help, but not completely.

Peter Boosten

(@pboosten)

15 years, 6 months ago

The divs are correct, but it’s the clearing that isn’t. If you put
border: 1px solid red; in #content, then it should be around the entire post, including the sidebar, but now it just stays at the top, just under the header. I suggest you look at all elements that use floats, and see if they need clearing.

Peter

Thread Starter

mhensler

(@mhensler)

15 years, 6 months ago

Thanks, I never dealt a whole lot with floats so it’s all new to me….I was able to get the red border around the sidebar and blogcontent, but the rest of the alignment is off. I placed clears after each END of floated containers in it’s own container. Should the clears be INSIDE the div of the floating container? Here’s what it looks like now

Peter Boosten

(@pboosten)

15 years, 6 months ago

You have to remember that the border is created outside the element, so a 1px border adds 2px to your element, both in width and height. Therefore your layout is gone. to compensate you would have to decrease the widths of the containers you’re putting the border around.

But forget .blog-content and #sidebar, these are alright (although .blog-content itself has some floats in it).

The clear is in the div:

<div id="content">
  <div class="blog-content">blah</div>
  <div id="sidebar">blah</div>
  <div class="clear"></div>
</div>

and the css:

#content {
  width: 900;
}

.blog-content {
  width: 600;
  float: left;
}

#sidebar {
  width: 300;
  float: left;
}

.clear {
  clear: both;
}

Peter

Thread Starter

mhensler

(@mhensler)

15 years, 6 months ago

Thanks. I tried that, and my alignment is pretty decent in IE, but there’s still some alignment issues. Here is what it looks like now.

And here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hensler's Technology Site</title>

<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="page">
		<!--Insert the layout here-->

<div id="header">

<div id="top_nav">
		<ul>
			<li><a href="#"><img src="images/PNG/home.png" border="0" /></a></li>
			<li><a href="#"><img src="images/PNG/aboutme.png" border="0" /></a></li>
            <li><a href="#"><img src="images/PNG/resources.png" border="0" /></a></li>
            <li><a href="#"><img src="images/PNG/contact.png" border="0" /></a></li>
		</ul>

  </div>
</div> <!--End of "header"-->

<div id="content">

   <div class="blogcontent">
   <div class="post">
   <div class="post_title">
   <h2><a href="#">Sample Post</a></h2>

   <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>

   </div> <!--End of "post title"-->
   <!--Comments-->
   <div class="postmetadata">
   <a href="#">2</a>

   </div>
   <br class="space" />

   <div class="entry">
   <p>
   <a href="#">

   <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0" alt=""/>
   </a>

   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
   </p>

   <a href="#" class="more-link">Read more &raquo;</a>
 </div> <!--End of "entry"-->

   </div> <!--End of "post"-->
   </div> <!--End of "blogcontent"-->
 <div id="sidebar">
<div id="search">
   <form>
   <label class="hidden">Search for:</label>
   <div>
   <input type="text" value="" name="s" id="s" />
   <input type="submit" id="searchsubmit" value="Search" />
   </div>
   </form>
   </div> <!--End of "search"-->
   <ul>
   <li class="categories">
   <h2>Categories</h2>
   <ul>
   <li><a href="#">Lorem ipsum</a> (2)</li>

   <li><a href="#">Category 2</a> (1)</li>
   <li><a href="#">Sample category 3</a> (15)</li>
   </ul>

   </li> 

   <li class="pages">
   <h2>Pages</h2>
   <ul>
   <li><a href="#">Tech Ed 10</a> </li>
   </ul>

   </li>

   <li class="archives">
   <h2>Archives</h2>
   <ul>
   <li><a href="#">November 2008</a> (2)</li>
   </ul>

   </li>
   </ul> <!--End of sidebar's list-->

  </div> <!--End of "sidebar"-->

 <div class="bottom_sidebar">
   &nbsp;
  </div>

<div class="clear"></div>
</div> <!--End of "content"-->  

<!--Begin Footer-->

 <div id="footer">

   </div>

</div> <!--End of "page"-->

</body>
</html>

Here’s the CSS:

@charset "utf-8";
/* CSS Document */

body
   {
   margin: 0px;
   padding: 0px;
   text-align: center;
   background-color:#585858;
   }

h1, h2, h3, ul, li, p, form
   {
   margin: 0px;
   padding: 0px
   }

hr
   {
   display: none;
   }

a{
   text-decoration:none;
   }

a:hover{
   text-decoration:underline;
   }

.space
   {
   clear: both;
   }

#page
   {
   margin: 0px auto;
   padding: 0;
   width: 960px;
   background-image:url(images/PNG/contentbg.png);
   background-repeat:repeat-y;
   }

#header
   {
   background:#CCCCCC;
	height: 219px;
   width: 842px;
   text-align: center;
   background-image:url(images/PNG/header.png);
   }

#headerimg
   {
   margin: 0px;
   text-align: left;
   }

#top_nav
   {

   height: 45px;
   padding-left: 65px;
   padding-top:130px;
   text-align: left;
   }

 #top_nav ul
   {
   list-style: none;
   }

   #top_nav li
   {
   display: inline;
   padding:10px;
   }

   #top_nav li a:hover
   {
   }
#top_sidebar
   {
   color: #fff;
   font-weight: bold;
   height: 10px;
   padding-right: 155px;
   text-align: right;
   }

#content
   {

   float: none ;
   text-align: left;
   border: 1px solid red;

   width:842px;

   }

.blogcontent, .widecolumn
   {
   float: left;
   padding: 10px 0px;
   width: 553px;
   background-image:url(images/PNG/postbg.png);
   background-repeat:repeat-y;
   }
.blogcontent form
   {
   color: #fff;
   padding: 10px 50px 0px 90px;
   }
 .blogcontent input
   {
   background-color: transparent;
   border: 1px solid #214b73;
   color: #fff;
   }

   .blogcontent #searchsubmit
   {
   background: #b1b1b1;
   color: #214b73;
   font-weight: bold;
   padding: 2px;
   }

   .blogcontent h2
   {
   color: #fff;
   font: bold 18px  Georgia, Arial;
   padding: 0px 50px 0px 90px;
   }

   .blogcontent small a
   {
   font-size: 18px;
   padding: 0px 50px 0px 90px;
   }

.post
   {
   text-align: left;
   padding:0px 50px 0px 90px;
   }

 .post h2
   {
   padding: 0px;
   color:#fff
   }

 .post .post_title
   {
   float: left;
   width: 90%;
   }

   .post_title h2, a
   {
   padding: 0px;
   margin: 0px;
   font: Georgia, Arial;
   font-size:24px;
   color:#F90;
   }

   .post_title a
   {
   text-decoration: none;
   }

   .post_title a:hover
   {color:#FFF;
   }

   .post_title small
   {color: #385673;
   font: normal 12px Georgia, Arial;

   }

   .post_title small a
   {
    color: #385673;
   font: normal 12px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .post .postmetadata
   {
   float: right;
   height: 34px;
   padding: 12px 5px;
   width: 35px;
   }

   .postmetadata a
   {
   text-decoration: none;
   font-size:12px;
   color:#F90;
   }

   .postmetadata span
   {
   padding-left:5px;
   color: #416fa3;
   font: normal 24px Georgia, Arial;

   }

.entry
   {color: #c3c3c3;
   font: normal 12px "Times New Roman", Times, serif;
   padding: 20px 0px
   }

 .entry a
   {
   padding: 0px;
   margin: 0px;
   color:#F90;
   font: normal 12px "Times New Roman", Times, serif;
   }

   .entry a:hover
   {
	   color:#CCC;
   }

   .entry blockquote
   {
   border: 2px dashed #F90;
   }

   .entry img
   {
   float: left;
   padding: 0px 20px 0px 0px;

   }

   .entry ul
   {padding-left:20px;
   }

   .entry li
   {

   }

   .entry ol li
   {
   list-style: decimal;
   } 

   .entry p
   {
   text-align: justify;
   padding: 0px;
   }

   .entry span
   {color:#FFF;
   }

#sidebar
   {

   float: left;
   padding: 0px 0px 0px 0px;
   text-align: left;
   width: 289px;
   background-image:url(images/PNG/sidebarbg.png);
   background-repeat:repeat-y;
   }

   #sidebartop
   {

   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 289px;
   background-image:url(images/PNG/sidebartop.png);

   }

 #sidebar ul
   {
   list-style: none;
   margin: 0px; padding:5px 0px 0px 0px;

   }

   #sidebar li
   {
   margin: 0px;
   margin: 0px 0px 0px 45px;
   }

   #sidebar li h2
   {
   margin: 0px;
   font-size:12px;
   font:normal Rockwell, Georgia, Arial;
   color:#F90;
   }

 #sidebar ul ul
   {
   list-style: none;
   margin: 0px;
   font-size:11px;
   font: normal Georgia, Arial;
   }

   #sidebar ul ul li
   {
   margin: 0px;
   font: normal 11px Georgia, Arial;
  padding:0px 0px 0px 15px;
   }

   #sidebar ul ul li a
   {font: normal 11px Georgia, Arial;
   text-decoration:none
   }

   #sidebar ul ul li a:hover
   {text-decoration:underline;
   color:#CCC;
   }

.bottom_sidebar
   {

   float: right;
   height: 40px;
   width: 289px;
   background-image:url(images/PNG/sidebarbottomtwo.png);
   font:Georgia, Arial;
   font-size:12px;
   padding:0px 0px 0px 0px;}

#search
   { padding:0px 0px 15px 35px; }

 #search input
   {background-color:#F90;
   color:#000;
   font:Arial, Helvetica, sans-serif;

 }

#search #searchsubmit
   {
   background: #b1b1b1;
}

#footer
   {
   background:#999966;
   height: 34px;
   text-align: left;
   width: 842px;/*909*/
   background-image:url(images/PNG/bottomfooter.png);
   }

 #footer .column1
   {
   background:#FF3333;
   float: left;
	width: 300px;
   }

   .column1 .bottom
   {

}

   .column1 a
   {
   text-decoration: none;
   }

   #footer .column2
   {
   background-color:#006699;
   float: left;
   width: 250px;
   }

   .column2 h2
   {
   }

   .column2 ul
   {
   list-style: none;
   }

   .column2 a
   {
   text-decoration: none;
   }

.clear {
  clear: both;
}

Peter Boosten

(@pboosten)

15 years, 6 months ago

I’m not quite sure about that bottom-sidebar. What would happen if you made that part of the sidebar div (and remove the float on that div)?

I’m not quite sure how that one behaves right now.

so this:

</div> <!--End of "sidebar"-->

 <div class="bottom_sidebar">

into this:

<div class="bottom_sidebar">
  </div> <!--End of "sidebar"-->

Peter

Thread Starter

mhensler

(@mhensler)

15 years, 6 months ago

Ok, so I made some modifications, and got those issues worked out. Now, I have another. My footer is set to fixed and 0 from the bottom. It works FINE in FF, but my bg image for the footer is shifted to the right in IE8.

Here’s the URL…test it and see.

Here’s my CSS:

@charset "utf-8";

/* CSS Document */

html, body {height:100%;}

body

   {

   margin: 0px;

   padding: 0px;

   text-align: center;

   background-color:#585858;

   }

h1, h2, h3, ul, li, p, form

   {

   margin: 0px;

   padding: 0px

   }

hr

   {

   display: none;

   }

a{

   text-decoration:none;

   }

a:hover{

   text-decoration:underline;

   }

.space

   {

   clear: both;

   }

#page

   {

   margin: 0px auto;

   padding: 0;

   width: 842px;

   background-image:url(images/PNG/contentbg.png);

   background-repeat:repeat-y;
   height:100%;

   }

#header

   {

   background:#CCCCCC;

	height: 219px;

   width: 842px;

   text-align: center;

   background-image:url(images/PNG/header.png);

   }

#headerimg

   {

   margin: 0px;

   text-align: left;

   }

#top_nav

   {

   height: 45px;

   padding-left: 65px;

   padding-top:130px;

   text-align: left;

   }

 #top_nav ul

   {

   list-style: none;

   }

   #top_nav li

   {

   display: inline;

   padding:10px;

   }

   #top_nav li a:hover

   {

   }

#top_sidebar

   {

   color: #fff;

   font-weight: bold;

   height: 10px;

   padding-right: 155px;

   text-align: right;

   }

#content

   {

   float: none ;

   text-align: left;

   width:842px;
  height:100%;

   }

.blogcontent, .widecolumn

   {

   float: left;

   padding: 10px 0px;

   width: 553px;

   background-image:url(images/PNG/postbg.png);

   background-repeat:repeat-y;
   height:100%;
   overflow:visible;

   }

.blogcontent form

   {

   color: #fff;

   padding: 10px 50px 0px 90px;

   }

 .blogcontent input

   {

   background-color: transparent;

   border: 1px solid #214b73;

   color: #fff;

   }

   .blogcontent #searchsubmit

   {

   background: #b1b1b1;

   color: #214b73;

   font-weight: bold;

   padding: 2px;

   }

   .blogcontent h2

   {

   color: #fff;

   font: bold 18px  Georgia, Arial;

   padding: 0px 50px 0px 90px;

   }

   .blogcontent small a

   {

   font-size: 18px;

   padding: 0px 50px 0px 90px;

   }

.post

   {

   text-align: left;

   padding:0px 50px 0px 90px;

   }

 .post h2

   {

   padding: 0px;

   color:#fff

   }

 .post .post_title

   {

   float: left;

   width: 90%;

   }

   .post_title h2, a

   {

   padding: 0px;

   margin: 0px;

   font: Georgia, Arial;

   font-size:24px;

   color:#F90;

   }

   .post_title a

   {

   text-decoration: none;

   }

   .post_title a:hover

   {color:#FF9900;

   }

   .post_title small

   {color: #FFFFFF;

   font: normal 12px Georgia, Arial;

   }

   .post_title small a

   {

    color: #FFFFFF;

   font: normal 12px Georgia, Arial;

   padding: 0px;

   margin: 0px;

   }

   .post .postmetadata

   {

   float: right;

   height: 15px;

   padding: 12px 5px;

   width: 35px;

   }

   .postmetadata a

   {

   text-decoration: none;

   font-size:12px;

   color:#F90;

   }

   .postmetadata span

   {

   padding-left:5px;

   color: #416fa3;

   font: normal 24px Georgia, Arial;

   }

.entry

   {color: #c3c3c3;

   font: normal 12px "Times New Roman", Times, serif;

   padding: 20px 0px

   }

 .entry a

   {

   padding: 0px;

   margin: 0px;

   color:#F90;

   font: normal 12px "Times New Roman", Times, serif;

   }

   .entry a:hover

   {

	   color:#CCC;

   }

   .entry blockquote

   {

   border: 2px dashed #F90;

   }

   .entry img

   {

   float: left;

   padding: 0px 20px 0px 0px;

   }

   .entry ul

   {padding-left:20px;

   }

   .entry li

   {

   }

   .entry ol li

   {

   list-style: decimal;

   } 

   .entry p

   {

   text-align: justify;

   padding: 0px;

   }

   .entry span

   {color:#FFF;

   }

#sidebar

   {

   float: left;

   padding: 0px 0px 0px 0px;

   text-align: left;

   width: 289px;

   background-image:url(images/PNG/sidebarbg.png);

   background-repeat:repeat-y;

   }

 .belowsidebar

 {width:289px;
 height:49px;
 background-image:url(images/PNG/belowsidebarbg.png);
 background-repeat:repeat-y;
 }

   .sidebartop

   {

   float: left;

   padding: 0px 0px 0px 0px ;

   text-align: left;

   width: 289px;
   height:44px;

   background-image:url(images/PNG/sidebartoptwo.png);

   }

 #sidebar ul

   {

   list-style: none;

   margin: 0px; padding:5px 0px 0px 0px;

   }

   #sidebar li

   {

   margin: 0px;

   margin: 0px 0px 0px 70px;

   }

   #sidebar li h2

   {

   margin: 0px;

   font-size:14px;

   font:normal Arial, Helvetica, sans-serif;

   color:#FFF;

   }

 #sidebar ul ul

   {

   list-style: none;

   margin: 0px;

   font-size:11px;

   font: normal Georgia, Arial; 

   }

   #sidebar ul ul li

   {

   margin: 0px;

   font: normal 11px Georgia, Arial;

  padding:0px 0px 0px 15px;

   }

   #sidebar ul ul li a

   {font: normal 11px Georgia, Arial;

   text-decoration:none

   }

   #sidebar ul ul li a:hover

   {text-decoration:underline;

   color:#CCC;

   }

.bottom_sidebar

   {

   float: right;

   height: 40px;

   width: 289px;

   background-image:url(images/PNG/sidebarbottomtwo.png);

   font:Georgia, Arial;

   font-size:12px;

   padding:0px 0px 0px 0px;}

#search

   { padding:0px 0px 0px 0px; }

 #search input

   {background-color:#F90;

   color:#000;

   font:Arial, Helvetica, sans-serif;

 }

#search #searchsubmit

   {

   background:#3c3c3c;
   border:1px solid #FF9900;
   font:Arial, Helvetica, sans-serif;
   font-weight:500;
   color:#FFFFFF

}

#footer

   {

   height: 34px;

   text-align: left;

   width: 842px;/*909*/

   background-image:url(images/PNG/footertab.png);

   position:fixed;
   bottom:0;

   }

 #footer .column1

   {

   background:#FF3333;

   float: left;

	width: 300px;
	text-align:center;

   }

   .column1 .bottom

   {

}

   .column1 a

   {

   text-decoration: none;

   }

   #footer .column2

   {

   background-color:#006699;

 float: left;
   width: 250px;

   }

   .column2 h2

   {

   }

   .column2 ul

   {

   list-style: none;

   }

   .column2 a

   {

   text-decoration: none;

   }

.clear {

  clear: both;

}

.footertext {color:#FF9900;
font:Arial, Helvetica, sans-serif;
font-weight:600;
font-size:12px;
padding-top:15px;

}

Here’s the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hensler's Technology Site</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div id="page">

		<!--Insert the layout here-->

<div id="header">

<div id="top_nav">

		<ul>

			<li><a href="#"><img src="images/PNG/home.png" border="0" /></a></li>

			<li><a href="#"><img src="images/PNG/aboutme.png" border="0" /></a></li>

            <li><a href="#"><img src="images/PNG/resources.png" border="0" /></a></li>

            <li><a href="#"><img src="images/PNG/contact.png" border="0" /></a></li>

		</ul>

  </div> 

</div> <!--End of "header"-->

<div id="content">

   <div class="blogcontent">

   <div class="post">

   <div class="post_title">

   <h2><a href="#">Sample Post</a></h2>

   <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>

   </div> <!--End of "post title"-->

   <!--Comments-->

   <div class="postmetadata">

   <a href="#">2</a>

   </div>

   <br class="space" />

   <div class="entry">

   <p>

   <a href="#">

   </a>

   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

   </p>

   <a href="#" class="more-link">Read more &raquo;</a>

 </div> <!--End of "entry"-->

   </div> <!--End of "post"-->

</div> <!--End of "blogcontent"-->  

 <div id="search">

   <form>

   <div>

   <input type="text" value="" name="s" id="s" />

   <input type="submit" src="images/PNG/search.png" id="searchsubmit" value="Search"  />

   </div>

   </form>

   </div> <!--End of "search"-->

 <div class="sidebartop"></div>
 <div id="sidebar">

   <ul>

   <li class="categories">

   <h2>Categories</h2>

   <ul>

   <li><a href="#">Lorem ipsum</a> (2)</li>

   <li><a href="#">Category 2</a> (1)</li>

   <li><a href="#">Sample category 3</a> (15)</li>

   </ul>

   </li> 

   <li class="pages">

   <h2>Pages</h2>

   <ul>

   <li><a href="#">Tech Ed 10</a> </li>

   </ul>

   </li>

   <li class="archives">

   <h2>Archives</h2>

   <ul>

   <li><a href="#">November 2008</a> (2)</li>

   </ul>

   </li>

   </ul> <!--End of sidebar's list-->

  <div class="bottom_sidebar">

  </div> 

  </div> <!--End of "sidebar"-->

<div class="clear"></div>

</div> <!--End of "content"-->  

<!--Begin Footer-->

 <div id="footer">

<p align="center" class="footertext">Copyright 2009 Mr.Hensler </p>

   </div>

</div> <!--End of "page"-->

</body>

</html>

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Mocking up new Template…Issues’ is closed to new replies.

Mocking up new Template…Issues

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics