PDA

View Full Version : messed up code


marcia
07-06-2011, 12:48 AM
I am redoing some pages in css and am mystified.

I cannot get the left and right text to line up. The local is very messy, but the remote looks ok.

I'm starting at the top of the page and working my way down - the menu and one PS image will change, but right now I'm concerned with the lining up.

My naming of the divs is messed up - Iknow. This is a trial.

www.multiplechoicebags.com/slicker2.htm

Corrosive
07-06-2011, 06:54 AM
Div id "slbp_m" is wrapped in a paragraph tag, div id "slx3p_m" isn't so the first is picking up default paragraph styles I'd guess. There are other stray and unclosed tags floating around as well. Needs tidying up ;)

marcia
07-07-2011, 01:14 AM
Thanks,

Don't know if I should start a new thread, but here goes:

I think the code is pretty much cleaned up, but now...

How to:
1.control line height between the images and text?
2. control line height between text and buttons?

on my local line 133 -
how to lower the image of 'eslxmoved.gif' about 50 px?

(BTW the div id "mult" is not supposed to be inside div id "to remove".
The menu will ultimately be below a standard menu below the header. At this time the old one is still at the bottom, but everything below the "mult" div is not a part of this trial - I don't want to mess up the current links at this time)

Corrosive
07-07-2011, 07:13 AM
The answer to all of your questions is either margin or padding, depending on which is appropriate.

marcia
07-07-2011, 10:15 PM
????????????? Are you saying that I need to create divs within divs?

The elements I'm referring to are inside divs, not in different divs

And how do I get inside the paypal form to edit the padding, etc it?

domedia
07-07-2011, 11:54 PM
He said nothing about nested DIV tags. I think he means that the question is so general, that the answer lies somewhere in some CSS properties for the box model.

Can you show a page with an exact example of what you need to change?

(and what's up with the question mark characters? 8) )

marcia
07-08-2011, 12:51 AM
Here is the page and the questions pertaining to it. What more would you like? I don't know how to be more explicit.

see -
post #1: www.multiplechoicebags.com/slicker2.html

post #3: How to:
1.control line height between the images and text?
2. control line height between text and buttons?

on my local line 133 -
how to lower the image of 'eslxmoved.gif' about 50 px?

(Question marks mean I don't understand. How else should I say it?)

Corrosive
07-08-2011, 08:23 AM
Hi Marcia

Domedia is correct that I said nothing about adding extra divs. Working from the first link you posted (the second one was all tables so am ignoring that) you can target images and forms inside divs through CSS and add margins/padding as suits. For example;

If you want to target the image in the div id #egypt then you can use the following CSS;

#egypt img {margin: 0 0 20px 0;}

That gives any image inside that id a margin at the bottom of 20 pixels.

The same is true of the form;

#egypt form {margin: 20px 0 0 0;}

That gives any form (including paypal) within the div id #egypt a top margin of 20px.

To be honest that code is a mess and I'm going to strongly advise that you really try and get your head around hand coding.

As a quick demo I have recreated the top half of your page (didn't tackle the menu at the bottom as don't have the time); http://www.corrosiveonline.co.uk/_projects/marcia.html

The CSS is in the head tags (obviously the best thing to would be to have it in a separate stylesheet) so you can see and play with it. Take a close look at what I have done.

It is the same layout (more or less) with half the HTML and quarter of the CSS. I have also not used any inline styles. Style is separate from content (as is the way nowadays).

The main lesson is how I have used margins, in particular, to make space between elements. The margin of the item above affects the item below it, creating the spacing you wanted without wrapping stuff in hundreds of div tags.

Please less of this; "???????????????" and more researching, learning your skill/trade and understanding code. It really isn't rocket science once you get your head around it but I'd recognise 'Design View' written code anywhere and you are still using design view to lay out your pages :cry: . Either learn or STOP! Start with getting to grips with the CSS box model. Loads on the web about that.

marcia
07-08-2011, 06:24 PM
u r rite - I thought that was the beauty of DW. I finally stopped using tables and thought I was doing the rite thing now. Guess not.

I use the box model all the time, but get messed up with the images, which is the main part of my pages.

So, now I have looked up 'hand coding css' and found something to study. Unfortunately, I'm going out of town for 2 weeks so can't work on this.

A quick look at your sample led me to have many questions - the first is whether I can use Bauhaus in DW or do I need to make an image and insert it?

I don't know what tables you are referring to in my page, but will recheck.

When I copied your code into another trial (test), the links are broken.

As I said before, the menu at the bottom will be removed and replaced by a nav bar near the top.

I appreciate your interest and am grateful to know the direction to take.

Corrosive
07-09-2011, 08:01 AM
the first is whether I can use Bauhaus in DW or do I need to make an image and insert it?

There are a number of methods for using different fonts in web pages now. Probably good to try using @font-face but you'll need to check licensing very carefully before you do. Her is a guide to @font-face http://www.font-face.com

I don't know what tables you are referring to in my page, but will recheck.

I didn't mean the first link you've been working on. The second one you posted was an older version using tables so I ignored it. You are OK with this one and on the right track now :mrgreen:

When I copied your code into another trial (test), the links are broken.

I linked the images directly from your site. You'll need to alter them if you want to use my code.

As I said before, the menu at the bottom will be removed and replaced by a nav bar near the top.

Glad I left it then!

I appreciate your interest and am grateful to know the direction to take.

You are welcome. Honestly, design view, even split view is just a crutch and a barrier to understanding how to code website properly. I used to do what you are doing but, as soon as I really started to try laying out pages with just code, it finally clicked and I have never looked back. It gets easier and easier from there. I promise.