Webpage help *cry*

Mosskat

Member
Hey guys!! Hoping to get some css coding help? C:

Mosskat Studios

I am basically a coding noob but I've been teaching myself css and html bit by bit and I really want my next site to be completely hand coded.

That's what I have so far - but if you notice in firefox if you press cntrl - the little cat and the buttons move away from the layout. The original idea was to make the cat clickable (which directed you back to the main page) but I think I'll kill that and just make her part of the layout.

My problem is the buttons - I want them clickable but so far the code I've used has made them well... move. A big no-no. I basically want the links to work and shrink or grow with the display.

I'd appreciate suggestions on how to achive this effects. I've heard z-index thrown around but I'm not sure how to use it? Thanks in advance!

The css file in case you want to see the garble I've written -> Link
 
Hey Mosskat.

I wouldn't recommend absolutely positioning the left hand nav, that's your problem.

Keep it inside the div as is, but make it the same width as the buttons (seemingly 192px).

Then put float:left; & add a margin-top:405px; (to replace top:405px (which works in conjunction with absolute positioning). Also remove the absolute positioning, top and left, leaving:
div#col1 {
width:192px;
margin-top:405px;
float:left;
}

Then with the buttons themselves you need to sort out the classes and id's. You can use a class as many times as you want on a page (for example class="center") but you can only use an id once per page. Also worth noting that you can use both a class and an ID on an element (like <a> or <p>..)

Floats are key to CSS based web design and they're very easy to understand once you've learnt them.

The general knowledge is if something isn't slipping into the gap provided and should do try a float:left; if you want it to stick to the element on its left, float:right; if you want it to stick on the right.

If you float something then be careful with div's below, sometimes you'll wonder where they've gone but a simple clear:both; will fix that.

Read this for a better explanation :up:

All About Floats | CSS-Tricks

For your buttons you will want a class="button" and then if you want to specify an individual button also add id="button1".

Leaving you with the following:
<a class="button" id="button1" alt="alternative text" href="link" />
<a class="button" id="button2" alt="alternative text" href="link" />
.....

That way you can style all buttons easily, whilst adding extra styling to the individual buttons through the ID's.
 
Fred's on the money here - the basic problem is that centering a page in the browser like this means that everything is floating around relative to the window (the margins are automatically adjusting to keep everything in the middle of the page). However as soon as you made div1 position: absolute you anchored it to the window top left. So one thing is pinned to top-left and everything else is floating underneath it.

The fix is as above.
 
Back
Top