Jump to content

why the content is not on left


TheCatapult
 Share

Recommended Posts

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!

post-78075-0-98751500-1338561639_thumb.png

Edited by MisterCatapult
Link to comment
Share on other sites

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 by MisterCatapult
Link to comment
Share on other sites

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 by MisterCatapult
Link to comment
Share on other sites

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"/>

Link to comment
Share on other sites

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>

  1. Line 45, Column 190: attributes construct error …idth="153" height="40"/><img border="0"src="Images/about.gif" alt="Programs"wi…
  2. error.pngLine 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…
  3. error.pngLine 45, Column 267: attributes construct error …idth="153" height="40"/><img border="0"src="Images/contact.gif"alt="Programs" …

error.pngLine 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 by MisterCatapult
Link to comment
Share on other sites

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 by MisterCatapult
Link to comment
Share on other sites

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+ */}

Link to comment
Share on other sites

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!

post-78075-0-34908900-1338883764_thumb.png

Edited by MisterCatapult
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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!

post-78075-0-57278100-1338990603_thumb.jpg

Edited by MisterCatapult
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 by MisterCatapult
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...