The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I cant align box
drunkelkid
post Apr 10 2020, 07:13 PM
Post #1





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



Hello. (sorry for my english) Im programming Arduino, and im making a web page.. I dont have much idea for HTML, but i was searching how to do.. I have problems with align a box.. i cant, i tried with align:center, the text is aligned but the box not.

i think the problem is in some line from here:

CODE
" <center>\n"
" <style> .IO_box {float: left; margin: 0 20px 20px 0; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>\n"
" </head> <body onload=\"GetArduinoIO()\"> <h1>Arduino Ajax I/O</h1> <div class=\"IO_box\"> <h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> </form> </div> \n"
" </center> </body> </html>\n";


Complete code:

CODE
//PAGINA HTML
const char pagehtm[] PROGMEM =
"<!DOCTYPE html> <html> <head> <title>Arduino Ajax I/O</title> \n"
" <script> strLED1 = \"\"; strLED2 = \"\"; strLED3 = \"\";\n"
" function GetArduinoIO() { nocache = \"&nocache=\" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() {\n"
" if (this.readyState == 3) { if (this.status == 200) { if (this.responseXML != null) {\n"
" if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED1.checked = true; }\n"
" else { document.LED_form.LED1.checked = false; }\n"
" if (this.responseXML.getElementsByTagName('LED')[1].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED2.checked = true; }\n"
" else { document.LED_form.LED2.checked = false; }\n"
" if (this.responseXML.getElementsByTagName('LED')[2].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED3.checked = true; }\n"
" else { document.LED_form.LED3.checked = false; }\n"
"  } } } }\n"
" request.open(\"GET\", \"ajax_inputs\" + strLED1 + strLED2 + strLED3 + nocache, true);\n"
" request.send(null);\n"
//Aumentato il periodo di refresh a 5000 ms per non stressare ENC
" setTimeout('GetArduinoIO()', 500);\n"
" strLED1 = \"\"; strLED2 = \"\"; strLED3 = \"\"; } \n "
" function GetCheck() { if (LED_form.LED1.checked) { strLED1 = \"&LED1=1\"; } else { strLED1 = \"&LED1=0\"; } if (LED_form.LED2.checked) { strLED2 = \"&LED2=1\"; } else { strLED2 = \"&LED2=0\"; } if (LED_form.LED3.checked) { strLED3 = \"&LED3=1\"; } else { strLED3 = \"&LED3=0\"; } }\n"
" </script>\n"
" <center>\n"
" <style> .IO_box {float: left; margin: 0 20px 20px 0; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>\n"
" </head> <body onload=\"GetArduinoIO()\"> <h1>Arduino Ajax I/O</h1> <div class=\"IO_box\"> <h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> </form> </div> \n"
" </center> </body> </html>\n";


It has also happened to me that if I want to add another box it places it next to me, and if I use a <br/> it only drops one space, but it is still on its side


This post has been edited by drunkelkid: Apr 10 2020, 07:15 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 11 2020, 12:51 AM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 18,954
Joined: 9-August 06
Member No.: 6



CODE
i tried with align:center, the text is aligned but the box not.


I don't find 'align' anywhere in what you posted. But you are right. 'align: center' centers text (inline content) within a block, it wouldn't work.

You have used the old school <CENTER>...</CENTER> though. You've placed the start tag way up in HEAD where it can't be. I think in this case you want it before the H1, that is if you want to center everything on the page.

Still, I find browsers centers everything in spite of your mistake, placing the start tag in HEAD. That they don't is because you've floated .IO_box left in your CSS.

QUOTE
CODE
.IO_box {float: left; ... }



I suggest that you remove the CENTER tags. Then remove the float left for .IO_box and change the margins to 'auto'. That will center your box on your page. Then you can use 'text-align: center' with H1. That will center the text withing the H1. But if you give the H1 a background color you will see that the H1 coveres the whole width of the page.

