I have a PHP code which generates a dynamic questionnaire. To make the story short, i must keep the structure of the DIVs exactly as it its. I cannot modify, add or delete the DIVs, they must stay exactly as they are now. But I can modify the CSS and the CLASSES. With that being said, how can i display Question 2 and Question 3 to be inline?
I made this simple example here, it will be easier for you to see it what i mean:
http://jsfiddle.net/radusl/4H68P/
<style type="text/css">
.bigclass {
margin-left: 10px;
}
.smallclass {
margin-left: 20px;
}
.question {
font-weight: bold;
margin-left: 10px;
}
</style>
<div class="question">Question 1</div>
<div class="bigclass">
<div class="smallclass">
Text1_a
</div>
<div class="smallclass">
Text1_b
</div>
</div>
<div class="question">Question 2</div>
<div class="bigclass">
<div class="smallclass">
Text2_a
</div>
<div class="smallclass">
Text2_b
</div>
</div>
<div class="question">Question 3</div>
<div class="bigclass">
<div class="smallclass">
Text3_a
</div>
<div class="smallclass">
Text3_b
</div>
</div>
<div class="question">Question 4</div>
<div class="bigclass">
<div class="smallclass">
Text4_a
</div>
<div class="smallclass">
Text4_b
</div>
</div>
<div class="question">Question 5</div>
<div class="bigclass">
<div class="smallclass">
Text5_a
</div>
<div class="smallclass">
Text5_b
</div>
</div>
As others have stated, this is not ideal markup for what you need, but it is technically possible by adding an extra class to question2, in my example .inline, and doing some tricks with float: left; and clear: left;
Check out this updated fiddle
.inline {
float: left;
}
.inline + .bigclass {
float: left;
clear: left;
}
You can't do this, without wrapping question and bigclass in another div
HTML
<div class="inline-question">
<div class="question">...</div>
<div class="bigclass">...</div>
</div>
CSS
.inline-question {
display: inline-block;
}
Without wrapping, you can only show question and bigclass side by side
Q1 T1 Q2 T2 Q3 T3 ...
CSS
.question, .bigclass {
display: inline-block;
}
You ment something like this?
http://jsfiddle.net/4H68P/1/
use the float function:
float: left;
Hope this helps you out.
I'm not sure to understood what you want but if it's what I think you can add
display:inline;
in your smallclass.
If you want this for only some questions, create a new class :
.inlineClass {
display:inline;
}
and call this class for the answers you want :
<div class="smallclass inlineClass">
***** EDIT *********
And if you want answers be side by side the question number, add the class like this :
<div class="question inlineClass">Question 3</div>
<div class="bigclass inlineClass">
<div class="smallclass inlineClass">
Text3_a
</div>
<div class="smallclass inlineClass">
Text3_b
</div>
</div>
I have this result :
Question 1
Text1_a
Text1_b
Question 2
Text2_a
Text2_b
Question 3 Text3_a Text3_b
Question 4
Text4_a
Text4_b
Question 5
Text5_a
Text5_b
Is it not what you want ?
Related
I'm trying to center an img in a div without success and I have tried many CSS hacks. I'm missing something and I have no idea what I'm doing wrong.
Markup
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
</div>
CSS
.img-guarantee img{
display: inline-block;
margin: 0 auto;
}
First of all, using a column outside a row is not advised whatsoever. I take it that you use Bootstrap so it's only appropriate to use a column within a row.
Secondly, you can create another class by the name .text-center, add the CSS rule: text-align: center; and finally add the newly created class to the parent element which in this case is <div class="col-md-4">
This is the final result: https://jsfiddle.net/ydeeLLrd/1/ (including a fix to the first issue)
This should work:
.img-guarantee img{
margin: 0 auto;
}
.img-guarantee {
text-align: center;
}
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
I have in my layout three elements like this:
<div id="container">
<div id="element1"/>
<div id="element2"/>
<div id="element3"/>
</div>
shown this way:
| element1 | element2 | element3 |
I want them to show like this:
element1 | element2
element3 |
The closest thing I've achieved to do is this:
element1 |
element3 | element2
I can't achieve to align element1 and element2
Does anybody knows how to do it only with CSS ?
Here is the working example
<div id="container">
<div id="element1" class="boxes">
This is elem1
</div>
<div id="element2" class="boxes">
This is the elem2
</div>
<div id="element3">
This is elem3
</div>
</div>
<style>
.boxes{
border:1px solid black;
box-sizing:border-box;
width:50%;
float:left;
}
</style>
This is how you use div tags :
<div class="exampleclass">Example Text</div>
An example made by Sören Kuklau can be seen here
Here is an example Fiddle using the float: left css property
Your question is quite open-ended (no context whatsoever), there's a very simple solution, which is to use float: left...
#element1, #element2, #element3 {
float: left;
width: 50%;
box-sizing: border-box; // <- Not necessary for this basic example unless you add padding, etc.
}
<div id="container">
<div id="element1">El 1</div>
<div id="element2">El 2</div>
<div id="element3">El 3</div>
</div>
define them all as float: left and add clear: both to the third one.
<div id="container">
<div id="element1">El 1</div>
<div id="element2">El 2</div>
<div id="element3">El 3</div>
</div>
#container > div {
float: left;
}
#container{
position:relative;
}
#element3{
bottom: -40px;
display: block;
position: absolute;
}
In my explaination the #container #element3 and #container > div are ids of div so please dont read as comment thanks
You can't do it only using CSS because CSS can't do real DOM modifications for that you have to use jQuery.
I hope this link can help you:
What is the easiest way to order a <UL>/<OL> in jQuery?
I'm working on some trading ingame items site, that's not important here.
My actual code is:
<div class="trade">
<h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
</div>
<div class="arrow">
<img src="http://i.imgur.com/dusRcnt.png" />
</div>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
<span class="item-rarity">Battle-Scared</span>
<div class="red"></div>
</div>
</div>
</div>
JSFIDDLE
As you can see, the arrow is not at same height as rest. But, if I will remove bootstrap (remove first html line), it works just fine. Problem is, I need to use bootstrap on my site. How can I fix that?
check this - https://jsfiddle.net/7curr49y/1/
the changes i made are these -
.items-holder
{
background-color: #E7E7E7;
border-radius: 4px;
padding: 10px;
display: inline-block;
border-collapse: separate;
border-spacing: 10px 0px;
vertical-align:middle;
}
changed "inline-table" to "inline-block" and added "vertical-align:middle".
hope that helps!
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>
I have the simple table generated by js and I'd like to change some properties of columns and rows like background color, width statically. I can extend the row and col classes directly in CSS file or do it in html.
Example (CSS approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col, .foo {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
Example (html approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="col foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
In my opinion the second approach is more convenient for dynamically changing elements rather then static ones. However the first one obscures the structure of the html which can cause some problems with understanding the javascript. My question is which approach would be better in this case?