Jump to content
Stef's Coding Community
JasonDavis

Trying to finish up my first hand-coded site..

Recommended Posts

Hi all,

 

I'm still trying to polish up my first hand-coded site using CSS. Here it is:

 

http://www.wvconfidential.com/test/

 

So a few things are obviously wrong. Firstly, my mainframe element stretches out to the entire width of the page on Firefox. On Chrome and IE, it seems to look okay.

 

Next, as you can see, my footer element is overlaying the reviews in all browsers.

 

And third, more of a minor thing, in IE, I'm getting an ActiveX security warning regarding the "hack" that I tried to install in order to get the curved borders. Apparently IE doesn't natively support this. Anyone have a better way?

 

Thanks!

Share this post


Link to post
Share on other sites

The width issue is due to an unnecessary space in your CSS file:

 

#mainframe {
width: 800 px;

Also, if you remove the set "height: 255px;" from #reviews in your CSS stylesheet that will fix the footer issue.

Share this post


Link to post
Share on other sites

You need to add a doctype

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and the charset:

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

 

You shouldn't be using <br>s or &nbsp's to create space - that's what margins and padding are for.

 

In your CSS under #mainframe width, remove the space between 800 and px and add 'clear: both;' to your #reviews - that should do it.

Share this post


Link to post
Share on other sites

Ben's right about the height - for some odd reason, adding the clear both also put the footer in place,

Share this post


Link to post
Share on other sites

As always, THANKS! That did the trick. If you refresh your cache the page loads correctly:

 

http://www.wvconfidential.com/test/

 

So a couple questions: why did that work? I understand the space problem. However, why did removing the height from the footer fix that part? And what does 'clear: both' have to do with anything? Just trying to understand.

 

Andrea, about the <br> and &nbsp issue - what do I do for that part? Should I make those images a <div> as well, and give them their own padding, etc?

 

Thanks!

Share this post


Link to post
Share on other sites

The height made the division a specific height, and the footer division appeared right under that. However, there was more content in the division than did fit, so what didn't just spilled over the edge, but was ignored by the footer division, so you had the overlap. Once you removed the height, the division adjusted itself to whatever it needed to be to hold the content - and again, the footer lined itself up following the bottom edge.

 

The 'clear' is used to make sure a non-floating division following floating divisions lines itself up under those, not somewhere in the middle. I am not sure why adding the clear: all also worked for this page, but my guess is that somehow, your overspill acts like a float.

Andrea, about the <br> and &nbsp issue - what do I do for that part? Should I make those images a <div> as well, and give them their own padding, etc?

You would change this:

<div id="blog">
	<img src="[url="view-source:http://www.wvconfidential.com/test/gfx/b.png"]gfx/b.png[/url]" style=vertical-align:middle>
	 
	<h1>Blog</h1>	
	<br>	
	<br>
	Your questions answered!  Send stories, comments and concerns to Ms. Manvell, and she will address them on her blog.
</div>

to that

 <div id="blog">
	<img src="[url="view-source:http://www.wvconfidential.com/test/gfx/b.png"]gfx/b.png[/url]" style=vertical-align:middle>
	<h1>Blog</h1>			
               <p>Your questions answered!  Send stories, comments and concerns to Ms. Manvell,
                  and she will address them on her blog.</p>
</div>

and in your CSS, you could do this:

img {margin-right: 5px;}
h1 {padding-bottom: 15px;}
p {margin: 10px 0;}

These are just examples - the px can be adjusted any way you like, and you can use either margin or padding (or both) to create your space.

Share this post


Link to post
Share on other sites

Didn't see Andrea's post above this, but this is an alternative i think...

 

#blog img{
margin-bottom: 5px;
}

#philosophy img{
margin-bottom: 5px;
}

#books img{
margin-bottom: 5px;
}

 

This takes the '#blog' div, and changes the properties of any images inside it. Don't forget im still new to coding, so if it doesn't work, you have my apologies :L

Edited by danhodge

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...