See here for how to center things. It's different for block level and inline elements.
http://www.w3.org/Style/Examples/007/center.html

Blocks that have a width (and yours have) can be centered by giving them equal left and right margins and those margins can be auto.

So, if you remove those CENTER tags and change the CSS for H1 and .IO_box to the below it will work.

CODE
.IO_box { margin: auto; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; }

h1 { font-size: 120%; color: blue; margin: 0 0 10px 0;
     text-align: center }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 11 2020, 09:24 AM
Post #3





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



Thanks you pandy. its work.

QUOTE
I don't find 'align' anywhere in what you posted. But you are right. 'align: center' centers text (inline content) within a block, it wouldn't work.


Yes. i tried and i deleted, then i pasted here without the code.

And if i want to put another box next? (not under)
Maybe my idea is in the future, put some boxes next to another, and under anothers..

(here is under and not next to..)
(i deleted the <br /> )


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 11 2020, 01:26 PM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 18,954
Joined: 9-August 06
Member No.: 6



Well, one way to do it is to float the boxes left. You learnt above that you can't center floats. That is, you can't center them directly. So you need to put the floats in a container and then center the container.

Like so.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Centering floats</title>

<style type="text/css">
<!--

#foo        { width: 264px;
              margin: auto }
#foo div    { float: left;
              width: 120px;
              border: 1px solid black;
              margin: 0 5px;
              display: inline }
-->
</style>

</head>


<body>

   <div id="foo">
      <div>
      Blah blah
      </div>
      <div>
      Blah blah
      </div>
   </div>

</body>
</html>



Note that the width of the container DIV, #foo, must be the sum of the floated boxes widths plus the sum of the widths of all margins and borders. If the width of #foo is less, the second float will float down under the first. That will also happen if the window is too small for them to be side by side.

Another thing. Sizing boxes in pixels is usually not a good idea if they contain text. Maybe I see bad and use HUGE text. You can't know. In usch a case the box will be very high and narrow and longer words may overflow with such a small width.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 11 2020, 05:15 PM
Post #5





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



Well. Now i have another problem sad.gif
I did what you told me to, enclose the boxes and manage to line them up. but only the first one respects the font-size 120, the others that I add increase only in size. I tried to use the font-size 120 inside the foo declaration but still. and if i want to add a box under the boxes, or a title, appear stuck, even if I use the <br>

CODE
//PAGINA HTML
const char pagehtm[] PROGMEM =
"<!DOCTYPE html> <html> <head> <title>Arduino Ajax I/O</title> \n"
" <script> strLED1 = \"\"; strLED2 = \"\"; strLED3 = \"\";\n"
" function GetArduinoIO() { nocache = \"&nocache=\" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() {\n"
" if (this.readyState == 3) { if (this.status == 200) { if (this.responseXML != null) {\n"
" if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED1.checked = true; }\n"
" else { document.LED_form.LED1.checked = false; }\n"
" if (this.responseXML.getElementsByTagName('LED')[1].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED2.checked = true; }\n"
" else { document.LED_form.LED2.checked = false; }\n"
" if (this.responseXML.getElementsByTagName('LED')[2].childNodes[0].nodeValue === \"checked\") { document.LED_form.LED3.checked = true; }\n"
" else { document.LED_form.LED3.checked = false; }\n"
"  } } } }\n"
" request.open(\"GET\", \"ajax_inputs\" + strLED1 + strLED2 + strLED3 + nocache, true);\n"
" request.send(null);\n"
//Aumentato il periodo di refresh a 5000 ms per non stressare ENC
" setTimeout('GetArduinoIO()', 500);\n"
" strLED1 = \"\"; strLED2 = \"\"; strLED3 = \"\"; } \n "
" function GetCheck() { if (LED_form.LED1.checked) { strLED1 = \"&LED1=1\"; } else { strLED1 = \"&LED1=0\"; } if (LED_form.LED2.checked) { strLED2 = \"&LED2=1\"; } else { strLED2 = \"&LED2=0\"; } if (LED_form.LED3.checked) { strLED3 = \"&LED3=1\"; } else { strLED3 = \"&LED3=0\"; } }\n"
" </script>\n"
"<style type=text/css>"
"<!--"
"#foo        { width: 264px;"
"              margin: auto} "
"#foo div    { float: left;"
"              width: 120px;"
"              border: 1px solid black;"
"              margin: 0 5px;"
"              display: inline }"
"-->"
"</style>"


