TheMovieman Posted March 24, 2008 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 25, 2008 Author Share Posted March 25, 2008 (edited) 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 Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 25, 2008 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
OJB Posted March 26, 2008 Share Posted March 26, 2008 (edited) 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 Quote Link to comment Share on other sites More sharing options...
OJB Posted March 26, 2008 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 26, 2008 Author Share Posted March 26, 2008 (edited) 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 Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 27, 2008 Author Share Posted March 27, 2008 (edited) 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 Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 27, 2008 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
OJB Posted March 27, 2008 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 27, 2008 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
OJB Posted March 27, 2008 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
TheMovieman Posted March 27, 2008 Author Share Posted 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). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.