A query about Absolute Positioning

[Simon Matthews]

Hi, here’s the CSS for the header div. It works fine in Design mode but not in Chrome:

#header { width:100%; height:141px;
background:url(‘/Images/Triangle Design & Media Web Banner.jpg’) no-repeat left top;

[Curtis Thompson]

hello…

well – the path says start at the root of the system (“/Images”) – if you are previewing this locally, then it is trying to go to the root of your hard drive and find that path, and it’s failing. in dreamweaver, it is creating a virtual project of sorts, so it can find it.

you can probably just drop the leading “/”, assuming the page in question is on the same level as the images dir. otherwise, if it’s a css file and it’s in another directory like “styles” or the likes, then you can do a relative path (“../Images/…”)…

make sense?

sitruc

[Simon Matthews]

Cool, the relative path did the trick!

I’ve attached a screenshot of the page so far.

Starting to look ok. How do I add a bit of space between the social media icons? Also, for some reason the Facebook icon is slightly higher than the YouTube icon, so needs to be moved down a little. Will I need to put each icon into a div of its own?

Here’s the CSS for the icons:

#social-media { float:right; width:20%; height:25px; margin:30px 20px 0 0; display:inline; }

Thanks for spending so much time on me!

[Curtis Thompson]

hello…

[Simon Matthews] “for some reason the Facebook icon is slightly higher than the YouTube icon, so needs to be moved down a little. Will I need to put each icon into a div of its own?”

w/o being able to look at the icons, i’d guess one has a slightly larger canvas size than the other? you can assign an id to an image and then adjust margins separately – so for example:

<img id=”fb_icon” …>

and then add a style:

#fb_icon { margin: 1px 10px 0 0; }

and it will move it down 1px and 10px away from the right (top right bottom left are those numbers). you can adjust to taste as needed.

[Simon Matthews] ” Thanks for spending so much time on me!”

sure! it’s looking good, and i hope it’s a fun learn…

sitruc

[Simon Matthews]

That’s great, I have the icons in the right place now.

Yes it’s real fun to learn! I used to programme in assembly a long time ago on my Spectrum and I never thought I’d get back into it, but I just spent 3 weeks in hospital after a bike crash, only came out last Friday and am still in a lower leg and forearm cast, so to pass the time in hospital I decided to start reading about web design. That was a good move because I’m really enjoying it so far!

There’s one more problem I have with the page now though. In Chrome there is a small gap between the Unit 5 banner and the lower part of the page, though in design mode that gap is not there. You should be able to see the gap in the last screen shot I sent. How do I get rid of that gap?

Cheers!

[Curtis Thompson]

hello…

hope you feel better soon – that sounds rough.

as for the space, it could be a lot of things – extra html, margins, padding, etc…hard to say without seeing source. make sure the margins and padding are zero for each element on either side and make sure that there’s no extra br tags or the likes in between them…

sitruc

[Simon Matthews]

I can’t seem to get anywhere with margins and padding. I’ve set them all to zero but it doesn’t seem to have any effect. The page looks ok in design mode but has gaps in Chrome, above the header at the top of the page and between the banner and lower page. I’ve checked every id. Pulling my hair out with this one!

[Curtis Thompson]

if you post the page (not an image – the actual page with code), i can look at it for you…otherwise it’s very hard to guess as to what it could be…

[Simon Matthews]

Here’s the HTML, from the body onward…

• MOTION GRAPHICS
• MATTE PAINTING
• VISUAL FX
• 3D STUFF
• VIDEO
• DESIGN
• CONTACT

And here’s most of the CSS:

ul { list-style:none; }

a img { border:none; }

#wrapper { position:relative; width:900px; margin: 0 auto 0 auto;
}

#header { width:100%; height:141px; margin: 0 0 0 0; padding: 0 0 0 0;
background:url(‘../Images/Triangle Design & Media Web Banner.jpg’) no-repeat left top;
}

#logo { float:none; margin: 0 0 0 0; padding: 0 0 0 0; }

#social-media { float:right; width:20%; height:25px; margin:30px 20px 0 0; display:inline; }

#facebook-icon { margin: 10px 20px 0 0; }

#you-tube-icon { margin: 0 0 0 0; }

#navbar { width:100%; height:79px; background-color:#000; margin: 0 0 0 0; Padding: 0 0 0 0; }

#topnav ul {
border-top:1px solid white;
border-bottom:1px solid white;
margin:20px 0;
padding:10px 0;
}
#topnav ul li { display:inline; }
#topnav ul li a { padding:0 10px; text-decoration:none; color:white; }

#topnav a:link { color:#FFF; }
#topnav a:active { color:#FF0; }
#topnav a:hover { color:#BD3E57; }

#banner { margin: 0 0 0 0; padding: 0 0 0 0; }

#lower-page { margin: 0 0 0 0; padding: 0 0 0 0; }

[Simon Matthews]

Here’s the HTML again because I don’t think it pasted properly in the last message:

• MOTION GRAPHICS
• MATTE PAINTING
• VISUAL FX
• 3D STUFF
• VIDEO
• DESIGN
• CONTACT