" <style> .IO_box {margin: auto; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; text-align: center } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>\n"
" </head> <body onload=\"GetArduinoIO()\"> <h1>Arduino Ajax I/O</h1> \n"
"   <div id=foo>"
"      <div>"
"<body onload=\"GetArduinoIO()\"> <h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> \n"
"     </div>"
"      <div>"
" <body onload=\"GetArduinoIO()\"><h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> \n"
"      </div>"
"   </div>"
"<br>"

"   <div id=foo>"
"<center> <h2>Another Title1</h2> </center>"
"      <div>"
"<body onload=\"GetArduinoIO()\"> <h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> \n"
"     </div>"
"      <div>"
" <body onload=\"GetArduinoIO()\"><h2>LEDs Using Checkboxes</h2> <form id=\"check_LEDs\" name=\"LED_form\"> <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 (D6)<br /><br /> <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 (D7)<br /><br /> <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 (D8)<br /><br /> \n"
"      </div>"
"   </div>"
" </body> </html>\n";




This post has been edited by drunkelkid: Apr 11 2020, 05:15 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 12 2020, 01:57 AM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 18,954
Joined: 9-August 06
Member No.: 6



You need to clean that up.

1. Call the page up in a browser. View Source and copy what you see. That way we get rid of the programming bit without me having to clean it up manually.

2. You have, I think it was, 3 BODY in there. You can only have one. This is important.

3. You have two style blocks. Which is allowed and totally fine by the rules, but it gets a lot neater and easier to read and understand if you use only one.

4. This is nitpicking, but please get rid of those XHTML slashes at the end of tags. They are allowed in HTML 5, but they are just a waste of space as they have no meaning at all. They are allowed just so old pages can be easily switched to HTML 5. No point in using them when new pages are created.

Do that and post it again and we'll see what's wrong. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 12 2020, 01:34 PM
Post #7





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



Well. I was able to fix the font size using only one type of box.

responding to your requests, if I copy the source code from the browser, it copies exactly the same as what I sent before, because it is an embedded server that sends all the information so that the browser creates the page.
I already eliminated the bodies of more. I had not noticed
point 4 I did not understand. you mean / n?
at the end use <center> to center everything and it works
If I'm not mistaken, the IOBOX wouldn't be using it anymore

I am presented with the problem that, as it will be seen in the code, if I close the division of the box, and I want to add text, it is added sideways, and I must put many <br>. How do I avoid this?
if instead, I open a new box division it sticks with the ones above. the same as adding text.

CODE
<center>
<style> .IO_box { margin: auto; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; text-align: center } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>
<style type=\text/css\>
<!--
#foo        { width: 264px; margin: auto }
#foo div    { float: left;  width: 120px; border: 1px solid black; margin: 0 5px; display: inline }
-->
</style>
</head>
<body onload=\GetArduinoIO()\>
<h1>Arduino Ajax I/O</h1>
   <div id=\foo\>
   <form id=\check_LEDs\ name=\LED_form\>
     <div>
       <h2>LEDs Using Checkboxes 1-2-3</h2>
       <input type=\checkbox\ name=\LED1\ value=\0\ onclick=\GetCheck()\ />LED 1 <br /><br />
       <input type=\checkbox\ name=\LED2\ value=\0\ onclick=\GetCheck()\ />LED 2 <br /><br />
       <input type=\checkbox\ name=\LED3\ value=\0\ onclick=\GetCheck()\ />LED 3 <br /><br />
     </div>
     <div>
       <h2>LEDs Using Checkboxes 4-5-6</h2>
       <input type=\checkbox\ name=\LED4\ value=\0\ onclick=\GetCheck()\ />LED 4 <br /><br />
       <input type=\checkbox\ name=\LED5\ value=\0\ onclick=\GetCheck()\ />LED 5 <br /><br />
       <input type=\checkbox\ name=\LED6\ value=\0\ onclick=\GetCheck()\ />LED 6 <br /><br />
     </div>
   </div>
   </form>  

