Comp Sci first year need some basic html and css help.

[Xerco]

Hey there this is probably very easy to answer but im having a slight problem with my css on my site, this is the first site iv ever coded myself from scratch.

http://itsuite.it.brighton.ac.uk/mmd13/index.html

How do I limit the HTML header id="post" background colour to not go into the <aside> links? You can see this on week 6 the background colour goes into the week 1 side. I also cant seem to get a border left on the <aside> to make a divide between the posts and the side bar.

Some explanation on what's needed would be great

Also any tips if obvious would be great.

Thanks for your time.

 

[davetherave2]

Hi,

well i have found a quick fix for you:

if you add a width to the "post" class something like 600px this will stop the overflow for you.

you will find that the floating right section will be causing you an issue. i am not sure if there is content being hidden under that right section.


Now this maybe over the top but this has been recommended to me as something very useful on here and at work http://twitter.github.com/bootstrap/base-css.html for assisting with fluid layout and also jquery stuff as said may be a bit over the top for you at the moment.

alternatively i recently got this book:
HTML & CSS: Design and Build Web Sites by Jon Duckett

it is really good and colourful and explains how css and html work side by side. It also gives nice examples and works on no previous knowledge.

 

[Kingorgg]

aside {
float: right;
width: 30%;
border-left: 1px dashed black;
padding-left: 10px;
background: #01A9DB;
margin-left: 2px;
}

Gives a background to your 'aside' tag to hide the header.post.

Also corrected your 'border-left-style:dashed;' to 'border-left: 1px dashed black;' then gave it a padding and margin-left to stop the text from getting to close to the border.

Also; id = '#', class = '.' for css prefixes.

EDIT: I thought the bars going all the way across was a design choice, if not, do what davetherave2 says :\