How do I get my text to align with the rest of the page?

[newcodersipher]

Hi everyone

Let me first say how awesome it is for the web to have a place like this where other html coders can relate. I'm new to the scene and enjoying it.

So onto my question..
I'm an assistant on a web design project and I'm having trouble aligning text on a website. I used divs on a WYSIWYG editor to place the text and when I opened the page everything looked fine, of course that was because it was done on this computers resolution specs.

Now if you look you will see that when you are either:
A) On a different resolution on another computer the text look ambiguous and doesn't align propery
B) Minimizing the window or changing its shape the text also doesn't align.

So my question is, how do I resolve this matter.
Any html pro's or programmers in whatever arena would be truly appreciated in taking a look at this issue for me.

Oh and about styles..I don't know much about css as I'm still a beginner and I'm thinking I can't even use styles since I already have that <style> code in there already, but it's not a css one. So I've written that off.

Here is the website so you can see the issue (assuming you're not on 1280 for your width in resolution and not in full screen).

URL - http://blendsphere.com/mailconnect/

Once at the site you can pull up the html code to see it too.

Again thanks for any support or solutions on this.
I am relatively new to the web design world so if you do have any solutions if you could make it brief that would be fantatstic.

Ok thanks again. Please enlighten this noob, so far I've been enjoying html and hope to do so for much longer.

Alright then.

[KDLA]

I would guess that it has to do with your using both relative and absolute positioning.
You've positioned the text absolutely, taking it out of the document flow:

<div style="Z-INDEX: 100; LEFT: 169px; WIDTH: 600px; POSITION: absolute; TOP: 138px; HEIGHT: 44px">

[newcodersipher]

Thanks for responding.

What code would correct that though?

I would guess that it has to do with your using both relative and absolute positioning.
You've positioned the text absolutely, taking it out of the document flow:

<div style="Z-INDEX: 100; LEFT: 169px; WIDTH: 600px; POSITION: absolute; TOP: 138px; HEIGHT: 44px">

[KDLA]

Just take out that div tag and its closing tag (within that cell).

[hitman]

I've tried re-doing the page using DIVs instead of tables. It would make the page cleaner and gets rid of the positioning issue. Also you could format a text for "EMAIL CONNECT" with a red background and use only the image on the right as graphic

[newcodersipher]

Thanks I'llt ry that.

Just take out that div tag and its closing tag (within that cell).

[newcodersipher]

Hey thanks for that and I tried your code and yes things came up nice for the most part. But what about the edgy effect created from bg1223.jpg & bg1222.jpg ?

Is there any way to save that?

Also in the original code you will see the background for the text is actually a picture. There might be a possibility..actually a liklihood they will want that to be a picture background there..is there any way to include that notion?

Lastly as I looked at the variables I assume in order to reproduce these similiar effects on other webpages I mainly need to guess the pixels of the div then make a css style for it as you did above and then include the overflow text?

Everytime I want to correct other pages that have this div issue just do that?

Hitman thanks a bunch! If you were my neighbord I'd give you free turkey for turkey day :D

Thanks also KDLA..by the way I tried your suggest but unfortunately it didn't work. Still thank you very much for trying to help me

I've tried re-doing the page using DIVs instead of tables. It would make the page cleaner and gets rid of the positioning issue. Also you could format a text for "EMAIL CONNECT" with a red background and use only the image on the right as graphic

[hitman]

Hey thanks for that and I tried your code and yes things came up nice for the most part. But what about the edgy effect created from bg1223.jpg & bg1222.jpg ?

Is there any way to save that?

I've re-cut it and attached it as bodybg.gif in my previous post. The page is currently loading it from the same folder as page, but you can copy the picture in any folder you want and modify the CSS for the container background location.

Also in the original code you will see the background for the text is actually a picture. There might be a possibility..actually a liklihood they will want that to be a picture background there..is there any way to include that notion?

For "Stay connected with other enthusiasts" and "Other benefits include"? You can add a background to #mailinglist and another for #benefits in the CSS. I've filled them with a background colour because both blues are plain, so it would make the page take less time to load.

Lastly as I looked at the variables I assume in order to reproduce these similiar effects on other webpages I mainly need to guess the pixels of the div then make a css style for it as you did above and then include the overflow text?

You can take the CSS out of the code I've attached and place it as an external style sheet, and just call it from each page. The only parts that might change in each page are #mailinglist and #benefits, so you can remove them from the style sheet and add them to the header of each page and modify the code according to how you want them to look on each page.

Hitman thanks a bunch! If you were my neighbord I'd give you free turkey for turkey day :D

Lol, thanks :)

Let me know if that's what you were asking and if you need more details

[newcodersipher]

Hey hitman thanks for answering my questions. But I'm still at somewhat of a discombobulation.

Ok remember the gif file you sent me, well it's actually supposed to be two since the bg1222.jpg file is for the left half of the screen and bg1223.jp is for the right half. Those two are supposed to create a closing in affect on the page..kinda nifty feeling I suppose.

