CSS Questions (volume 1?!)

  ade.h 13:53 29 Aug 06
Locked

The Sitepoint books that I ordered turned up early, so I have been engrossed in Notepad windows for the last few days. I have a few questions for the CSS experts...

I’m using a background image in the wrapper div, but the bottom is cut off. Why is it doing this and what code should I add to prevent it? I tried adding height: 100%; but was probably off beam with that guess.

To position images on the page, do I just add the image tag to the HTML as normal, then place it in its own div and control the div in the CSS? Or can I be a bit more economical with the code by putting multiple images in one div? There are four images in a row along the top of the page.

Extra unwanted padding in Firefox; I think there may be a way to prevent it, but I can’t recall what it is.

Can you place objects (images in this case) either side of a centre-aligned wrapper div? ie, have a graphic down the left margin of the browser window while the main content is centred. I could place a clear graphic on the right if it needs to be balanced.

What is the best way to organise CSS data across all the pages of a site? I am using external style-sheets almost exclusively which was recommended in the Sitepoint book and makes sense for a beginner. I have slightly different layouts for each page of a ten page site, so should I make a style-sheet for each page or cram loads of #textbox sections, etc. into one sheet. I want to keep it logical and easy to manage, but also efficient and valid.

When formatting a textbox div, is there a shorthand approach that I should be using? For example, reserving common settings for some other part of the code so that they are not repeated? Like you can do for text styles by listing the relevant tags with commas.

My CSS validated up to now, but I now get warnings such as: Line: 57 (Level: 1) This property applies to block-level elements : #textbox1. I assume that I have constructed those sections incorrectly, but I had to use some semi-educated guesswork!

Also, the validation mentions “To work as intended, your CSS style sheet needs a correct document parse tree”. What does that mean?

I will be able to upload my work-in-progress later today or tommorow hopefully. CSS file to follow>>

  ade.h 13:54 29 Aug 06

Hope this isn't too lame - early draft only!

body {
margin: 0;
padding: 0;
text-align: center;
min-width: 827px;
background-color: #ffffff;
}
#wrapper {
text-align: justify;
width: 800px;
margin-left: auto;
margin-right: auto;
background-image: url(cd2.jpg);
background-repeat: no-repeat;
}
#textbox1 {
text-align: center;
width: 800px;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
padding-left: 0;
border: 1px solid #000040;
}
#textbox2 {
position: relative; left: 0; top: 25px;
text-align: justify;
width: 600px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border: 1px solid #000040;
}
#textbox3 {
position: relative; left: 200px; top: 50px;
text-align: justify;
width: 600px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border: 1px solid #000040;
}
#textbox4 {
position: relative; left: 0; top: 75px;
text-align: justify;
width: 600px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border: 1px solid #000040;
}
#textbox5 {
position: relative; left: 200px; top: 100px;
text-align: justify;
width: 600px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border: 1px solid #000040;
}

  ade.h 11:32 30 Aug 06

Another Q:

How should I position images? Should I put an ID of some kind in the img tag, then write the corresponding CSS entry for each of them? They already position pretty much where they need to with no input at all, but they need some padding to spread them out a little more. There are four small images that sit along the top of the wrapper area.

  slightlymad 17:52 30 Aug 06

One step at a time...

First, it will be easier to help if you can post a link to your page. Without seeing the HTML, it's difficult to work on. I'd also be able to SEE the background image - right now I have no idea what size it is! However, your answer is to specify the dimensions of the image:


#wrapper {
text-align: justify;
width: (image width)
height (image height)
margin-left: auto;
margin-right: auto;
background-image: url(cd2.jpg);
background-repeat: no-repeat;
}

BUT you don't really want this - that wrapper is now a fixed size and not much good to you. Instead, put your image into the BODY property; here, you won't need to specify its size:

body {
background: #fffff url(cd2.jpg) no-repeat center top;
}

Notice the 'shorthand' that I've used. This will give you a white background with your image centered at the top of the page.

If you want a margin at the top, do this:

body {
background: #fffff url(cd2.jpg) no-repeat center 200px; (or however many pixels)
}

That would give you a top margin of 200px. See how easy it is to position?

Going a bit further... You could replace 'center' with a value, say 100px. That would place your image 100px from the left of the page, and 200px from the top.

Here endeth your background lesson for today.

Also, it's good practice (and will make life a LOT easier for you) if you embed the CSS into the page, just while your're working on it. You can then cut and paste it into a separate stylesheet when everything is working as you want. This way you won't have to keep saving your stylesheet every time you make a change. It's also easier for others to comment on.

To embed the CSS, you need to put this somewhere between the head tags, like this:


<head>

<style type="text/css">
<!--

-->
</style>

</head>

Then pop all your CSS declarations between the doojits, like this:


<!--

body {
margin: 0;
padding: 0;
text-align: center;
min-width: 827px;
background-color: #ffffff;
}

-->

Extra padding - where? I'll bet it's at the top of the page. And yes, there's a way to prevent it. Show us the page!

Now on to your image question...

