Redisgning Site With Divs - New Help

**TheMovieman** · March 24, 2008

I'm redisgning my site using DIVs instead of tables, but I've run into problems, some I've fixed. One that elludes me because it should be simple. On this test page, I have an image that I want to a border around, but no matter what I do, nothing seems to take.

Here's the page: http://www.moviemansguide.com/beta

Here's the page code (I've marked the relevant area):

><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Movieman's Guide to the Movies | The Final Word on Movies... and DVDs!</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link href="style-black.css" rel="stylesheet" type="text/css"> 
<link rel="shortcut icon" href="/favicon.ico" />

</head>

<body>
<div id="mainContainer">
<div id="header">
<img src="images/header/logo02.jpg" width="515" height="60">
</div> 
<div class="outer">
<div class="inner">
<div class="float-wrap">





<!-- HERE'S THE AREA OF INTEREST -->

	<div id="content"> 
	  <div class="contentWrap">

	   <div class="headimage">
	   <div class="image">
		<center><a href="reviews/DVD/read.php?id=atonement"><img src="images/homepage/atonement2.jpg" border="1" alt="Atonement"></a></center>
	   </div>
	   </div>
	   <div class="spacer"></div>
	   <div class="home-heading">  latest additions</div>
	  </div>
	</div>

<!-- END -->




	<!-- end centered div -->
	<div id="left"> 
	  <h2><img src="images/header/menu.jpg" width="146" height="16" alt="Main Menu" border="0"></h2>
	  <ul>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com">Home</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/contact">Contact Us</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/forums">Message Board</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviewindex.php?type=dvd">DVD Reviews 

Archive</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviewindex.php?type=movie">Movie Reviews 

Archive</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/theatricalschedule">Movie Release 

Schedule</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/dvdschedule">DVD Release Schedule</a></li>
	  </ul>

	  <h2><img src="images/header/latestreviews.jpg" width="146" height="16" alt="Latest Reviews" border="0"></h2>
  <ul>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=nocountryforoldmen-bd">No Country for Old Men (BD)</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=enchanted">Enchanted</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=atonement">Atonement</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=nocountryforoldmen">No 

Country for Old Men</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=beemovie-2disc">Bee 

Movie: 2-Disc Edition</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=daninreallife-bd">Dan 

in Real Life (BD)</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=gattaca-se">Gattaca: 

Special Edition</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=30daysofnight">30 Days 

of Night</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=thingswelostinthefire">Things We Lost in the Fire</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=sleuth">Sleuth</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=spiral">Spiral</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=awake">Awake</a></li>
<li><img src="images/bullet1.gif"> <a 

href="http://www.moviemansguide.com/reviews/DVD/read.php?id=americangangster-2disc_elyusha">American Gangster</a></li>
<li><img src="images/bullet1.gif"> <a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=beowulf-hddvd">Beowulf 

(HD DVD)</a></li>
  </ul>

	  <h2><img src="images/header/amazon.jpg" width="146" height="35" alt="Upcoming DVDs" border="0"></h2>
  <ul>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010X73ZG/moviemsguidet-20" target="_blank">The Mist: Collector's 

Edition</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010YVCI4/moviemsguidet-20" target="_blank">Bonnie & Clyde: Spec. 

Edition</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010KHOS0/moviemsguidet-20" target="_blank">Walk the Line: Ext. 

Edition</li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00129W6LE/moviemsguidet-20" target="_blank">Battlestar Galactica: Season 

3</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0011NVCAC/moviemsguidet-20" target="_blank">Wings: Season 6</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0013D8LOU/moviemsguidet-20" target="_blank">Sweeney Todd: Spec. 

Edition</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010KHORG/moviemsguidet-20" target="_blank">That 70s Show: Season 

8</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0013FCWUW/moviemsguidet-20" target="_blank">Lions for Lambs</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00104QSOM/moviemsguidet-20" target="_blank">There Will Be Blood: 

Collector's Edition</a></li>
<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0012IWNZY/moviemsguidet-20" target="_blank">Walk Hard: Unrated</a></li>
  </ul>
	</div>
<!-- end left div -->
<div class="clear"></div> 
</div>

