breNTx22 Posted May 27, 2010 Report Share Posted May 27, 2010 I'm starting with web design and I'm running into a small problem. I have 4 images (1 banner, 3 links). The banner is at the top and the links go down the left side. The only problem is I can't figure out how to remove this slight gap (almost like a padding) between all of the images. If I haven't provided enough info just ask and ill try to tell you what you need to know. Thanks. Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 27, 2010 Report Share Posted May 27, 2010 It's always easier to help if we can see the code. A link is ideal. Try setting margins and padding to those images to zero. Quote Link to comment Share on other sites More sharing options...
breNTx22 Posted May 27, 2010 Author Report Share Posted May 27, 2010 Sure. I can post the code when I get home. Thanks. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 27, 2010 Report Share Posted May 27, 2010 One other thing... depending on how your navigation is coded, it is possible that setting "line-height:0;" on the navigation will fix the gap. (Obviously, you'd just want to do it just for the navigation, not any other parts of the site that might affect actual text.) Quote Link to comment Share on other sites More sharing options...
breNTx22 Posted May 27, 2010 Author Report Share Posted May 27, 2010 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Index</title> </head> <!-- Beginning of banner and links --> <body> <div id="apDiv1" style="position: absolute; left: 13px; top: 55px; width: 604px; height: 108px; z-index: 1; vertical-align: middle"><a href="index.html"><img src="images/Banner.jpg" alt="How to Build a Computer" /></a></div> <div id="apDiv2" style="position: absolute; left: 13px; top: 163px; width: 140px; height: 68px; z-index: 2; vertical-align: middle"><a href="index.html"><img src="images/home.jpg" alt="Home" /></a></div> <div id="apDiv3" style="position: absolute; left: 179px; top: 163px; width: 438px; height: 19px; z-index: 3"> Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 27, 2010 Report Share Posted May 27, 2010 What's in the stylesheet? Something there can affect the images. Or try changing the positioning above - maybe it affects the placement and creates the gap. Without seing EVERYTHING (including the images - their size matters) I can only guess. Quote Link to comment Share on other sites More sharing options...
breNTx22 Posted May 27, 2010 Author Report Share Posted May 27, 2010 What's in the stylesheet? Something there can affect the images. Or try changing the positioning above - maybe it affects the placement and creates the gap. Without seing EVERYTHING (including the images - their size matters) I can only guess. Stylesheet: body {background-color:#06C; color:#FFF; Font-family:"Arial Black", Georgia, sans-serif; } p {text-indent:50px; font-size:0.875em; color:#FFF; Font-Family:"Arial", Verdana;} h1 {color:#DBE3E6; font-size:2.5em;} h2 {color:#DBE3E6; font-size:1.875em;} a:link {color:#06C;} a:visited {color:#06C;} a:active {color:#06C;} Unfortunatley, I can't really post a link since I didn't buy web hosting. This project i'm working on now is something that i'm doing for school. Here's an SS of the beginning of the main page so you can see what i'm talking about. http://img443.imageshack.us/img443/3038/websitess.jpg I tried messing with line height, that didn't seem to work. I'm not sure how/where to put cell padding or margins. Would it be better to just do a table as opposed to Div's? Thanks for the help. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 27, 2010 Report Share Posted May 27, 2010 Normally I would say add img {vertical-align:bottom}. But since all those are position absolute that shouldn't matter. Just adjust the top value for the two bottom images. They shouldn't be in divs or AP'd to begine with though. Should put them in a unordered list and remove the AP. Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 27, 2010 Report Share Posted May 27, 2010 Don't use tables for your layout- that's not what they are for. It's a good idea to add * {margin: 0; padding: 0;} to your external stylesheet to avoid issues caused by different browser settings. Of course that means you'll have to add them back in where you want them - for example for the p tag. So try that first, and see if that makes a difference. If not, work with the top positioning for those images. Also, you only need quotes around font names if the name consists of more than one word - for example "Times New Roman", but just Arial. You only need to mess with z-index if things overlap. Quote Link to comment Share on other sites More sharing options...
breNTx22 Posted May 28, 2010 Author Report Share Posted May 28, 2010 I've added the margin/padding attributes to my style sheet (Body and P) They haven't made a difference. I'm just a little unclear of how I can do the layout. When I was taught (3 or 4 years ago) I was always told to make a table and split/merge cells as needed. However, the more I look into it the more I hear that is not the correct way to do it. I'm trying to use ordered lists but i'm not sure how to take the bullets out of them. Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 28, 2010 Report Share Posted May 28, 2010 Just leave out the part that makes things horizontal.: http://www.csstutorial.net/2010/02/how-to-style-a-horizontal-navigation-menu-with-css/ We really need ALL the html and CSS and the images to see exactly what you have. Tables are for tabular data, not layouts. Before CSS, they were used for layouts, there wasn't much else. Quote Link to comment Share on other sites More sharing options...
breNTx22 Posted May 28, 2010 Author Report Share Posted May 28, 2010 Just leave out the part that makes things horizontal.: http://www.csstutorial.net/2010/02/how-to-style-a-horizontal-navigation-menu-with-css/ We really need ALL the html and CSS and the images to see exactly what you have. Tables are for tabular data, not layouts. Before CSS, they were used for layouts, there wasn't much else. Alright, thanks for the help thus far. I'm going to look a little deeper into CSS and i'll make another topic if I need any more help. Thanks, Brent 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.
Note: Your post will require moderator approval before it will be visible.