A couple of CSS code questions?

Question

Hi I have a shop which uses CSS and I need to adjust a few things but I'm useless at CSS and HTML etc. Here is the site url http://wonkycat.bigcartel.com Changing the picture and photo backgrounds at the top is no problem as I am keeping the design simple but I was hoping someone would help me out with a few little things. First of all, I have a few links on the shop front page on the right hand side - a Digg button, a StumbleUpon button, a BigCartel button and another one underneath that. But they are all bunched up and I don't know the code for putting a little space between them so that they are spaced neatly, one underneath the other. The other thing is that in my FAQs section are some links but I don't know how to make them into live links. I'd really appreciate some help! Thanks!!

Answer 1

To make the buttons be on different lines, all you need to do is put a <br> tag before whatever it is you want to move down a line. So you could have something like "StumbleUpon Digg" become "StumbleUpon <br>Digg", which would make the website display "StumbleUpon

Digg."

Also, to make the links live, just use this format:

<a href="URL GOES HERE" target="_blank">URL THE VISITOR WILL SEE GOES HERE</a>

-InternetGeek http://coolpersonsearch.com/

Answer 2

Some general guidelines so you can get brushed up on XHTML and CSS.

1. Try not to use pixels for width and height of div and font sizes. Use em instead. It scales when folks increase and decrease the font size of a page.

2. If you have a stylesheet, use an id to name each new div block. Search engines prefer this, and makes it easier for you to find a specific CSS code (as it can get quite long over time).

3. You need to wrap the buttons in a wrapper container. This keeps all together and aligned.

For example if using a stylesheet, make a the corresponding CSS code in the stylesheet (think of a name that you can remember for easier reference, not too long either)...

#rpbuttons {

width:11em; */ [px size] divided by 16=em size /*

text-align:center;

}

and add this to the location in the HTML page...

<div id="rpbuttons">

[Add all of the button URL code in here]

</div>

If you need simple vertical spacing you can use this tag (add the <> brackets around it, Yahoo strips them on this page)...

br /

Notice the ending / ? That's what's new in XHTML. It tells the browser that the tag is ended. Almost all XHTML tags now end this way, including image links. Don't forget this, as if it's missing the page won't validate.

If doing inline style (which is a no-no, as it removes the reason for having a central stylesheet, and combines presentation code within the XHTML -- this is a violation of the XHTML practice of removing all presentation markup to the stylesheet)...

<div style="width:11em;text-align:center;">

[Add all of the button URL code in here]

</div>

To align all elements in XHTML it needs a wrapper around the individual <div> tags if they need special sized and colored and bordered containers. Depending on layout, you will also add to the CSS...

float:[left] or [right];

to move the div block to the left or right side of the page.

Using positive and negative margins, the block can be aligned (but this is advanced CSS, and a hair pulling experience to get right in all major browsers -- IE/FF/Opera/Safari, etc lays out elements differently). Experiment with this if you want precise layouts.

And to make a link "live" you need to make it "alive" by wrapping this code around text...

<a href="[insert link URL]">[insert name of the URL here]</a>

or to make images linkable...

<a href="[insert link URL]"><img src="[insert file URL]" width="[insert width] height="[insert height]" border="[0 for no border; 1 or above for the thickness]" alt="[insert image name for accessibility and proper XHTML form here]" /></a>

Again notice the trailing backslash in the part of the image tag?

<img src="" width="" height="" border="" alt="" />

***Always close tags like that for images, too.***

If you want to learn correct XHTML/CSS coding practices, so your page gets ranked better in the search engines (SEO), show your coding expertise, and decrease page load time, park at this site to learn more...

http://www.alistapart.com/

It's a web designer site that stresses XHTML/CSS compliance. Learn good coding practices there, and you'll whip out sites like a pro yourself.

For a free and very comprehensive HTML editor that has plugins for about everything you need for web design, get the HTML-Kit...

http://www.htmlkit.com/download/

Download the CSS plugins to help you with the tags. Use Tidy to help spot missing tags, closers and formatting errors, too.

It takes a while to learn XHTML/CSS but once you learn it, it becomes second nature (just like using a chat client).