Take a look click here, then come back and I'll explain what the coding means (notice that I've embedded it into the page so that it's easy for you to examine).

Ready?

Then I'll explain.


img {
margin-left: 5px;
margin-right: 5px;
}

This creates a 10px gap between the images. Note that it will apply to ALL images on your page, so if your going to insert more images then it would be best to use a class (I'll come to that later).

#images {
margin-top: 50px; /* You could use shorthand here: margin: 50px auto 0 auto; */
margin-left: auto;
margin-right: auto;
text-align: center;
width: 760px; /* 4 times width of each image PLUS their margins */
}

This will give a 50px margin at the top (obvious, I know). Adding auto left and right margins, plus centering the text, will centre the images across the page. But you know that, because that's what you've done in your body declaration.

Now here comes the IMPORTANT BIT. The WIDTH.

If you don't specify a width, in Internet Explorer, the images will still appear in a row across the page on a large screen, but not on a smaller one. I've removed width in this second page
click here - see what happens when you re-size the window.

The width must be calculated precisely. In this case, my images are 180px wide. 4 x 180 = 720px. But that's not enough - I need to allow for that 5-px left and right margin for each image, a total of 40px. So the the total width will be 760px.

What next.

I'll leave your left-and-right image question for another time if that's OK, because that's a whole new lesson, and quite lengthy.

Organising CSS data.

My site has one style sheet, but there's a page where I want the layout to look slightly different from the rest. I've embedded a style in the header tags of this page. This will over-ride the style sheet.

But it sounds to me as if classes will are just the ticket for your particular needs. On to the next thread...

  slightlymad 17:52 30 Aug 06

Take a look at this example: click here. I've assigned a class to the second paragraph:

HTML:

<p class="smaller">The font-size in this pararagraph is 20px</p>

CSS:

.smaller {
font-size: 20px;
}

So for your images, you could apply a class:

CSS

.gallery {
margin: 5px;

HTML

<div id="images" class="gallery">

Using classes would save you a lot of coding for your textboxes!

When I see your page, I'll show you how.

And that semi-answers your 'shorthand' question.

I'll also look at the validation errors.

All this is quite advanced for a beginner, and I hope I haven't gone too far. But you did ask...

I think you're doing brilliantly, by the way.

Incidentally, when you're fed up with Notepad, take a look at TopStyle Pro. I wouldn't be without it - that's what I use for all my pages. It makes coding easy, and has some major advantages over Dreamweaver, IMHO.

  ade.h 18:27 30 Aug 06

Wow, Marie. You're a star, you know?!

Too much for a beginner? Not at all actually, and I am relieved to be able to say that. Notepad's not to bad, you know; there's a lot to be said for simple!

I'll upload the page itself later on.

Well done on the background image thing; moving it helped, but... my wrapper div is still being truncated. Possibly the footer? I'm not sure.

I'll save your image placement info/code; that will be invaluable. As it happens the four images are sitting happily where I want them and look nicely spaced (they need to be close to give the feel of a banner). Luckily, the issue that you mentioned whereby they re-arrange if the browser window is shrunk does not happen in IE of FF.

I've been playing with classes on some of the other pages of the site (3 down, 6 to go!) and it works well. I'll have to be careful with using image classes though, because the fourth image must not have any right-hand padding. At least I don't think it can, because its right edge must be aligned with the wrapper and text boxes.

Thank you very much for all the work that you've put in tonight. It is really appreciated.

Back soon.

  ade.h 18:43 30 Aug 06
  ade.h 18:45 30 Aug 06

Ooh, yes; padding in Firefox. I nearly forgot about that. Well, as you'll see in a comparison, FF adds a bit of podge all over my text areas, which leaves me feeling a little out of alignment!
Also, the normally well-behaved IE6 adds a bit of space just at the bottom of my h1 text area, which is not the end of life as we know it but I would like to fix it if poss.

  slightlymad 19:36 30 Aug 06

But one thing struck me immediately. It won't make a difference to your page, but it will make the validator happy...

You need to add a space and a forward slash at the end of each image tag, like this:

<img src="index_files/keyboard.jpg" width="194" height="110" alt="keyboard" />

You've also got this bit of javascript twice at the end of your page:

<a href="javascript:popUp('terms.html')"></a>

Do you need to?

The validator doesn't like the second one, unless you put it between <p> tags, as in the first.

  ade.h 19:39 30 Aug 06

Not sure what you mean? The javascript link is there only once and the image tags are closed.

It validates as XHTML Strict.

  slightlymad 20:39 30 Aug 06

I saved it, opened it, and the image tags changed! They did, I swear!

As for the repeat java, that's probably a bad copy-paste job on my part; I won't explain why I was copying and pasting.

The java stuff has produced four validation errors, and I don't know what they're about because I don't understand javascript.

I'll be back shortly with the padding solution. I keep being interrupted, lots going on here.

This thread is now locked and can not be replied to.

Surface Pro 5 News - release date, UK price, features, specs

Animator Emanuele Kabu’s psychedelic video is a stunning tribute to Lisbon city

Best Mac antivirus 2017