<div class="clear"></div> 
</div>
</div>
</div>
<div id="footer">
© 2004-2008 - Movieman's Guide to the Movies<br /><br />

  <!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" -->
  <a href="http://sm3.sitemeter.com/stats.asp?site=sm3movieman587" target="_top">
  <img src="http://sm3.sitemeter.com/meter.asp?site=sm3movieman587" alt="Site Meter" border=0></a>
  <!--WEBBOT bot="HTMLMarkup" Endspan --></p>
</div>

</body>
</html>

And here's the css file:

>* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}

body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #000000; 
text-align: center; /*** Centers the design in old IE versions ***/
}

body {
font-size: 70%;
}

p {
padding: 7px 0 7px 0;
}

a {
color: #000099;
}

a:hover{
color: #0000FF;
text-decoration: none;
}

h1, h2, h3, h4, h5 {
font-weight: bold;
padding-bottom: 5px;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.4em;
color: red;
}

h3 {
font-size: 1.3em;
}

h1 a, #header h2{
color: #fff;
}

.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #000000;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}

* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height 

***/
}
/**************************
HEADER
**************************/
#header {
background: #000000;
padding: 10px; /*top right bottom left*/
margin-left: 212px;
width: 520px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: -5px; /*** Make som space for our top menu ***/
padding-left: 165px;  
}

* html .outer {
/*** No need for hacking IE on this layout ***/
}

.inner {
width: 585px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different 

browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}

* html .inner {
width: 100%;
}

/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/

.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}

* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}

#content {
float: right;
width: 590px;
min-height: 730px;
background-image: url('images/starbg.jpg');
}

#content .home-heading {
float: right;
text-align: left;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #E0EEEE;
background-color: #000000;
border-right: 2px solid #3333FF;
border-bottom: 2px solid #3333FF;
text-transform: lowercase;
width: 540px;
overflow: auto;
}

#content .spacer {
width: 1px;
height: 20px;
}

#content .headimage {
width: 620px;
height: 130px;
text-align: center;
overflow: auto;
}

.image {
border-color: red;
}

* html #content {
position: relative; /*** IE needs this  ***/
}

.contentWrap {
padding: 5px;
}

.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 25px;
}

.contentWrap li {
padding-bottom: 2px;
}

/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
position: absolute;
width: 200px;
background: #000000; 
min-height: 770px;
padding: 5px;
border-right: 1px solid #3333FF;
margin-top: -55px;
}

* html #left {
position: relative; /*** IE needs this  ***/
height: 250px;
}

#left ul {
list-style: none;
padding-bottom: 4px;
padding-top: 15px;
}

#left li {
padding-bottom: 4px;
margin-left: 0px;
}

#left li :link, :visited { 
color: #1D7CF2;
text-decoration: none; 
font-size: 8pt;
font-weight: bold;
}

#left li :hover { 
color: #37FDFC; 
padding-bottom: 0px;
font-size: 8pt;
text-decoration: underline;
}

#left h2 { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 16px; 
font-weight: bold; 
color: #0000FF;
padding-top: 8px;
border-bottom: 2px dotted #3333FF;
} 

/**************************
FOOTER
**************************/
#footer {
width: 760px;
color: #38B0DE;
font-weight: bold;
margin: 0 auto;
padding-top: 10px;
text-align: center;
background-color: #000000;
border-top: 1px solid #3333FF;
}

I'll no doubt have other issues, but this will go along way in getting this done.

Any help is welcomed!

**TheMovieman** · March 25, 2008

Just an update, but it seems most everything inside:

>			   <div id="content"> 
	  <div class="contentWrap">

	   <div class="spacer"></div>
	   <div class="home-heading">  Site Updates</div>
		<div class="home-box2">


			<center>
	<a href="reviews/DVD/read.php?id=atonement">Atonement</a>
			</center>


		</div>
	  </div>
	</div>

doesn't get executed (don't know the technical term. In my css file, I have a class called ".home-box2" within the id "content" (so it will only pertain to anything inside the "content" div). But "text-align" doesn't respond. Also, I tried adding a new element to handles the links, but no go for that either:

>#content li :link, :visited { 
color: #1D7CF2;
text-decoration: none; 
font-size: 8pt;
font-weight: bold;
}

#content li :hover { 
color: #37FDFC; 
padding-bottom: 0px;
font-size: 8pt;
text-decoration: underline;
}

While something like this worked in my left sidebar, this does not within the "content" div. What does work is the page wide link attributes. But I can't add a border to my images, yet they are clickable and I have the border within the image src set to a number...

Any thoughts?