<h2>Another things</h2>
<h3>text here </h3>

</center> </body> </html>



Attached thumbnail(s)
Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 12 2020, 01:57 PM
Post #8


Computer says no.
********

Group: WDG Moderators
Posts: 18,954
Joined: 9-August 06
Member No.: 6



QUOTE(drunkelkid @ Apr 12 2020, 08:34 PM) *

responding to your requests, if I copy the source code from the browser, it copies exactly the same as what I sent before, because it isan embedded server that sends all the information so that the browser creates the page.


No, you get the output of whatever programming language you use. I didn't mean the JS, but all the quotes and this for instance this bit.
CODE
const char pagehtm[] PROGMEM =


CODE
point 4 I did not understand. you mean / n?


Yes, like below. The space + slash in the end of the tag is just dead weight. The slash was needed for so called empty elements (they don't have a closing tag) when we were cursed with the XHTML experiment, but XHTML was discontinued several years ago and it won't come back.

XHTML
CODE
<br />


HTML
CODE
<br>



QUOTE
at the end use <center> to center everything and it works


OK. It's outdated as hell, but it will probably continue to work.


QUOTE
I am presented with the problem that, as it will be seen in the code, if I close the division of the box, and I want to add text, it is added sideways, and I must put many <br>. How do I avoid this?


I don't see anything wrong with using BR here.

QUOTE
if instead, I open a new box division it sticks with the ones above. the same as adding text.


Don't understand that. Can you show?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 12 2020, 02:35 PM
Post #9





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



/n I use it because there is a part of the programming that uses it

with what I was saying about gluing, for example, adding other boxes below. I show you in the image.

i used <br> but still attached



CODE
" <center>\n"
" <style> .IO_box { margin: auto; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; text-align: center } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>\n"
" <style type=\"text/css\">\n"
" <!--\n"
" #foo        { width: 264px; margin: auto }\n"
" #foo div    { float: left;  width: 120px; border: 1px solid black; margin: 0 5px; display: inline }\n"
" -->\n"
" </style>\n"
" </head>\n"
" <body onload=\"GetArduinoIO()\">\n"
" <h1>Arduino Ajax I/O</h1>\n"
"   <div id=\"foo\">\n"
"   <form id=\"check_LEDs\" name=\"LED_form\"> \n"
"     <div>\n"
"       <h2>LEDs Using Checkboxes 1-2-3</h2> \n"
"       <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 <br /><br /> \n"
"     </div>\n"
"     <div>\n"
"       <h2>LEDs Using Checkboxes 4-5-6</h2>\n"
"       <input type=\"checkbox\" name=\"LED4\" value=\"0\" onclick=\"GetCheck()\" />LED 4 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED5\" value=\"0\" onclick=\"GetCheck()\" />LED 5 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED6\" value=\"0\" onclick=\"GetCheck()\" />LED 6 <br /><br /> \n"
"     </div>\n"
"   </div>\n"
"   </form>  \n"
" <br>"
"   <div id=\"foo\">\n"
"   <form id=\"check_LEDs\" name=\"LED_form\"> \n"
"     <div>\n"
"       <h2>LEDs Using Checkboxes 1-2-3</h2> \n"
"       <input type=\"checkbox\" name=\"LED1\" value=\"0\" onclick=\"GetCheck()\" />LED 1 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED2\" value=\"0\" onclick=\"GetCheck()\" />LED 2 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED3\" value=\"0\" onclick=\"GetCheck()\" />LED 3 <br /><br /> \n"
"     </div>\n"
"     <div>\n"
"       <h2>LEDs Using Checkboxes 4-5-6</h2>\n"
"       <input type=\"checkbox\" name=\"LED4\" value=\"0\" onclick=\"GetCheck()\" />LED 4 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED5\" value=\"0\" onclick=\"GetCheck()\" />LED 5 <br /><br /> \n"
"       <input type=\"checkbox\" name=\"LED6\" value=\"0\" onclick=\"GetCheck()\" />LED 6 <br /><br /> \n"
"     </div>\n"
"   </div>\n"
"   </form>  \n"
" <br>"
" <h2>Another things</h2> \n"
" <h3>text here </h3>"

" </center> </body> </html>\n";


This post has been edited by drunkelkid: Apr 12 2020, 02:35 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 13 2020, 05:06 AM
Post #10


Computer says no.
********

Group: WDG Moderators
Posts: 18,954
Joined: 9-August 06
Member No.: 6



QUOTE(drunkelkid @ Apr 12 2020, 09:35 PM) *

/n I use it because there is a part of the programming that uses it


Yes, I know that. But I can't run your program and need to clean all of that away before I can look at it in a browser. It's much quicker that you view source and copy the output from there. Or just link to the online page. We need to output, not the input.

You still have the start tag for CENTER up in HEAD. If you need to use CENTER at least use it correctly.

The text you say are to the right is where you want it for me, with the HTML in your previous post, the one without programming code in it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 13 2020, 09:36 AM
Post #11





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



well. Now I could copy the code cleanly. before I think messhal with the \ n in the source code.

QUOTE
You still have the start tag for CENTER up in HEAD. If you need to use CENTER at least use it correctly.

Rookie mistake, I didn't pay attention. it is already corrected biggrin.gif

QUOTE
The text you say are to the right is where you want it for me, with the HTML in your previous post, the one without programming code in it.

It should be as shown in the attached image. would be ideal. but I don't know why if I add something outside the division of the box it is placed on its side

This would be the clean code, right?
CODE

<!DOCTYPE html> <html> <head> <title>Arduino Ajax I/O</title>
<script> strLED1 = ""; strLED2 = ""; strLED3 = ""; strLED4 = ""; strLED5 = ""; strLED6 = "";
function GetArduinoIO() { nocache = "&nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() {
if (this.readyState == 6) { if (this.status == 200) { if (this.responseXML != null) {
if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "checked") { document.LED_form.LED1.checked = true; }
else { document.LED_form.LED1.checked = false; }
if (this.responseXML.getElementsByTagName('LED')[1].childNodes[0].nodeValue === "checked") { document.LED_form.LED2.checked = true; }
else { document.LED_form.LED2.checked = false; }
if (this.responseXML.getElementsByTagName('LED')[2].childNodes[0].nodeValue === "checked") { document.LED_form.LED3.checked = true; }
else { document.LED_form.LED3.checked = false; }
if (this.responseXML.getElementsByTagName('LED')[3].childNodes[0].nodeValue === "checked") { document.LED_form.LED4.checked = true; }
else { document.LED_form.LED4.checked = false; }
if (this.responseXML.getElementsByTagName('LED')[4].childNodes[0].nodeValue === "checked") { document.LED_form.LED5.checked = true; }
else { document.LED_form.LED5.checked = false; }
if (this.responseXML.getElementsByTagName('LED')[5].childNodes[0].nodeValue === "checked") { document.LED_form.LED6.checked = true; }
else { document.LED_form.LED6.checked = false; }
  } } } }
request.open("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4 + strLED5 + strLED6 + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 500);
strLED1 = ""; strLED2 = ""; strLED3 = ""; strLED4 = ""; strLED5 = ""; strLED6 = "";}
  function GetCheck() { if (LED_form.LED1.checked) { strLED1 = "&LED1=1"; } else { strLED1 = "&LED1=0"; } if (LED_form.LED2.checked) { strLED2 = "&LED2=1"; } else { strLED2 = "&LED2=0"; } if (LED_form.LED3.checked) { strLED3 = "&LED3=1"; } else { strLED3 = "&LED3=0"; } if (LED_form.LED4.checked) { strLED4 = "&LED4=1"; } else { strLED4 = "&LED4=0"; } if (LED_form.LED5.checked) { strLED5 = "&LED5=1"; } else { strLED5 = "&LED5=0"; } if (LED_form.LED6.checked) { strLED6 = "&LED6=1"; } else { strLED6 = "&LED6=0"; } }
</script>
<style> .IO_box { margin: auto; border: 1px solid blue; padding: 0 5px 0 5px; width: 120px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; text-align: center } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style>
<style type="text/css">
<!--
#foo        { width: 264px; margin: auto }
#foo div    { float: left;  width: 120px; border: 1px solid black; margin: 0 5px; display: inline }
-->
</style>
</head>
<body onload="GetArduinoIO()">
<center>
<h1>Arduino Ajax I/O</h1>
   <div id="foo">
   <form id="check_LEDs" name="LED_form">
     <div>
       <h2>LEDs Using Checkboxes 1-2-3</h2>
       <input type="checkbox" name="LED1" value="0" onclick="GetCheck()" />LED 1 <br /><br />
       <input type="checkbox" name="LED2" value="0" onclick="GetCheck()" />LED 2 <br /><br />
       <input type="checkbox" name="LED3" value="0" onclick="GetCheck()" />LED 3 <br /><br />
     </div>
     <div>
       <h2>LEDs Using Checkboxes 4-5-6</h2>
       <input type="checkbox" name="LED4" value="0" onclick="GetCheck()" />LED 4 <br /><br />
       <input type="checkbox" name="LED5" value="0" onclick="GetCheck()" />LED 5 <br /><br />
       <input type="checkbox" name="LED6" value="0" onclick="GetCheck()" />LED 6 <br /><br />
     </div>
   </form>  
   </div>
<br>   <div id="foo">
   <form id="check_LEDs" name="LED_form">
     <div>
       <h2>LEDs Using Checkboxes 1-2-3</h2>
       <input type="checkbox" name="LED1" value="0" onclick="GetCheck()" />LED 1 <br /><br />
       <input type="checkbox" name="LED2" value="0" onclick="GetCheck()" />LED 2 <br /><br />
       <input type="checkbox" name="LED3" value="0" onclick="GetCheck()" />LED 3 <br /><br />
     </div>
     <div>
       <h2>LEDs Using Checkboxes 4-5-6</h2>
       <input type="checkbox" name="LED4" value="0" onclick="GetCheck()" />LED 4 <br /><br />
       <input type="checkbox" name="LED5" value="0" onclick="GetCheck()" />LED 5 <br /><br />
       <input type="checkbox" name="LED6" value="0" onclick="GetCheck()" />LED 6 <br /><br />
     </div>
   </form>  
   </div>
<br> <h2>Another things</h2>
<h3>text here </h3> </center> </body> </html>


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
drunkelkid
post Apr 22 2020, 04:58 PM
Post #12





Group: Members
Posts: 7
Joined: 10-April 20
From: Argentina
Member No.: 27,276



any idea? wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 06:49 AM
Post #13


.
********

Group: WDG Moderators
Posts: 8,496
Joined: 10-August 06
Member No.: 7



The layout in the last screenshot might be because of the floated DIVs. Giving #foo "overflow: auto" might limit the floating to the DIVs inside it only.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd August 2020 - 01:00 PM