I'm trying to make the footer for my website. It's supposed to contain 5 lines of contact information, white text on a black background and white space between. So essentially it will look like 5 black strips on top of each other with white text on them.
The problem is that all the black strips turn out the same length, when I want them to be roughly the length of the text. I tried floating the list items instead of the <ul> and put line breaks after each one. The backgrounds were now the right size but I was unable to add the white space between them without messing it up.
HTML:
<ul>
<li>Company name</li>
<li>Adressadress 123444</li>
<li>023311 postal code</li>
<li>+358 12385495955</li>
<li>info#company.com</li>
</ul>
css:
ul {float:left;
li {
list-style:none;
background-color:black;
color:white;
text-transform:uppercase;
font-weight:bold;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
}
}
Any ideas?
Adding span tags around the text should solve your problem.
<ul>
<li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
ul {
margin:10px;
}
ul li {
margin-bottom:15px;
}
ul li span {
background:black;
padding:5px;
color:white;
}
http://jsfiddle.net/uwPcv/
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 am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
So, in my header, I have a horizontal list of links. Next to them, I wanted a search bar, but when I insert it next to my links, all of them now appear behind my body div.
HTML:
<ul id="unordered">
<li>LInk1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li><input type="text"></li>
</ul>
CSS:
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:400px;
}
#unordered li a{
text-align:center;
color:white;
text-decoration:none;
font-size:18px;
list-style-type:none;
}
#unordered li {
list-style-type:none;
display:inline;
padding-left: 0px;
padding-right: 55px;
padding-bottom: 15px;
}
#unordered li link {
list-style-type:none;
margin-bottom: 10px;
}
Here's screenshots of before and after...
Before: http://prntscr.com/2jfi8i
After: http://prntscr.com/2jfhxz
Thank you.
Edit: I noticed that I forgot form tags. After I inserted them, it's no longer hidden behind the body div, but the links are now above the text box.
So I think what's happening is your #unordered is not wide enough with the position you give it. The text field shifts down. The following fixed it
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:100px; /*It's 100px instead of 400px, the ul is wider*/
}
There are other ways to fix it, the above is just one way.
Update
I removed the form tags, unless you really want those? (they were not in the original code) I then removed the height:0px which resolved the body appearing to be in front of the ul element. It was not allowing for any padding/margin below the text element. Again though, if the page stretches (the width increases) out the text input re-renders inline with the rest.
Please see Fiddle Update
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/
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;
}