I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
Related
I have created two div tags. One containing /hello/ the other containing /world/. My issue is i want both of these to be on the same line so I put in the code display: inline, but that did not work. I also want /hello/ to have a background color of yellow. so I have tried giving them classes but that did not work either. Please simple answers because I am only 12
You might be messing up with class names or while importing the CSS files Here is the example that works fine for me
See if this is what you want,
<div class="firstDiv">
Hello
</div>
<div>
World
</div>
And my CSS as,
div{
display:inline;
}
.firstDiv{
background-color: red
}
You can also try inline CSS to get the same effect,
<div style="display:inline;background-color:red">
Hello
</div>
<div style="display:inline">
World
</div>
Div are block elements. Which means by default they will place on a new line. You will need to use css to make them display inline.
<div style="float:left; border:1px solid red; width:200px; height:400px;"></div>
<div style="float:left; border:1px solid blue; width:200px; height:400px;"></div>
See the demo here: http://jsfiddle.net/2L878bcu/1/
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.
I would like to implement a web page which contains tabs, the tabs are on top, bottom and left hand side of the page, like following:
Where the middle space is used for content change when user clicked a tab.
I am wondering What is the best way to implement this kind of layout?
I intend to use html table, but I am not sure if table cell can be CSS to a tab-like component? And how to do that?
Or is there any other way to implement this which is better than a table?
Do not use a table, as this is not tabular data.
Instead, you should consider using divs and styling with display:table; etc.
So, you would use
display:table;
display:table-cell;
display:table-column;
display:table-row;
Then you could use jQuery to make the divs clickable and to show() and hide() the content.
EDIT
Here is a simplified version to get you started:
HTML
<div id="page">
<div id="top_row">
<div class="top_row_cell" id="tab1">Tab 1</div>
<div class="top_row_cell" id="tab2">Tab 2</div>
<div class="top_row_cell">Tab 3</div>
</div>
<div id="middle_row">
<div class="middle_row_cell"></div>
<div class="middle_row_cell empty"></div>
<div class="middle_row_cell empty"></div>
</div>
<div class="content" id="content1">This is the content</div>
<div class="content hidden" id="content2">THIS IS THE OTHER CONTENT</div>
</div>
CSS
div#page{
display:table;
border-collapse:collapse;
width:500px;
position:relative;
}
div#top_row, div#middle_row{
display:table-row;
}
div.top_row_cell, div.middle_row_cell{
display:table-cell;
width:160px;
height:50px;
border:1px solid red;
border-collapse:collapse;
text-align:center;
}
div.middle_row_cell.empty{
border:none;
}
div.content{
display:block;
position:absolute;
top:52px;
left:166px;
background:red;
color:white;
width:334px;
height:51px;
}
div.hidden{
display:none;
}
JS
$('#tab1').click(function(){
$('.content').addClass('hidden');
$('#content1').removeClass('hidden');
});
$('#tab2').click(function(){
$('.content').addClass('hidden');
$('#content2').removeClass('hidden');
});
Working Example: http://jsfiddle.net/jasongennaro/9W7NE/
NOTE:
the jQuery is super simplified and is just for show. More robust logic is needed
I only coded clicks for tabs 1 and 2
You could use tables. Check out http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml for example.
But I would prefer just using <div>'s and position them nicely using CSS.
I have stubbed out an example for you that doesn't use a table.
It doesn't look very nice because I've added coloured borders to show you where each part is.
http://jsfiddle.net/Sohnee/Hvx2x/
may be you could start with something like this
http://jsfiddle.net/xVDtW/ a css table, I just don't have time now to solve the right margin thing. if you have time I can do this in a few hours or so, just let me know
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/