But yeah I also decided to try it out (just for the heck of it, remember I'm new to html so I like to experiment) and it didn't even show up on either side or to produce the effect. What do you think? You can also look at the html and you will see I put in the correct URL for it.

Ok and I'm pretty sur eI udnerstand most of the mailing list and benefits. Also how it works and such. I don't understand however the div content and what's that for. I understand div connect, that's just for the background up top right?

But actually, haha it's funny because my original question about the background for stay connected and benefits had nothing to do with what you answered. Nonetheless your answer helped me so much still, haha thanks a bunch.
So yes my original background question was about the orangish/red one. The one where the mailist and benefits backgrounds lay on top of. What I was referring to was that and how I'd be able to use a picture as a background there because it's likely that background (which is now redish/orange) will be a pic background. Any thoughts on this too?

Lastly I'm not quite sure how the text that shows up falls into all this. Like how did you know to use p style and p class? What does the c1 mean? I have a hunch that area has to do with p.c & p.c1 area's on the css. Am I correct? Can you expand please?

Ahhh sorry hitman I know..a lot of questions but I am truly thankful and in already asking I've learned a lot despite the situation not yet being resolved.
Thanks a bunch again.

Oh and I made a new page for you and all others to compare ok here is the original (bare in mind..and I'm pretty sur eyou already know the header and footer are not yet uploaded/ready)

Original (what I'd like it to look like but of course without alignment isseus) http://blendsphere.com/mailconnect

Here is with hitmans code http://blendsphere.com/mailconnect/index2.html

Thanks

I've re-cut it and attached it as bodybg.gif in my previous post. The page is currently loading it from the same folder as page, but you can copy the picture in any folder you want and modify the CSS for the container background location.



For "Stay connected with other enthusiasts" and "Other benefits include"? You can add a background to #mailinglist and another for #benefits in the CSS. I've filled them with a background colour because both blues are plain, so it would make the page take less time to load.



You can take the CSS out of the code I've attached and place it as an external style sheet, and just call it from each page. The only parts that might change in each page are #mailinglist and #benefits, so you can remove them from the style sheet and add them to the header of each page and modify the code according to how you want them to look on each page.



Lol, thanks :)

Let me know if that's what you were asking and if you need more details

[hitman]

Ok remember the gif file you sent me, well it's actually supposed to be two since the bg1222.jpg file is for the left half of the screen and bg1223.jp is for the right half. Those two are supposed to create a closing in affect on the page..kinda nifty feeling I suppose.

But yeah I also decided to try it out (just for the heck of it, remember I'm new to html so I like to experiment) and it didn't even show up on either side or to produce the effect. What do you think? You can also look at the html and you will see I put in the correct URL for it.

What I did was create a 1px high picture combining bg1222.jpg on the left and bg1223.jpg on the right, with a 944px gap between them to place the #inner DIV inbetween (since #inner width is 944px). Then I made it repeat vertically. So instead of two 2kb pictures on both sides of the page, you have only a 190 bytes one.
It won't appear because it's loading the wrong background image. Upload bodybg.gif to the /mailconnect/images/ folder, and in your CSS change http://blendsphere.com/mailconnect/images/bg1222.jpg to http://blendsphere.com/mailconnect/images/bodybg.gif

Ok and I'm pretty sur eI udnerstand most of the mailing list and benefits. Also how it works and such. I don't understand however the div content and what's that for. I understand div connect, that's just for the background up top right?

Yes #connect is for blendconnectdiv.jpg.
#content is for what goes in the red part of the page ("Stay connected with other enthusiasts" and "Other benefits include"). That's the whole part under #connect and above #footer.

But actually, haha it's funny because my original question about the background for stay connected and benefits had nothing to do with what you answered. Nonetheless your answer helped me so much still, haha thanks a bunch.
So yes my original background question was about the orangish/red one. The one where the mailist and benefits backgrounds lay on top of. What I was referring to was that and how I'd be able to use a picture as a background there because it's likely that background (which is now redish/orange) will be a pic background. Any thoughts on this too?

This is controlled in #content. You can add a background image in the CSS under #content. If you want to add a large image, you can modify the height of #content to match the height of your background image.

Lastly I'm not quite sure how the text that shows up falls into all this. Like how did you know to use p style and p class? What does the c1 mean? I have a hunch that area has to do with p.c & p.c1 area's on the css. Am I correct? Can you expand please?

.c and .c1 in p.c and p.c1 are classes. So if you have several paragraphs on a page, you can apply individial properties to each of them. If you look in the HTML, you'll see that the text inside each blue box has it's own class: <p class="c1"> and <p class="c">. I did this because the gap between the top of the blue boxes and the texts was different on each blue box.
There is a cleaner method to do this by adding padding-top to each blue box, but I was too lazy to do it.