Page in 2 columns

[oggyswain]

I have a website I am working on

 

http://nextlevels.ca/contacts.html

 

I want to put the Form on 2nd half of the page so that they are side by side. Contact info on left side. Form on Right side.

 

I do not know CSS that well. What do I need to do to get that done?

[Wickham]

I've done what you want here:-

http://www.wickham43.com/forumposts/oggycontacts100422.html

CSS here:- http://www.wickham43.com/forumposts/oggystyle100422.css

 

by adding a left and right div, both with floats,

and changing the positions of the </div> tags.

I added overflow: hidden; to the #body-part to drag down its background-color over the floated divs.

The width of your form td tags are 145+280 = 425 so I made the #right div 425px.

I made the left div 399px wide so that 425 + 399 = 824 px which is the width of #body-part.

I deleted width="75%" in the form table.

I corrected <br> to <br /> in two places so that the code now validates.

I added background colors to the divs so that you can see where they are and you can remove the colors.

Edit <img src="immmmmages/logo.gif" to <img src="images/logo.gif" in the html file. I had to disable this image as I already had a logo.gif in my directory.

Edited April 22, 2010 by Wickham

[oggyswain]

Wow Wicks your the man.

 

Thanks

[oggyswain]

Hi Wickham,

 

I tried doing what you posted and it didn't work for me, i must of buggered it up someway.

 

There is a additional problem I have at the top right I wanted the put the contact info but it keeps drifting over to the left. I am not getting this CSS stuff. I have a problem with getting a div to stay in one place.

 

Anyway if you could look at items.

1. the form should be on the right side of the page.

2. the contact info that is over top of the logo at the top should be on the right side of the page.

 

Thanks

[Andrea]

For starters, I'm cleaning up your html by:Changing to an HTML strict docytpe and removing all the xhtml closing tags now not needed

• Removing all the inline and internal styling - that's just going to mess you up in the end, as it overrides anything in your external stylesheet. Besides, the whole point of the external stylesheet is that it applies to your entire site. The only time it makes sense to use inline styling for things that only show up one time on one page.
• Adding a wrapper, getting rid of unnecessary divisions and spans and giving all of them meaningful names - there's no point in spanning the entire content inside a division - if you want to style it, use the division id or class to target.
• Getting rid of http://nextlevels.ca...right-strip.gif - doesn't seem to have a purpose.
• Getting rid of span tags that are just < span > - makes no sense. You would use that for inline styling, but then you'd have to add the style -or add a class, so you can target it in your CSS.
• You are not using the h tags correctly. They are meant to be used for titles, in order of importance, and there is no h7 or h8 tag.

Now the CSS:

 

• Adding * {margin: 0; padding: 0; } to prevent issues with different browsers. With that, also all the other 0 margins or padding throughout can be removed.
• General CSS cleanup by using shortcuts
• Removing all 'normal' styling - that's the default, no sense in calling it. Text-align left and float: none are also defaults and redundant (usually)
• Adding the #wrapper and giving it a width and right/left margins of auto to center
• The font style is declared in the body tag, no need to repeat it, unless you want a different font for a specific division or element.
• When something is zero, it needs no unit of measure - zero is zero.

Here is what I have: http://aandbwebdesig...forum/oggy.html - it's not finished, and still needs a bit of adjusting (ok - a LOT of adjusting and tweaking), but overall, the code is a lot simpler and cleaner. It probably would have been easier to just start form scratch, but I tried to give you an idea about how some things can be done a bit leaner than what you had. And now it's almost 4 AM, and I'm heading back to bed. I think.

[oggyswain]

Hi Andrea,

 

I see what your talking about in regards to cleaning up the code. That will come later when I know what I am doing.

 

I took your coding and slowly replace my coding. It did not work for me so I went back and tried to redo my coding.

 

I figured out how to not have the graphics resize on different browsers.

 

I'm starting to understand about putting all the tag info onto the css style sheet.

 

I am having a very hard time trying to split the left and right side of the page. I understand from your coding that I create a div ID for the object on the left side of the page and I do the same for the item I want on the right side. But the divs seem to merge together. It looks great on the screen but as soon as I upload my file it does not work.

 

Sorry to keep coming back with the same problems but I am not getting it.

 

I have uploaded the page here www.nextlevels.ca/about-us.html

 

In dream weaver the text is on the right side of the page. As you can see it merges with the type.

 

Arggg! I should of did this in html I think but I really wanted to get my hands dirty with css.

 

Anyway thanks for all your help.

[Andrea]

I figured out how to not have the graphics resize on different browsers.

What do you mean by that? A graphic is a certain size (ideally, it displays in exactly the size it IS).

But the divs seem to merge together. It looks great on the screen but as soon as I upload my file it does not work.

It can be really helpful to put a different background color behind your divs - just while you're building the site - so you can see where what is. And what do you mean by 'it looks great on screen?" If you're viewing in Dreamweaver, forgetaboutit - only what the browsers shows you matters.

 

You page right now has 26 validation errors - fix those first, any one of them could be causing you problems.

 

You still have quite a mess of random divisions, and your right division isn't there at all. It really is a much better approach to work with clean code from the beginning, instead of trying to deal with mess and cleaning it later.

 

And HTML and CSS are 2 different things and both are needed to build a website, so saying you should have done this in HTML isn't applicable.

 

 

And don't worry about coming back with questions, that's what we're here for.

[Andrea]

I see you got your divisions to line up - good. However, you still have almost 30 errors in your code that should be fixed, or they'll come bite you later. Run your site through the w3 validator: http://www.w3schools...te_validate.asp and start cleaning them up.

[oggyswain]

Wow Thanks.

 

I didn't know you could do that.

 

That will help a lot.

[oggyswain]

Hi Andrea,

 

I have a question.

In my css style sheet. I created a type style called large. When I run the validation on my page it says it is wrong. I know you can use h1-h6 I thought you could create as many different styles as you want. Why is large not valid?

what other name could I call it?

[Andrea]

HTML has specific properties - for example body, div, p, img, ul, li. Large is not one of them - HTML does not allow you to just make up new ones. What you can do, is add the class or id of 'large' to valid properties. So in your case, you could write:

<span class="large">Contact Us</span>

[oggyswain]

Got it Thanks.

 

It's a slow haul but I'm starting to understand a bit.

[newseed]

There is a way to quickly make a word or phrase bigger (or smaller) within a paragraph by using the <big> tag.

 

<h1>This is my <big>title</big></h1>

<h1>This is my <small>title</small></h1>

 

You can even style it:

 

h1 big {font-size: 30px; color: #ff0000;} or whatever.

 

Otherwise, span tag will work just as well.