Repetive Background Theme

[metamoo]

Hi, I’m emphatically very new to CSS, and I’ve built a page which is entirely based on position:absolute.

Test Page

It works perfectly except for one little problem. The background does not resize to the size of the browser window. I have it set at 2560 px width to accommodate the widest screens but on anything smaller I’m getting a horizontal scroll bar. I have nooooooooooo clue how to fix it. If you can help, I would really appreciate if you could be extremely specific as to do with the code as I have a lot of trouble following these comments. I guess I’m just a bit too dense to understand CSS! :)

[tommer]

Personally, I’m brand new at this, – – but maybe you could start your own thread??

You’re not likely to get any experienced answers asking an unrelated question deep into a thread about something completely different than what you’re asking.

Thanks, and good luck . . .

[metamoo]

I made a noobie mistake. Sorry. I’ll start a new one right now. I appreciate your patience! :)

[zackw]

tommer your code is much cleaner now – already a vast improvement, you’ve prolly almost cut your file sizes in half when it comes to code –

I would really look into getting the navigation working without using javascript next – since it is something that you can easily do with css – if you want me to help you out with the code I can

[zackw]

bored at work right now – inbetween websites and the boss would prefer me to atleast be typing code rather than watching youtube videos haha, so ill give u a quick demo on navigation and rollover techniques

to begin ill layout a simple navigation

Home


Contact


News

this is the best way to begin a navigation in terms of your markup, put it in a list and put each anchor link within its own list item.

the css that follows to help create the rollovers is this

ul li {

float:left;

margin-right:15px;

}



ul li a {

font:12px/18px arial;

color:black;

}



ul li a:hover {

color:red;

}

that is essentially the simplest form of a rollover link. the “hover” in the css attached to the anchor link means that when the mouse hovers over it, it will change any properties in that css. So for your case, you want to have a background color and text color declared for a normal anchor link and then change the “hover” to whatever else you want, this is small amount of simple code compared to javascript

[Chris Coyier]

Just wanted to let you know that your background image is slightly short. If you scroll down all the way, you can see a white space. I checked your page last night…huge improvement from what you have now.

[tommer]

zackw,

Thanks, – – and I really appreciate all your good information. I’m just way too busy (with my present workload) right now to mess with something that’s (at least} already working. But I will file away all the great info you’re giving me and tackle it when I have more time, I’m definitely interested in learning how to it.

Plus, I haven’t even delved at all into lists, or floating. At least not yet.

I have so many things wrong on my main site, – – that I need to start knocking them off before getting into too much else.

One more question in the meantime, though, – – I’ve now done about 5 pages on my main site with my new template, – – seems to be going pretty smooth and no problems so far.

So I guess (apparently) it’s OK that I’m using the same id’s multiple times, as long as it’s never more than once on any particular page?? Seems to be working fine for me so far, – – but I wasn’t really sure if it was a normal way to do it.

Again, thanks for all the great help, – – I really do appreciate it . . .

[tommer]

Couldn’t resist taking a better look at your example CSS, though

What in the world does it mean when it says, – – font:12px/18px ??

Is that a before-and-after, maybe??

[Bob]

No tommer, that just stands for the font-size / line-height. It just shorthand for:

font-size: 12px;

font-weight: 18px;

[zackw]

ya with font u can declare

font-size:12px;

font-weight: bold;

font-style: italic;

font-family: arial;

line-height:18px;



or u can just put it all in once nice piece of code like this

font: italic bold 12px/18px arial;

the order matters, it must go either bold or italic first then fontsize/lineheight then the font family



and yes u can have the same id's on different pages within a website, for example if u had

you could keep that throughout your site on each separate page, and its good practice to do so
otherwise use classes for elements that are similiar and that you will have more than one of, for example if you are making a blog that will have many different comment boxes all styled the same you would want to give them a class so you can style them all the same and they can remain on the same page together

hope this helps, if u have any other questions u can always send me a private message too

[Bob]

Chris has written a good article about the difference between classes and ID’s, might be helpfull https://css-tricks.com/the-difference-between-id-and-class/

[tommer]

Thanks, you guys are really a wealth of information.

I’ll read that article right now . . .

[Author]

Posts