Problem with CSS code. Please help!?

Question

Hey, I'm working on a project for Web Design. I'm trying to make a homepage for a school sports site, that I want to end up looking like the Google Chrome Newtab page. Does anyone know how I can get this code fixed? They all show up on the left side instead of in a box

Baseball

Volleyball

Basketball

Cheerleading

Track

Football

Answer 1

I will be honest, that code is a mess (conflicting CSS rules, missing closing tags, incorrect use of selectors, etc) and fixing this took me BLOODY AGES. Done now, though.



I have uploaded the source code (so that indentation and code is perfectly retained), complete with comments on all of the CSS that may require explanation and further direction, and a live example, here: http://jsfiddle.net/MythOfEchelon/9nxFf/1/



Your original code is here: http://jsfiddle.net/MythOfEchelon/CJcmQ/1/



I hope you will recognise just how much effort and time I put into doing this for you.



If you have any further questions or requests, feel free to contact me on Twitter: @mythofechelon. Good luck.

Answer 2

I'm not sure what you're trying to do. And I don't understand what you mean by "They all show up on the left side instead of in a box". The box *is* on the left side. The reason why your boxes/images seem to appear outside the box is because they're bigger than their container so as a result they tend to overlap your id="thumbnails". Your images are 200px wide but they're in a container with only 120px in width.



And why do you repeat some of the CSS properties? Like the margin, width, and text-align in your #thumbnails. Repeating a CSS property is useless, the last property will always prevail.



What are you trying to target with these lines?



div.thumbnails img {

display:inline;

margin:3px;

border:1px solid #ffffff;

}

div.thumbnails a:hover img {

border:1px solid #0000ff;

}



Your thumbnail is an id, not a class yet you're using dot(.) instead of the sharp(#). This will not affect anything in your HTML code.



So your images will be inside your box, try and do this:

#thumbnails {

border:1px solid #0000ff;

height:auto;

float:left;

text-align:center;

font-weight:normal;

width:202px;

margin:2px;

}



Hope this helps :)

Answer 3

Centering:



Centering an element requires setting a width to the exact width of the content, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:



body {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}



Example as a Class:



.selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}



HTML for Class:

Content here

Example as an ID:



#selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}



HTML for Class:

Content here

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.



Validate your code:



Validating:



Why Validate?: http://validator.w3.org/docs/why.html

CSS Validator: http://jigsaw.w3.org/css-validator/

HTML Validator: http://validator.w3.org/#validate_by_uri+with_options



Ron

Answer 4

i will absolutely imagine of what you attempt to declare in that incoherent idea... yet what I placed across at the same time is that you %. a fixed history. If no longer, then study English and attempt again. if so, it truly is the valuables: history-attachment: fixed;