ive got a list set up with a background image set to the left of each of the lines of text
although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
heres the code im using..
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
http://i.stack.imgur.com/rV1LM.png
Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.
.price-features li span{
display: block;
padding-top:5px;
}
Related
I have a full browser width list with a background color (which changes color on hover). However I want the li text to be text-align:left, have a max-width and the left and right margins to be equal – but the background color to still be full browser width. How do I do this?
I have made a JSfiddle here.
As soon as I put a max-width on the li, the background color will obviously shrink to the max-width. Is there a way to just target the text within the list?
<div class="case_study_links">
<ul>
<li>Abbey Meadow Flowers<br>Helping to grow a sustainable florists</li>
<li>Collins Environmental<br>Differentiating ecologists from competitors</li>
<li>University of Oxford<br>Branding for research project on young migrants</li>
<li>Small Woods<br>New brand brings credibility to organisation</li>
<li>Good Energy<br>Rebranding helps double customer numbers</li>
</ul>
</div>
.case_study_links li {
list-style: none;
font-size:1.8rem;
text-align:left;
border-top:1px solid white;
}
.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
wrap Your text in a <span class="myTexts"> and add css properties to it:
.myTexts
{
max-width:100px; // or anything you want
margin:auto
}
U have your CSS on wrong levels:
Define background-color on the ul (maybe width: 100%; too, didn't test)
Define borders and width: 100%; on the li
Define max-width: ; on the a, or the elements within a
As suggested, you could wrap a part of the text in a span element.
I would refrain from using "br", you could do this:
<li><p>Abbey Meadow Flowers</p><p>Helping to grow a sustainable florists</p></li>
Change the P elements accordingly for semantic HTML to H1,H2,H3,span,p, etc.
Note that span is an inline element, and will not automatically take up full width. Use display: block; in your CSS to fix this
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here