Best way to rebuild this figure with html/css
0
I have these (simple) question. I want to rebuild the following figure with html/css
http://s1.directupload.net/file/d/3429/iunjflkr_png.htm
My suggestion 1 (just pseudo-code without any css formatting):
table within a div
<div>
<table>
<tr>
<td>blue</td>
<td>headline</td>
<td>
<input type="radio" ..><input type="radio" ..>
</td>
</tr>
</table>
</div>
My suggestion 2 (just pseudo-code without any css formatting):
divs within a div
<div>
<div>blue</div>
<div>headline</div>
<div>
<input type="radio" ..><input type="radio" ..>
</div>
</div>
Is one of my suggestions usable or is there any other (better) suitable solution?
html css html-table
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
add a comment |
0
I have these (simple) question. I want to rebuild the following figure with html/css
http://s1.directupload.net/file/d/3429/iunjflkr_png.htm
My suggestion 1 (just pseudo-code without any css formatting):
table within a div
<div>
<table>
<tr>
<td>blue</td>
<td>headline</td>
<td>
<input type="radio" ..><input type="radio" ..>
</td>
</tr>
</table>
</div>
My suggestion 2 (just pseudo-code without any css formatting):
divs within a div
<div>
<div>blue</div>
<div>headline</div>
<div>
<input type="radio" ..><input type="radio" ..>
</div>
</div>
Is one of my suggestions usable or is there any other (better) suitable solution?
html css html-table
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
add a comment |
0
0
0
I have these (simple) question. I want to rebuild the following figure with html/css
http://s1.directupload.net/file/d/3429/iunjflkr_png.htm
My suggestion 1 (just pseudo-code without any css formatting):
table within a div
<div>
<table>
<tr>
<td>blue</td>
<td>headline</td>
<td>
<input type="radio" ..><input type="radio" ..>
</td>
</tr>
</table>
</div>
My suggestion 2 (just pseudo-code without any css formatting):
divs within a div
<div>
<div>blue</div>
<div>headline</div>
<div>
<input type="radio" ..><input type="radio" ..>
</div>
</div>
Is one of my suggestions usable or is there any other (better) suitable solution?
html css html-table
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
I have these (simple) question. I want to rebuild the following figure with html/css
http://s1.directupload.net/file/d/3429/iunjflkr_png.htm
My suggestion 1 (just pseudo-code without any css formatting):
table within a div
<div>
<table>
<tr>
<td>blue</td>
<td>headline</td>
<td>
<input type="radio" ..><input type="radio" ..>
</td>
</tr>
</table>
</div>
My suggestion 2 (just pseudo-code without any css formatting):
divs within a div
<div>
<div>blue</div>
<div>headline</div>
<div>
<input type="radio" ..><input type="radio" ..>
</div>
</div>
Is one of my suggestions usable or is there any other (better) suitable solution?
html css html-table
html css html-table
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
edited Nov 15 '18 at 22:51
Brian Tompsett - 汤莱恩
4,2421339102
4,2421339102
asked Nov 2 '13 at 19:32
user2948467user2948467
915
asked Nov 2 '13 at 19:32
user2948467user2948467
915
asked Nov 2 '13 at 19:32
user2948467user2948467
915
915
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
You can do that using only div and some css. Avoid using table here as Oriol said.
Here is a sample code:
HTML code:
<div>
<div class='MainBar'>
<div class='arrow'></div>
<div class='text'>
<p>text goes here</p>
</div>
<div class='ja'>
<p>Ja</p>
</div>
<div class='nein'>
<p>Nein</p>
</div>
</div>
</div>
And CSS code:
.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}
.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.text{
width: 660px;
height: 80px;
float: left;
}
.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}
answered Nov 2 '13 at 20:08
NabilNabil
253725
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
add a comment |
1
You should use <table> only for tabular data. If not, it's semantically incorrect.
Your case doesn't seem tabular data to me, so I suggest you to use divs or spans.
Or, if you consider it a list, you could also use
<li>
Wird das Merkmal zweiseitig toleriert?
<ul>
<li>ja</li>
<li>nein</li>
</ul>
</li>
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
Thanks for your answer! Maybe i could use a list within a div like:<div><ul><li>...</li><li>...</li><li>...</li></ul></div>the li-elements should be arranged horicontally, what do you mean?
– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19745961%2fbest-way-to-rebuild-this-figure-with-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can do that using only div and some css. Avoid using table here as Oriol said.
Here is a sample code:
HTML code:
<div>
<div class='MainBar'>
<div class='arrow'></div>
<div class='text'>
<p>text goes here</p>
</div>
<div class='ja'>
<p>Ja</p>
</div>
<div class='nein'>
<p>Nein</p>
</div>
</div>
</div>
And CSS code:
.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}
.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.text{
width: 660px;
height: 80px;
float: left;
}
.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}
answered Nov 2 '13 at 20:08
NabilNabil
253725
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
add a comment |
0
You can do that using only div and some css. Avoid using table here as Oriol said.
Here is a sample code:
HTML code:
<div>
<div class='MainBar'>
<div class='arrow'></div>
<div class='text'>
<p>text goes here</p>
</div>
<div class='ja'>
<p>Ja</p>
</div>
<div class='nein'>
<p>Nein</p>
</div>
</div>
</div>
And CSS code:
.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}
.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.text{
width: 660px;
height: 80px;
float: left;
}
.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}
answered Nov 2 '13 at 20:08
NabilNabil
253725
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
add a comment |
0
0
0
You can do that using only div and some css. Avoid using table here as Oriol said.
Here is a sample code:
HTML code:
<div>
<div class='MainBar'>
<div class='arrow'></div>
<div class='text'>
<p>text goes here</p>
</div>
<div class='ja'>
<p>Ja</p>
</div>
<div class='nein'>
<p>Nein</p>
</div>
</div>
</div>
And CSS code:
.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}
.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.text{
width: 660px;
height: 80px;
float: left;
}
.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}
answered Nov 2 '13 at 20:08
NabilNabil
253725
You can do that using only div and some css. Avoid using table here as Oriol said.
Here is a sample code:
HTML code:
<div>
<div class='MainBar'>
<div class='arrow'></div>
<div class='text'>
<p>text goes here</p>
</div>
<div class='ja'>
<p>Ja</p>
</div>
<div class='nein'>
<p>Nein</p>
</div>
</div>
</div>
And CSS code:
.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}
.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.text{
width: 660px;
height: 80px;
float: left;
}
.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}
.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}
answered Nov 2 '13 at 20:08
NabilNabil
253725
answered Nov 2 '13 at 20:08
NabilNabil
253725
answered Nov 2 '13 at 20:08
NabilNabil
253725
answered Nov 2 '13 at 20:08
NabilNabil
253725
253725
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
add a comment |
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
Thank you! I was not sure whether using so many divs is good style of coding or not. If there is no other solution i try it with the divs solution.
– user2948467
Nov 2 '13 at 20:15
add a comment |
1
You should use <table> only for tabular data. If not, it's semantically incorrect.
Your case doesn't seem tabular data to me, so I suggest you to use divs or spans.
Or, if you consider it a list, you could also use
<li>
Wird das Merkmal zweiseitig toleriert?
<ul>
<li>ja</li>
<li>nein</li>
</ul>
</li>
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
Thanks for your answer! Maybe i could use a list within a div like:<div><ul><li>...</li><li>...</li><li>...</li></ul></div>the li-elements should be arranged horicontally, what do you mean?
– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
add a comment |
1
You should use <table> only for tabular data. If not, it's semantically incorrect.
Your case doesn't seem tabular data to me, so I suggest you to use divs or spans.
Or, if you consider it a list, you could also use
<li>
Wird das Merkmal zweiseitig toleriert?
<ul>
<li>ja</li>
<li>nein</li>
</ul>
</li>
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
Thanks for your answer! Maybe i could use a list within a div like:<div><ul><li>...</li><li>...</li><li>...</li></ul></div>the li-elements should be arranged horicontally, what do you mean?
– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
add a comment |
1
1
1
You should use <table> only for tabular data. If not, it's semantically incorrect.
Your case doesn't seem tabular data to me, so I suggest you to use divs or spans.
Or, if you consider it a list, you could also use
<li>
Wird das Merkmal zweiseitig toleriert?
<ul>
<li>ja</li>
<li>nein</li>
</ul>
</li>
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
You should use <table> only for tabular data. If not, it's semantically incorrect.
Your case doesn't seem tabular data to me, so I suggest you to use divs or spans.
Or, if you consider it a list, you could also use
<li>
Wird das Merkmal zweiseitig toleriert?
<ul>
<li>ja</li>
<li>nein</li>
</ul>
</li>
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
edited Nov 2 '13 at 20:00
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
answered Nov 2 '13 at 19:44
OriolOriol
161k38269376
161k38269376
Thanks for your answer! Maybe i could use a list within a div like:<div><ul><li>...</li><li>...</li><li>...</li></ul></div>the li-elements should be arranged horicontally, what do you mean?
– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
add a comment |
Thanks for your answer! Maybe i could use a list within a div like:<div><ul><li>...</li><li>...</li><li>...</li></ul></div>the li-elements should be arranged horicontally, what do you mean?
– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
Thanks for your answer! Maybe i could use a list within a div like:
<div><ul><li>...</li><li>...</li><li>...</li></ul></div> the li-elements should be arranged horicontally, what do you mean?– user2948467
Nov 2 '13 at 19:50
Thanks for your answer! Maybe i could use a list within a div like:
<div><ul><li>...</li><li>...</li><li>...</li></ul></div> the li-elements should be arranged horicontally, what do you mean?– user2948467
Nov 2 '13 at 19:50
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
@user2948467 Yes, it's an other possibility, but I'm not sure if a single question could be considered a list (a list with only one item is a bit weird)
– Oriol
Nov 2 '13 at 20:02
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
The final result should be something like this: `<ul> <li>Figure 1 like above</li> <li>Figure 2 like above</li> <li>Figure n like above</li> </ul>' My question relates to a correct building of one figure. Therefore the idea using a list within a list contains at least 3 elements. First => blue square with an arrow inside; Second => headline ; Third => Group of radio buttons. I hope it got more clear.
– user2948467
Nov 2 '13 at 20:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19745961%2fbest-way-to-rebuild-this-figure-with-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
