I have this website I'm working on:
https://dl.dropbox.com/u/10264776/Web%20sustn.sk/odbory/fotograficky_dizajn.html
For some reason right of this box (Ctrl+F 1992) presents a weird behavior where the content of the li is pushed by few pixels, it's not is the styles, they're same for all of them, however I noticed that it's the only ul that doesn't have it's content push from one line to another like the others in the table do.
Any ideas how to fix this? All help will be greatly appreciated.
Just try to comment on style.css line 119
.list {
border-color: #BBBBBB;
border-style: solid;
border-width: 1px 0;
margin-bottom: -1px;
/*width: 560px;*/
}
By doing this your problem will solve only for that element but your width will remove from entire elements where .list is applied so you need to tweak on that particular table where 1992 is mention. It is table behavior it expands the table cells as per the text and layout or breathing space. So you need to put the width on that particular table cells.
Use like this
.list ul li
{
list-style: none;
padding:0;
margin:0;
padding-left: 1em;
text-indent: -.7em;
}
li:before
{
content: "• ";
color: red; /* or whatever color you prefer */
}
for a detailed explanation look here
Related
I need to remove border bottom of last li row.
like this below image example
Thank You in advance :)
jsfiddle.net/foLacgg3/1
If, you don't want to rewrite code, you can use pseudo elements to the , and give it background of your page(this will only hide border from any of last elements inside ul)
ul {
list-style: none;
padding-left: 0;
display: block;
position: relative;
overflow: hidden;
}
ul:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: #F3F5F6;
/*(page background)*/
width: 100%;
}
https://jsfiddle.net/foLacgg3/2/
Looking at the code snippet you posted after my first answer:
it seems you either have either three or four elements per row with a breaking point at around 740 pixels in between the two options.
it seems you have 9 list elements in the grid.
if you don´t know the number of li elements - then I can help you if you can use SASS instead of CSS.
Therefore, presuming you know the number of li elements - let´s say your code is like this:
#media only screen and (max-width:740px) {
ul.menu li:nth-child(n+7) { border:none;}
}
And for other screen sizes:
#media only screen and (min-width:740px) {
ul.menu li:last-child {border:none;}
}
Hi I am new to HTML and CSS so I was wondering what the difference was between
putting all of my paddings, display, list-style-types under
ul#tabs. For example if I put display:inline; inside ul#tabs, my text wont appear in the same line. I am confused as too what the difference is between putting values under #tabs li, and #tabs li a and #tabs. My guess is that any property under #tabs, will happen to anything inside including a's, p's or whatever else I included within the ID of tag and #tabs li a, does things only to <a>'s within the tab id. If this is the case what does ul#tabs li do, and why cant i put display: inline , in my ul#tabs{} portion of the code. Sorry for the long questions. Thank you.
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
}
ul#tabs li {
display: inline; /* puts them on same line */
}
ul#tabs li a {
color: #42454a; text-decoration: none; /* take off underline */
padding: 0.6em 0.7em 0.8em 0.9em; /* padding within a makes space between a */
}
Drew is correct, you are looking at specificity in this example and what it applies to. Think of CSS as boxes and, in most cases, what gets changed in the outer box affects the inner boxes, too. :) If you want to affect the middle box with padding, you place your padding there, but keep in mind the inner most box will be affected as well. In that sense, you can apply values very broadly:
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
color: #42454a; text-decoration: none;
padding: 0.6em 0.7em 0.8em 0.9em;
}
ul#tabs li {
display: inline; /* puts them on same line */
}
This is one way you could affect all text, and lists under #tabs, but make sure individual lists are inline.
Adding things like:
ul#tabs li {
Just makes it even more specific, as you are targeting individual list items under a list parent with the ID "tabs."
A better way to write this is:
#tabs li
It would look for an element with the ID "tabs" and see if there is list items under it. Now, if you want to be really technical, you could use a class for list items as well, such as "mylistitems," then write:
#tabs.mylistitems
This would search for an element (in this case ul) with ID "tabs," then begin looking for another element under it with the class "mylistitems." Technically, you can also do:
ul li {
}
This would target all list items. Sorry it was a long response, hopefully this gives you some unique ways to write CSS selectors.
So I have a <ul> that I need to style. I'm using +'s to style it. It looks like this:
+ abc
+ 123
+ hello
The problem I'm having is that I'm not able to center the +'s with the actual li's. As in, So the pluses are ever so slightly off, when I need them to vertically align with the li text. Anyone know what I'm doing wrong?
Here's a link to the fiddle.
CSS
ul {
list-style: none;
display: table-cell;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
vertical-align: middle;
display: inline;
padding-top: 0;
margin-bottom: .5em;
}
Edit
Okay, I didn't mean align the #content with the other ul. I meant vertically center the + with the abc.
vertical-align: text-bottom;
http://jsfiddle.net/2FZx6/4/
You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.
(Actually, the default value baseline works pretty well.)
Resources
MDN: vertical-align
Without using a reset stylesheet such as Eric Meyers or Normalize.css your browser automatically adds default styles. In my case, chrome added 40px to your ULs.
I explicitly set the padding to 20px and it looks good, but I'd implement a reset stylesheet if you can to save headaches down the road.
JsFiddle
ul {
padding-left:20px;
margin:0;
}
You may have better luck just using a background image on your li instead of using the "+" - This way you can position the "+" (as a background image) however you'd like.
http://css.maxdesign.com.au/listutorial/master.htm
This method gives you a bit more fine tuning.
http://jsfiddle.net/2FZx6/9/
li:before { // add these bits
position: relative;
top: -.2em ; // fine tune this however you want
}
Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the li (text) and the li:before (font awesome icon):
li {
/* li css */
line-height: 16px;
li:before {
/* li before css */
line-height: 12px;
}
Hope that helps someone else too!
I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle
it is now like this:
|
|
| here
and I want to be:
|
| here
|
Just increase the line-height of the li elements in question.
#iconlist li {
line-height: 2em;
}
Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. So use something like this:
#iconlist li {
padding-left: 22px;
background: url(20x20-icon.png) left center no-repeat;
line-height: 22px;
list-style: none;
}
Forget setting the list style image and use the following css...
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
Note the vertical align style, set it to minus figures to push text upwards.
Source of answer.
Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.
The only realistic way to achieve this is with background-image:
ul li {
background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
list-style-position: outside;
padding-left: 250px;
line-height: 160px; /* vertical height of image */
}
JS Fiddle demo.
This does, however, fail badly if the text of the li wraps to a second (or third) line.
Try vertical-align: middle; (css)
I just wonder where is this space between the end of the image and the end of the li's are coming from:
http://bluesys.ch/lussy/
its just a simple UL > li > img
spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg
code:
div#slider {
border: 5px solid #fff;
}
div#slider ul li {
border-bottom: 1px solid pink;
}
div#slider ul li img {
border-bottom: 1px solid green;
margin: 0;
}
note that all margins and paddings are set to 0 by my reset.css
can someone help me out? I colored the borders that you can see the spacing i speak of. I use firefox.
Try setting the line-height to 0 for those images and/or LI elements. Currently you have that set to 1.4 in the body, and the img will inherit that. A brief test of setting line-height: 0 in Firebug made the images stack flush.
If you want to get rid of the gaps, you could try:
li {
margin-bottom: 0;
padding-bottom: 0;
}
You may want a special class for those li elements tho, so that the CSS that gets applied doesn't do it to ALL your li elements on the site.
But, what's wrong w/ the gap? I kind of like it. Helps frame each image...
Images are inline elements just like text and by default they are positioned on the font base line leaving space for the ascender. There are different ways to stop that:
line-height: 0 (as suggested by Robusto)
display: block
vertical-align: bottom