Edited March 25, 2008 by TheMovieman

**TheMovieman** · March 25, 2008

Another quick update, I wanted to try a table within a div because on my home page I want to split the content section with two columns: one for the movie title, the other the rating. Again, the font element displays fine but it will not recognize the width even though both (width and font) are under the same class.

**OJB** · March 26, 2008

Im no expert on CSS... infact im pretty poo at it (still learning the ropes also)

The image border thing, you havent specified a width or style of border, you could also try changing the name from .image to something like .review-image

im not sure, but 'image' might be reserved or something????

try this:

>.review-image
{
border: 1px solid #ff0000;
}

Edited March 26, 2008 by OJB

**OJB** · March 26, 2008

as a side note, when you click on the review of the film you are getting include errors

these immediately give away certain information about your site which is best kept unknown, and it also showed me that your directory listings/structures are not blocked from public view

i.e. i can go quite easily, to your includes folder and view the files in there, same with images, reviews and DVD

add into your .htaccess in your root folder:

Options -Indexes

this will stop directory listings

**TheMovieman** · March 26, 2008

Thanks OJB.

As for the errors, I've made several changes since yesterday. I'm going to be deleting my beta folder as I've transferred the stuff I've done to the main folder. I'm still not done so the work I'm doing just has a "-beta" attached to the page name.

The border thing: I found a way to get it done, but I still don't understand why it wouldn't even put a simple border around my images with "border="1". But in my css, I put something similar to what you posted and it worked.

Here's what I've got done so far:

http://www.moviemansguide.com/index-beta.php

And for a review:

http://www.moviemansguide.com/reviews/DVD/...=beemovie-2disc

I'm hoping to get the rest of the site converted by this weekend.

Oh, and thanks about the indexing thing, I'll add that to my htaccess file.

Edited March 26, 2008 by TheMovieman

**TheMovieman** · March 27, 2008

While adding a class to each image is fine and works at giving the image a border, I'd still like a border around the image to show that it is a link. For the home page, it's ok the way it is, but I'm currently working on my dvd release page and some are links while others are not and the way I have it now, you can tell which is which as the one's that are links have a blue border and those that do not, have a black border. But now when I transferred the code into my new layout, even though each image has a border="1" attribute, none of them have a border...

Thing is, I've transferred the classes from the old one to my new one so they have the same attributes as the old one, but for some reason, under one of these classes or ids (outer, inner, float-wrap, content, content-wrap or home-box2), something must be overruling my border properties for these images (it doesn't do it for other border properties for tables).

Like I said, this is a problem for the page as I need to show which are links and which are not.

(Warning: These pages take time to load since they have hundreds of images)

Here's the page with my old design (look at the images with blue and then others with black borders):

http://www.moviemansguide.com/dvdschedule/index.php

And here's my new one (I'm not completely done with the design):

http://www.moviemansguide.com/dvdschedule/index-beta.php

Edited March 27, 2008 by TheMovieman

**TheMovieman** · March 27, 2008

Figured it out (how dumb am I?). The border was set to 0 in the first part of my css file... For crying out loud! LOL

**OJB** · March 27, 2008

haha good to see it coming together nicely man

just a quick question... are all of your pages hand written or do you use some variety of (either custom, or off-the-shelf) CMS to power it all?

**TheMovieman** · March 27, 2008

Outside of a free template I got online, everything is hand written. I use a CMS for the reviews pages (data populating) and any sorting (like by studio, contributor, etc) but I'm still a novice. But it's a much better system than when I first started my site (going on 3+ years here at TCH, but more than 7 years all told). I had a page for each review which made changing the design a pain in the rear (imagine recoding 100+ pages, lol).

How about you? Do you have a site?

**OJB** · March 27, 2008

I have three site at the moment... two were not coded/designed by me, one was.... but the site is not fully open to the public. I can PM you an address to it if you wish..

Its a CSS and LAMP (Linux, Apache, MySQL, PHP) site, entirely hand coded, but makes use of a limited CMS in the sense that I can write articles which automatically get posted to the main page.... 90% of the stuff on it is dynamically generated though.

**TheMovieman** · March 27, 2008

Yeah, that'd be cool if you could PM me the address.

At some point, I want to make my site almost fully CMS dependent, but right now I only have 3 pages that I update (index, and two release schedule pages).

Sign In

Redisgning Site With Divs - New Help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation