Databases
StackOverflow2013
Postsdbo
POHow to jump to a tab position (or equivalent) in html or css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to jump to a tab position (or equivalent) in html or css
    primarykey
    data
    text
    <p>I am trying to format a web-based quiz page with a sample of code containing embedded text boxes. I would like the text boxes to be over to the right, away from the code. The current result looks like this: <img src="https://i.stack.imgur.com/e5wcg.png" alt="T"></p> <p>The code is below. The text boxes are where the user should enter the answers, but I want them shifted over to the right. I originally tried to do this using two div boxes, but that has its own problems that are even worse. This way, the text boxes are on the same line as the code, guaranteed.</p> <p>I tried span, using css to set a big width, or perhaps setting the left edge. Ok, I was wrong, it doesn't work.</p> <p>The first question is how to achieve this. The second is that in order to see what was going wrong, I set the background color of the span to be something ugly. As you can see, the color of the span in css seems to continue through to the next line. Is this a bug? The behavior is the same in firefox and IE10.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Weird Div Placement Problem&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="styles3.css" media="all"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="bg"&gt; &lt;div class="content"&gt; &lt;div class="bounds"&gt; &lt;div class="question"&gt; &lt;a name="q10"/&gt;&lt;span class="number"&gt;10.&lt;/span&gt; Please fill in the values indicating what will be computed by the program. &lt;/div&gt; &lt;div class="code"&gt; void loop() { &lt;br/&gt; int a = 1; &lt;br/&gt; int b = 2; &lt;br/&gt; int c = a+b; &lt;span class="rc"/&gt; //c = &lt;input type="text" name="a10c" size="10"/&gt; &lt;br/&gt; int d = c / 3; &lt;span class="rc"/&gt; //d = &lt;input type="text" name="a10d" size="10"/&gt; &lt;br/&gt; int e = 7 / 2; &lt;span class="rc"/&gt; //e = &lt;input type="text" name="a10e" size="10"/&gt; &lt;br/&gt;} &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's the css:</p> <pre><code>div { padding: 10px; margin: 10px; } div.bg { background-color: #4040A0; width: 800px; border-radius: 10px; } div.code { width: 55%; spacing: 0px; background-color: red; color: black; font: normal 16pt Verdana, fixed; } span.rc { left: 400px; background-color: #d00040; } div.bounds { background-color: #202090; color: white; border: 1px solid black; border-radius: 10px; font: normal 15pt/18pt Arial; } .number { font: bold 24pt Arial; margin: 10px; } text{ font: normal 14pt verdana; } </code></pre> <p>Ok, so FakeRainBrigand suggested I use clear: both and float: right. I believe I did what you asked, but I will repost the code. This is similar to what happened before with two div boxes. There is some really bad behavior. Basically the two div boxes do not stay on the same line even though it would seem they should. Here's the image (same on firefox, but this is IE10).</p> <p><img src="https://i.stack.imgur.com/V54c0.png" alt="enter image description here"> The new css is:</p> <pre><code>div { padding: 10px; margin: 10px; } div.bg { background-color: #4040A0; width: 800px; border-radius: 10px; } div.code { width: 55%; spacing: 0px; background-color: red; color: black; font: normal 16pt Verdana, fixed; } div.q { clear: both; display: block; font: normal 12pt Verdana, fixed; } /* div.rc { float: right; display: block; } span.rc { left: 400px; background-color: #d00040; }*/ div.bounds { background-color: #202090; color: white; border: 1px solid black; border-radius: 10px; font: normal 15pt/18pt Arial; } .number { font: bold 24pt Arial; margin: 10px; } text{ font: normal 14pt verdana; } </code></pre> <p>and the html is:</p> <p> Weird Div Placement Problem 10. Please fill in the values indicating what will be computed by the program. </p> void loop() { int a = 1; int b = 2; int c = a+b; //c = int d = c / 3; //d = int e = 7 / 2; //e = } <pre><code> &lt;/div&gt; </code></pre> <p> </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDov
    1. USDov
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODid you try `float: right` on the input elements?
      singulars
      1. POHow to jump to a tab position (or equivalent) in html or css
      1. USKen Keenan
    2. COWhat were the problems of using multiple divs?
      singulars
      1. POHow to jump to a tab position (or equivalent) in html or css
      1. USsam_7_h
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload