HTML Help

newcodersipher · Joined: 20 Nov 2008 Posts: 6

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.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Just a few things to start

Use a complete doctype
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Do not force a resolution on users. That script needs to be done away with. Size your container for the lowest resolution you support, Normally 1024 X 768 in which the width should be 955px.

Use correct code for the movie since the embed tag is not supported
Code: <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' style="width:944px; height:46px;">
<param name='movie' value="images/blendconnect/header.swf">
<param name='quality' value="high">
<param name='bgcolor' value="#C2D7E9">
<param name='loop' value="true">

<script type="text/javascript">
document.write('<embed src="images/blendconnect/header.swf" quality="high" style="width:944px; height:46px; background:#C2D7E9;" loop="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">')
</script>

Use http://validator.w3.org/ to find errors in code

Now to the problem at hand.
The content moves because of absolute positioning. Give the main container (table) a css rule of position:relative then the the elements will position off of this container instead of the body.

newcodersipher · Joined: 20 Nov 2008 Posts: 6

thank youuu soo much sticks

I kind of get everything, I'm still new to html but trying my best to learn.

About the text..do I have to make a css or style?

If so how do I begin? I've read up on css and that you make a notepad document and make it .css
but I have to insert some code in the html.
Thing is the main guy who is working on this project inserted some style stuff at the top. Well he is on vacation for the next 2 months...so ya...As you probably saw..abotu the style up top, so wouldn't a new css overwrite all that?

Any steps on what to do would be a great learning expereicne for me.

And about the movie tag I would just delete everything between the <td colspan="2"> and </object>

right?

Thanks again sticks & all else

sticks464 · Joined: 31 Dec 2006 Posts: 1283

I'll work up a demo for you showing how to do your page using nested div's so you don't have to redo your images. It may be this afternoon before I get it posted up. I am at work right now and other projects take precedence.

newcodersipher · Joined: 20 Nov 2008 Posts: 6

Sticks I love you!
If you were my neighbor I'd give you..give..you...give you...a turkey? lol..thanksgiving is on the way. haha

Ok I'll wait this afternoon, checking in and out.
Thanks a bunch again

sticks464 wrote: I'll work up a demo for you showing how to do your page using nested div's so you don't have to redo your images. It may be this afternoon before I get it posted up. I am at work right now and other projects take precedence.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here's a demo. I don't have the images for the side borders so it was a guess as to the margins on the inner and container div's, but can be easily adjusted. The header image may look awkward as it is larger than the header div and may have to be resized. Same for the movie. I only have IE7 here at work to test with so it will need to be looked at in other browsers to ensure it is rendering the same as IE.
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
* { /* set all browser defaults to zero */
margin:0;
padding:0;
border:none; /* removes IE image blue border */
}

:focus {outline:0;} /* removes dotted border from anchors and objects */

html, body {font-size:100%; height:100%;} /* for IE */
* html, #outer, #inner, #container{height:99.9%;} /*For ie as treats height as min-height */

body {
font-family: "Tahoma", Arial, Helvetica, sans-serif;
font-size:88%;
background:#ccc;
color:#000; /* all text color */
}

#outer {
min-height:100%;
width:950px;
margin:auto; /* center content for higher resolutions */
background:#000 url(images/bg1222.jpg) repeat-y top left;
}

#inner {
width:935px;
height:100%;
margin-left:15px; /* to show left border */
background:#fff url(images/bg1223.jpg) repeat-y top right;
}

#container {
width:920px;
height:100%;
margin:0 15px 0 0; /* to show right and left borders */
background:red;
}

#movie {
width:920px;
height:46px;
background:#C2D7E9;
}

#header {
height:54px;
background:#C2D7E9 url(images/blendconnect/blendconnectdiv.jpg) center;
}

.connect {
font-family:Arial;
color:#0d446d;
padding:20px 0 5px 20px;;
}

.access {
padding-bottom:10px;
}

.field {
width:85%;
padding:20px;
background:#C2D7E9;
margin-bottom:10px;
}

.other {font-weight:bold;}

.field ul.benefit {list-style:none;}
</style>

</head>
<body>
<div id="outer">
<div id="inner">
<div id="container">
<div id="movie">
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' style="width:920px; height:46px;">
<param name='movie' value="images/blendconnect/header.swf">
<param name='quality' value="high">
<param name='bgcolor' value="#C2D7E9">
<param name='loop' value="true">
<script type="text/javascript">
document.write('<embed src="images/blendconnect/header.swf" quality="high" style="width:920px; height:46px; background:#C2D7E9;" loop="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">')
</script>
</div>

<div id="header"></div>

<h3 class="connect">Stay connected with other enthusiasts</h3>
<div class="field">
<p class="access">Join our mailing list and get immediate access
to live e-mail conversations and exchanges online, delivered right to your inbox.</p>
<form id="mail" action="http://blendsphere.com/blendconnect/mailist.php" method="post">
<input type="hidden" name="recipient" value="mailconnectatblendsphere.com">
<input type="hidden" name="subject" value="Form Response">
<input type="hidden" name="required" value="e_mail">
<input name="e_mail">
<input type="submit" value="Submit">
</form>
<p class="enter">Please enter your name and e-mail address above</p>
</div>
<div class="field">
<p class="other">Other benefits include:</p>
<ul class="benefit">
<li>- benefit 1</li>
<li>- benefit 2</li>
<li>- benefit 3</li>
<li>- benefit 4</li>
</ul>
</div>

