why the content is not on left

TheCatapult · June 1, 2012

Hello! I have problem with <div> and <margin>. Why the third "Mission" button is not on the very left instead it is alligned on the next of the second "Mission". I have very closed the <div> where the second "Mission" does belongs, i.e. 3 closes :facepalm: . Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:right;margin-top:100px;} .Banner   {width: 768px;  height: 244px;background-color:#CCff00}.cat1   {width: 768px;  height: 37px;.test   {width: 768px;  height: 37px;}</style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs"width="768" height="244"></div><div class="cat1"><img border="0" src="Images/home.gif" alt="Programs" width="153"height="40"><img border="0" src="Images/sched.gif" alt="Programs" width="153"height="40"><img border="0" src="Images/about.gif" alt="Programs" width="153"height="40"><img border="0" src="Images/contact.gif" alt="Programs" width="153"height="40"><img border="0" src="Images/mission.gif" alt="Programs" width="153"height="40"></div><div class=test"><div class="right"><img border="0" src="Images/mission.gif"alt="Programs" width="153" height="40"></div><div class="left"><img border="0" src="Images/mission.gif" alt="Programs"width="153" height="40"></div></div></div> <div><div class="right1"><img border="0" src="Images/mission.gif" alt="Programs"width="153" height="40"></div></div> </div> </body></html>

Look for the attached file for the scrren shot of problem .Thanks!Thanks!

Edited June 1, 2012 by MisterCatapult

dsonesuk · June 1, 2012

this is wrong for a start .Banner {width: 768px; height: 244px;background-color:#CCff00}.cat1 {width: 768px; height: 37px; /* close the curly bracket */.test {width: 768px; height: 37px;}

Edited June 2, 2012 by dsonesuk

TheCatapult · June 2, 2012

Sorry for this question: But why it still has error?

.Banner   {width: 768px;  height: 244px;background-color:#CCff00;}.cat1   {width: 768px;  height: 37px;}.test   {width: 768px;  height: 37px;}

Thank much!

TheCatapult · June 3, 2012

Hello, Please am sorry but I can't figure it out. Do I have to make it like this for every new separate float?

#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:left;margin-left:-153px;margin-top:40px;}.right2 {float:left;margin-left:-153px;margin-top:80px;} .Banner   {width: 768px;  height: 244px;background-color:#CCff00}.cat1   {width: 768px;  height: 40px;}  /* close the curly bracket */.test   {width: 768px;  height: 37px;color: #FFFF00;}

Does not worked also. Please help me figure this out and thank !

Edited June 3, 2012 by MisterCatapult

dsonesuk · June 3, 2012

What i suggest is that you properly validate your code at http://validator.w3.org/, correct the errors, and if the problem persists, then repost your correct code. As at the moment it would be difficult to properly correct the problem with all the errors that are present that may or may not, be the problem itself.

TheCatapult · June 3, 2012

Thanks much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:left;}.right2 {float:right;} .Banner   {width: 768px;  height: 244px;background-color:#CCff00}.cat1   {width: 768px;  height: 40px;}  /* close the curly bracket */.test   {width: 768px;  height: 37px;color: #FFFF00;} </style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs" width="768" height="244"></img></div><div class="cat1"><img border="0" src="Images/home.gif" alt="Programs" width="153" height="40"></img><img border="0" src="Images/sched.gif" alt="Programs" width="153" height="40"></img><img border="0"src="Images/about.gif" alt="Programs"width="153" height="40"></img><img border="0"src="Images/contact.gif"alt="Programs" width="153" height="40"></img><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div> <div class="test"><div class="right"><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div><div class="left"><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div></div> <div><div class="right1"><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div><div class="right2"><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div></div> </div> </body></html>

Is it okay now. Oops, I found 9 errors in W3C Validator, I don't know how to fix it.

Edited June 3, 2012 by MisterCatapult

dsonesuk · June 3, 2012

ALL XHTML img element end for example <img border="0" src="Images/home.gif" alt="Programs" width="153" height="40" /> and all attributes must have a space between them for example

<img border="0"src="Images/about.gif" alt="Programs"width="153" height="40"/><img border="0"src="Images/contact.gif"alt="Programs" width="153" height="40"/>

should be

<img border="0" src="Images/about.gif" alt="Programs" width="153" height="40"/><img border="0" src="Images/contact.gif" alt="Programs" width="153" height="40"/>

TheCatapult · June 4, 2012

Hello! Here is my new code, I found 4 errors as per W3C Markup Validation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:left;}.right2 {float:right;}.right3 {float:right;}  .Banner   {width: 768px;  height: 244px;background-color:#CCff00}.cat1   {width: 768px;  height: 40px;}  /* close the curly bracket */.test   {width: 768px;  height: 37px;color: #FFFF00;} </style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs" width="768" height="244"/></div><div class="cat1"><img border="0" src="Images/home.gif" alt="Programs" width="153" height="40"/><img border="0" src="Images/sched.gif"alt="Programs" width="153" height="40"/><img border="0"src="Images/about.gif" alt="Programs"width="153" height="40"/><imgborder="0"src="Images/contact.gif"alt="Programs" width="153" height="40"/><img border="0" src="Images/mission.gif" alt="Programs" width="153"height="40"/></div> <div><div class="right1"><img border="0" src="Images/watch-sign.jpg" alt="Watch TCB" width="328" height="75"/></div>[color=#0000ff]<div class="right2"><img border="0" src="Images/watch-sign.jpg" alt="Watch TCB" width="328" height="75"/></div><div class="right3">Hello!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>[/color]</div></div> </div> </body></html>

Line 45, Column 190: attributes construct error …idth="153" height="40"/><img border="0"src="Images/about.gif" alt="Programs"wi… ✉
Line 45, Column 190: Couldn't find end of Start Tag img line 45 …idth="153" height="40"/><img border="0"src="Images/about.gif" alt="Programs"wi… ✉
Line 45, Column 267: attributes construct error …idth="153" height="40"/><img border="0"src="Images/contact.gif"alt="Programs" … ✉

Line 45, Column 267: Couldn't find end of Start Tag img line 45 …idth="153" height="40"/><img border="0"src="Images/contact.gif"alt="Programs" What are the problems? Also why if I shorten the Hello!aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, then it goes to the line of the <div class="right2"><img border="0" src="Images/watch-sign.jpg" alt="Watch TCB" width="328" height="75"/></div> Please help and many thanks for continous help!

Edited June 4, 2012 by MisterCatapult

TheCatapult · June 4, 2012

EDIT: My new code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:left;}.right2 {float:right;}.right3 {float:right;max-width:340px;max-height:284px;}  .Banner   {width: 768px;  height: 244px;background-color:#CCff00}.cat1   {width: 768px;  height: 40px;}  /* close the curly bracket */.test   {width: 768px;  height: 37px;color: #FFFF00;} </style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs" width="768" height="244"/></div><div class="cat1"><img border="0" src="Images/home.gif" alt="Programs" width="153" height="40"/><img border="0" src="Images/sched.gif"alt="Programs" width="153" height="40"/><img border="0"src="Images/about.gif" alt="Programs"width="153" height="40"/><imgborder="0"src="Images/contact.gif"alt="Programs" width="153" height="40"/><img border="0" src="Images/mission.gif" alt="Programs" width="153"height="40"/></div> <div><div class="right1"><img border="0" src="Images/watch-sign.jpg" alt="Watch TCB" width="328" height="75"/></div><div class="right2"><img border="0" src="Images/watch-sign.jpg" alt="Watch TCB" width="328" height="75"/></div></div><div><div class="right3">aaaaaaaaaaaaaaaaaasdddddddddddddddddddddddddddddddddddddddddddddddddddd10:04 PM6/4/2012aaaa</div></div></div> </body></html>

Why is aaaaaaaaaaaaaaaaaasdddddddddddddddddddddddddddddddddddddddddddddddddddd10:04 PM6/4/2012aaaa not on the very left and it overflows beyond the limit width of page, why?

Edited June 4, 2012 by MisterCatapult

dsonesuk · June 4, 2012

not on the very left

maybe to do with .right3 { float:right; max-width:340px;max-height:284px;}

overflows beyond the limit width of page, why

because that is what using a long continuous line of text will produce unless you use some sort of css code to break it up

.right3 {float:right;max-width:340px;max-height:284px;    white-space: pre;		   /* CSS 2.0 */    white-space: pre-wrap;	  /* CSS 2.1 */    white-space: pre-line;	  /* CSS 3.0 */    white-space: -pre-wrap;	 /* Opera 4-6 */    white-space: -o-pre-wrap;   /* Opera 7 */    white-space: -moz-pre-wrap; /* Mozilla */    white-space: -hp-pre-wrap;  /* HP Printers */    word-wrap: break-word;	  /* IE 5+ */}

TheCatapult · June 5, 2012

Sorry for my clumsiness. May I ask again one question. Why the Mission (with circle and arrow to the left) is not on the very left. I'm tired with this. Can you give me an example of what should I do? Please take a look at my attachment. Thanks dsonesuk!

Edited June 5, 2012 by MisterCatapult

dsonesuk · June 5, 2012

I can't give a example, as i don't know what you are trying to achieve? Is this supposed to be some sort of menu? I thought it was at the start but there's no links, IF not I should create a outer container for each row and apply float left right to the child elements. note change total width to 770px, images to 154 so they fit the whole width from edge to edge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 770px;}.left { float: left;}.right {float:right;margin-right:10px;}.right1 {float:left;}.right2 {float:right;}.right3 {float:right;max-width:340px;max-height:284px;    white-space: pre;			  /* CSS 2.0 */    white-space: pre-wrap;	    /* CSS 2.1 */    white-space: pre-line;	    /* CSS 3.0 */    white-space: -pre-wrap;	  /* Opera 4-6 */    white-space: -o-pre-wrap;   /* Opera 7 */    white-space: -moz-pre-wrap; /* Mozilla */    white-space: -hp-pre-wrap;  /* HP Printers */    word-wrap: break-word;	    /* IE 5+ */}  .Banner   {width: 770px;  height: 244px;background-color:#CCff00}.cat1   {/*width: 768px; not required  height: 40px;*/  overflow:hidden;   }  /* close the curly bracket */.cat1 img {float:left; display:block;}.cat1 img.img_right{float:right;}.test   {width: 768px;  height: 37px;color: #FFFF00;} </style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs" width="768" height="244"/></div>    <div class="cat1">        <img border="0" src="../images/bl_find_out_button.jpg" alt="Programs" width="154" height="40"/>        <img border="0" src="../images/bl_find_out_button.jpg" alt="Programs" width="154" height="40"/>        <img border="0" src="../images/bl_find_out_button.jpg" alt="Programs" width="154" height="40"/>        <img border="0" src="../images/bl_find_out_button.jpg" alt="Programs" width="154" height="40"/>        <img border="0" src="../images/bl_find_out_button.jpg" alt="Programs" width="154"height="40"/>    </div>     <div class="cat1">        <img border="0" src="../images/bl_find_out_button.jpg" alt="Watch TCB" width="328" height="75" />        <img border="0" src="../images/bl_find_out_button.jpg" alt="Watch TCB" width="328" height="75" class="img_right" />    </div>    <div class="cat1">        <div class="right3">aaaaaaaaaaaaaaaaaasdddddddddddddddddddddddddddddddddddddddddddddddddddd10:04 PM 6/4/2012aaaa        </div>    </div></div></body></html>

TheCatapult · June 6, 2012

Hello! I want the banner on the very top (the black one) and then the sets of navigation buttons bellow it. Then bellow the buttons, there will be a blue background <div>, i.e. for the news on the left; and a Watch signage on the left then below it another blue background w/ shadow and there the video. Please help me! Thanks!

Edited June 6, 2012 by MisterCatapult

dsonesuk · June 6, 2012

If this is a menu with submenus you are using the wrong element type to achieve this you should be using unordered list, and images should background images for the anchor element that will link to you specific page, which uses display: block, you to style ul and li elementt in such a way that it shows horizontally across the page. http://www.w3schools.com/css/css_navbar.asp

TheCatapult · June 6, 2012

No, the only navigations are the horizontal green buttons and the rest are just the content of the site. How can I allign them ? Thanks !

eTianbun · June 6, 2012

http://www.w3schools.com/css/css_navbar.asp

That's an example on how to create a navigation MENU.

dsonesuk · June 6, 2012

No, the only navigations are the horizontal green buttons and the rest are just the content of the site. How can I allign them ? Thanks !

No! that is not a navigation, that is just a bunch of images placed next to each other, in other words a gallery of menu images, to be a menu is has to use <a href="whateverpages.html"></a> so when you click image OR background-image wrapped the anchor link it will take you to that specific page. The navigation buttons in the 2nd, 3rd 4th rows IF supposed to be submenu, WON'T work as again just a row of MORE images. THAT's why i suggested you look up http://www.w3schools.../css_navbar.asp to get your naviigation correctly set up.

TheCatapult · June 7, 2012

Hello dsonseuk, I planned it to be like: <a href="index.html"><img border="0" src="1.png" alt="Programs"></a><a href="programs.html"><img border="0" src="2.png" alt="Programs" ></a><a href="schedule.html"><img border="0" src="3.png" alt="Programs"></a><a href="anchors.html"><img border="0" src="4.png" alt="Programs"></a><a href="contact.html"><img border="0" src="5.png" alt="Programs"></a><a href="advertise.html"><img border="0" src="6.png" alt="Programs"></a> The rest are just the content, not submenu. How ??

Edited June 7, 2012 by MisterCatapult

eTianbun · June 7, 2012

Did you use/click the link you where given?

dsonesuk · June 7, 2012

I explained how to align content with you here http://w3schools.invisionzone.com/index.php?showtopic=43461&pid=242985&st=0entry242985, you examples for left only <div class="ex1"> ... </div> right only <div class="ex2"> ... </div> and left and right.. yes you guessed it <div class="ex3"> ... </div> all you have to do is use the one suited to your situation and change widths of columns and margins.

why the content is not on left

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in