I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;
Related
I want to add a border all around my html text, but I can't manage to do this. I have tried this method, but the border is split when it meets the <br>:
<div id='page' style='width: 600px'>
<h1><span style='border:2px black solid; font-size:42px;'>Actually looking <br>for a job in IT</span></h1>
</div>
Does someone have an idea how to do this?
put style='border:2px black solid; font-size:42px;' on the h1 tag instead of the span tag
I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Use display: inline-block; on <span>.
Like:
span {
display: inline-block;
}
Have a look at the snippet below:
span {
display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Hope this helps!
Here's a better version, with the actual boxes next to eachother, instead of inside eachother and moved via margins.
<div id="one-off-pricing" style="width:800px; overflow: hidden;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
</div>
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
</div>
</div>
<p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
Try this
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Try this (and see the notes and explanations below):
.one-off-pricing {
width: 800px;
}
.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}
p {
font-weight:bold;
}
<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>
1) Why put all the inline CSS in a stylesheet?
It massively helps with scaling and maintenance.
2) Why use a class for "one-off-pricing" instead of an id?
When CSS selectors start to get long and complex, ids in long chained selectors can mess things up. For this reason it's often (not always but often) better to use a class instead of an id.
3) Why use <p> instead of a <span>?
Because the element in question is best described as a paragraph.
4) Why use display:inline-block instead of a float?
Because you simply don't need floats in this situation.
I am having code like this
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%">2</span>
</div>
currently it is showing like this.
here padding right is not working. it should be such that 2 should be having 10% padded from right of this div.
Is there any other style tag which can do give such padding from right.
by default, inline elements are rendered left to right aligned, unless you specify float property for them.
That means, in a given horizontal line, first span T1 will be rendered adjacent to the left border of the parent and then span 2 will be rendered adjacent to span T1.
so, your padding-right is never being utilized, as the last span is already far away from right border, unless you make it to move right either by float:right or giving it a margin
try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style=" float:right; padding-right:10%;">2</span>
</div>
see this fiddle
This will give the desired effect
<span style="float:right; margin-right:10%">2</span>
Use this:-
<span style="float:right; padding-right:10%">2</span>
Good explanation by above contributors, but you can also try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%;padding-left:60%">2</span>
</div>
Infact, this is about how you take the structure of your CSS, if we consider Left to Right precedence which Manish mentioned, we can also adjust our requirement by inserting a left padding of 60%.
So, this problem can be solved in both ways, if you want to adjust something in between "T1" and "2" you should use mine one, otherwise both are fine.
Hope you got it.
I have some HTML:
<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>
The Div is changing the spacing on my document, so I want to use a span for this instead.
But span is not centralizing the contents:
<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>
How do I fix this?
EDIT:
My complete code:
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<span style="border:1px solid red;text-align=center">
This is some text in a div element!
</span>
</body>
</html>
A div is a block element, and will span the width of the container unless a width is set. A span is an inline element, and will have the width of the text inside it. Currently, you are trying to set align as a CSS property. Align is an attribute.
<span align="center" style="border:1px solid red;">
This is some text in a div element!
</span>
However, the align attribute is deprecated. You should use the CSS text-align property on the container.
<div style="text-align: center;">
<span style="border:1px solid red;">
This is some text in a div element!
</span>
</div>
Please use the following style. margin:auto normally used to center align the content. display:table is needed for span element
<span style="margin:auto; display:table; border:1px solid red;">
This is some text in a div element!
</span>
The align attribute is deprecated. Use CSS text-align instead. Also, the span will not center the text unless you use display:block or display:inline-block and set a value for the width, but then it will behave the same as a div (block element).
Can you post an example of your layout? Use www.jsfiddle.net
span.login-text {
font-size: 22px;
display:table;
margin-left: auto;
margin-right: auto;
}
<span class="login-text">Welcome To .....CMP</span>
For me it worked very well. try this also
On top of all the other explanations, I believe you're using equal "=" sign, instead of colon ":":
<span style="border:1px solid red;text-align=center">
It should be:
<span style="border:1px solid red;text-align:center">
Span is inline-block and adjusts to inline text size, with a tenacity that blocks most efforts to style out of inline context. To simplify layout style (limit conflicts), add div to 'p' tag with line break.
<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
Just use word-wrap:break-word; in the css. It works.
How can I put an <img> next to a <div> so the image vertically aligns in the middle?
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
I know how to do it using a table:
<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>
But I wonder if I could do it without a table.
Thanks in advance!
Rain Lover
To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.
Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:
background-position:0px center;
This will give you the higher degree of control that I think you're after.
With block elements such as img and div, you cannot position them vertically in the centre of something without actually having a something (element) to vertically centre them inside of.
Having said that it is still not possible aside from using some sort of hack. The far simpler method would be to use a relative position on one of the elements and offset its position such that it visually creates the same effect, or use a margin/padding to do the same.
It can be done the following way. There is no easy way to center unless you have it inside an element with a specific height and can be played with. This can be viewed at http://jsfiddle.net/jawilliams346614/CvpUB/1/
<div>
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
<div style="font:10pt Arial;padding:5px;background-color:#ccc;">
<span style="float:right">No. 1</span>
<span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>
now if you increase your font size, you will have to change padding to:
padding-top: 5px; // change in sync with bottom to center in text
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;