</div>
</div>
</div>
</body>
</html>

newcodersipher · Joined: 20 Nov 2008 Posts: 6

Thanks sticks, I understand most of the code but I may have a few questions.

I decided to test it out in hopes of learning more.
Unfortunately it didn't work out.

I made a new page for you so you can see for yourself

http://blendsphere.com/mailconnect/index3.html

The original is http://blendsphere.com/mailconnect

I'm thinking somehow something is overlapping something.

Also I noticed that the background image isn't included in your code and wondering if that has something to do with it. The background image looks orangish/red but is really a picture and it's likely that a picture will be used in the future instead of just a solid color, that's why i mention this.

What do you think

And sticks thanks for your time and taking your moment to make a demo fo me :)

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Ok, I'll take a look at it when I get home today to see what's wrong. I'll have a fix that works in all browsers.

[edit]
IE ActiveX is causing it to break because I forgot the object closing tag Code: <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' style="width:920px; height:46px;">
<param name='movie' value="images/blendconnect/header.swf">
<param name='quality' value="high">
<param name='bgcolor' value="#C2D7E9">
<param name='loop' value="true">
</object>
<script type="text/javascript">
document.write('<embed src="images/blendconnect/header.swf" quality="high" style="width:920px; height:46px; background:#C2D7E9;" loop="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">')
</script>

The header background may be the wrong image. Check the css rule for #header.

newcodersipher · Joined: 20 Nov 2008 Posts: 6

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here's pure css, works in IE6-7, FF3, Safari3.1 and Opera9.6.

100% height, no scrollbar until content exceeds screen height.

PM me with your email and I will send you the background image.

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
* { /* set all browser defaults to zero */
margin:0;
padding:0;
border:none; /* removes IE image blue border */
}

/* mac hide\*/
html, body {height:100%}
/* end hide */

:focus {outline:0;} /* removes dotted border from anchors and objects */

html, body {font-size:100%; height:100%; overflow:auto;} /* for IE */

html>body {height:100%;} /* For ie as treats height as min-height */

body {
font-family: "Tahoma", Arial, Helvetica, sans-serif;
font-size:92%;
background:#ccc;
color:#000; /* all text color */
text-align:center;
}

#outer {
height:100%;
min-height:100%;
width:968px;
position:relative;
margin:auto; /* center content for higher resolutions */
background:#d4d4d2 url(images/outer_bg.jpg) repeat-y top left;
text-align:left;
}

#inner {
position:relative;
width:944px;
margin:auto; /* to show borders */
background:#dd2b29;
}

#movie {
height:46px;
overflow:hidden;

}

#header {
position:relative;
height:54px;
width:944px;
background:#fff url(images/blendconnectdiv.jpg) no-repeat left bottom;
padding-top:2px;
}

#container {
background:#dd2b29;
width:100%;
padding-top:30px;
line-height:2;
}

.connect {
font-family:Arial;
color:#0d446d;
padding:0 0 5px 0;
}

.access {
padding-bottom:10px;
}

.field {
width:67%;
padding:10px;
background:#C2D7E9;
margin-bottom:10px;
}

.other {font-weight:bold;}

.field ul.benefit {list-style:none;}
</style>

</head>
<body>
<div id="outer">
<div id="inner">
<div id="movie">
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' style="width:944px; height:46px;">
<param name='movie' value="http://blendsphere.com/mailconnect/images/blendconnect/header.swf">
<param name='quality' value="high">
<param name='bgcolor' value="#C2D7E9">
<param name='loop' value="true">
<param name='wmode' value="transparent">
</object>
<script type="text/javascript">
document.write('<embed src="http://blendsphere.com/mailconnect/images/blendconnect/header.swf" quality="high" style="width:944px; height:46px; background:#C2D7E9;" loop="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">')
</script>
</div>
<div id="header"></div>
<div id="container">
<div class="field">
<h3 class="connect">Stay connected with other enthusiasts</h3>
<p class="access">Join our mailing list and get immediate access
to live e-mail conversations and exchanges online, delivered right to your inbox.</p>
<form id="mail" action="http://blendsphere.com/blendconnect/mailist.php" method="post">
<input type="hidden" name="recipient" value="mailconnectatblendsphere.com">
<input type="hidden" name="subject" value="Form Response">
<input type="hidden" name="required" value="e_mail">
<input name="e_mail">
<input type="submit" value="Submit">
</form>
<p class="enter">Please enter your name and e-mail address above</p>
</div>
<div class="field">
<p class="other">Other benefits include:</p>
<ul class="benefit">
<li>- benefit 1</li>
<li>- benefit 2</li>
<li>- benefit 3</li>
<li>- benefit 4</li>
</ul>

</div>

</div>

</div>
</body>
</html>

newcodersipher · Joined: 20 Nov 2008 Posts: 6

thanks so much, ok pm.