I'm bad with CSS, using bootstrap & now I would like to set an icon just before a , I'd like to create a "blog" talking about bets and so I have to add the type of sport so I chose to use icons in the list
screenshot here
So I tried to do this simply with but as you can see it's not good, the list is supposed to make 1 line, not 2, also the icon should be at the left
I tried to deal with ":before" but didn't succeed, also I'd like a good way to do it, for me to change dynamically the icon with PHP (by updating the list)
What is the best way to make it ? Thanks
Flexbox is the way to align things these days. This might help get you started:
ul {list-style:none;}
li {display:flex;align-items: center;}
img {margin-right:10px;}
<ul>
<li><img src="http://placekitten.com/49/51" /> John Doe</li>
<li><img src="http://placekitten.com/50/50" /> Peter Rabbit</li>
</ul>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Here is an another way :
ul {
list-style: none
}
li {
position: relative;
background: url(//dummyimage.com/10x10) no-repeat center left;
padding-left : 20px;
}
<ul>
<li>John Doe</li>
<li>Peter Rabbit</li>
</ul>
Related
can any body explain me the out put, which my code is genrating, as it
driving me nuts, there is no syntax error, i am following the tutorial
on you tube and i was able to genrate the right out put with this
code, but today i decided that i will understood this code fully, and
it driving me crazy
**Note: No syntax error, just looking for explanation about the out put, and please read the comment in the code
First look at the code html**
<html>
<head>
<title>TODO supply a title</title>
<link rel="stylesheet" href="menu.css"></link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" >
<ul id="menu">
<li >Home</li>
//This section is giving me trouble, please see below i explain my problem in detail there
<li >about
<ul class="hidden">
<li >who are we</li>
<li >what we do</li>
</ul>
</li>
//This section is giving me trouble, please see below i explain my problem in detail there.
<li >portfolio
<ul class="hidden">
<li >photography</li>
<li >web & interface design</li>
<li >illustration</li>
</ul>
</li>
<li >news</li>
<li >contacts</li>
</ul>
</body>
</html>
and this is my css
/*strip styling from the list*/
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
}
li{
display:inline-block;
float:left;
margin-right:1px;
}
//only this section of the code is driving me crazy, and in the explanation i type this section again and again. Please see below in there i explain my problem in detail.
li a {
display:block;
}
Problem if you look at the out put in this link
https://codepen.io/arif_suhail_123/pen/pwdYXp
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style li a {display:block}
and after that i completly lost my mind when i added min-width property,
see the link https://codepen.io/arif_suhail_123/pen/ZyaZEj i changed nothing, i only added in li a {} min-width, so my style is this li a {display:block; min-width:140px;}
i still have the problem, what we do appear under the portfolio, this problem i desribed already(in the last paragraph), but after adding min-width:140px; i have new problem; if you look at the out put, web & interface design appear under the news, first of all i did not expected it to appear there, and second of all if you read the html code web & interface design is second li means why it appearing in this order first li -- photography, than third li -- illustration and second li -- web & design, under the news??
Can any body please explain me,
and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position, i ran one example, and it confirm what i think may be i am wrong but have look https://codepen.io/arif_suhail_123/pen/LLOaXv
on this link third box did not appear, as i was expecting it, not to appear,
and about the block element, i understand that they suppose to appear on the new line.
see these two picture i think my question will become more clear.
Absolute Positioning - Take the Width of Parent
Ok so I looked through your code and I made a small example out of it. I took out some things to make the example more clear (and because of width limitations in these posts).
Ok, first, look at the background colors I put on both of the <ul> lists. Your sub-lists are in red. Your main <ul> is in yellow.
Now you are correct in saying that position: absolute; takes the element out of the "flow" of other elements in order to display them as usual. Absolute positioning takes a lot of special attention.
Run the code and look at the words "Who are we". Now this makes you think, why does "photograpy" appear next to it? What happened to "what we do"? Its behind it. The reason this occurs is because both of those lists are positioned absolutely under their parent element. Without giving anything like top or left they are just going to overlap eachother and the latter ends up displaying ontop of the previous list. Absolutely positioned elements don't care what is next to them or if they overlap something. They go where ever you tell them to and thats typically what absolute positioning is for. You tell it to break away from normal flow, and you give it a specific location to appear.
Play around with the code, delete "photography" and "illustration" and run it again. You'll see that "what we do" was there all along, just behind it.
Also see Russell's Answer.
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
background-color: yellow;
}
ul ul{
display: block;
padding: 5px;
background-color: red;
}
#secondList{
background-color: pink;
}
ul li{
float:left;
margin: 5px;
width: 120px;
}
ul ul li a{
display: block;
}
<ul id="menu">
<li>Home</li>
<li>about
<ul class="hidden">
<li>who are we</li>
<li>what we do</li>
</ul>
</li>
<li >portfolio
<ul class="hidden" id="secondList">
<li>photography</li>
<li>illustration</li>
</ul>
</li>
<li>news</li>
</ul>
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
They do appear as block elements. I think the 'problem' is that you have li declared as inline-block elements. So you have block elements in a container set to inline block which effectively makes them display as inline-block.
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style
This is being displayed the same, but the pen you entered has some kind of arbitrary width assigned to it. I'm not sure if it's because of the viewport settings or not, but try shortening some of the link names and you'll see it's actually displaying them the same as the other list. IE inline-block just like was specified.
Can any body please explain me, and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position
Absolute positioning takes the element out of normal flow and positions it relative to it first positioned parent. The browser does not set aside space for the element either.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm not 100% sure if I understood the problem but I'll give it a shot:
position: absolute;
makes the element ignore every single element. That is what makes them on top of each others. It just displays whereever you tell it to display. Wich is in the top left corner by default. And that's also why there is an
z-index: ...;
the z-index indicates wich layer the element is displayed on, for example z-index: -10; makes it on layer -10 and an element with z-index -9 would display on top I think(pretty sure, otherwise its the opposite) there are infinite layers btw
Hope this is what you were looking for
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
I have a page with a default CSS file. In this page I have:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<br>
<ul>
<li>B1</li>
<li>B2</li>
</ul>
<br>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
<br>
I can view the default CSS but I cannot amend
ul {
paddind-left:15px;
}
what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.
I have used (cssreset-min.css) but all the css was eliminated. Any help?
Give the parent ul a new class:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<ul class="newClass">
<li>B1</li>
<li>B2</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
Then do:
ul.newClass {
paddind-left:0px;
}
This will work in all browsers. If you're not concerned about that, use #Andy answer.
if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult
If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work
The nth-child selector targets specific children, in this case the 3rd and 4th
Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)
#container ul:nth-child(2) li { padding-left: 0; }
You can try something like this :
http://jsfiddle.net/4X62Y/
Here's another solution without changing the HTML:
ul:not(:nth-child(3)) {
padding-left:15px;
}
Example
This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by #Alex Thomas .
lets say i have the following markup:
<ul class="editor">
<li>
Modules
View
Add
</li>
<li>
Sections
View
Add
</li>
</ul>
how do i float 'view' and 'add' to the right so that the right so that they appear in the same order as the html?
right now if i do
.editor li a:nth-child(2), .editor li a:nth-child(3){
float:right;
}
i will get a row that looks like:
Modules Add View
but i want
Modules View Add
Is this possible just via CSS3?
edit:
sorry i should have mentioned, i dont have access to the html. only css
Text-align the li right and float only the 1st a left.
.editor li {
text-align: right;
}
.editor li a:nth-child(1) {
float: left;
}
I assume that you've already hidden the default list bullets.
Just change the order.
<ul class="editor">
<li>
Modules
Add
View
</li>
<li>
Sections
Add
View
</li>
</ul>
Try the CSS3 flexible box model with explicit distribution and the box-ordinal-group property (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) - and if you can't make it work with floats, maybe it offers some alternative of attaining the same effect. Other than that, of course you can change the DOM order or simulate the layout by other means, but that's not advisable if you want to preserv your structure.
reorganize your DOM so that Add is before View and float them to right.
I'm trying to create a "workflow" bar on a web page.
The items in the workflow might be of different lengths.
There might be enough items to fill the width of the screen, hence the flow needs to wrap onto the next line.
I'm using left floating divs to do this.
However, I'd like the divs to take an appropriate amount of screen width.
If only three items can fit on one line, then I'd like those items to fit evenly on the line, taking into account each individual items width.
All I can get at the moment is for the final div on a line to fill up the remaining space, which often means my items are all left aligned, e.g. I can get a layout like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
but I actually want it to look something like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
if you see what I mean.
Do I need to use tables for this rather than floating divs?
just a couple of other pointers. You should not have empty li tags, that is not semantically correct. Also in an ideal world you should not give id attributes layout names.
Personally I'd place the starting image on the ul and then place the closing image on the last li.
could probably do with seeing the surrounding markup to understand what elements you have in place. You could try having a surrounding div with margin: 0 auto;
You're probably going to need a surrounding div for each level.
Don't waste your time just go here:
http://www.cssmenubuilder.com/build-breadcrumb-menu
Thanks for the prompt responses. I'll try out what you are suggesting.
I'm currently trying to do this using a list, although I also got nowhere with divs.
I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.
The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.
I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.
<html>
<body>
<STYLE>
#nav, #nav ul {
list-style: none;
margin: 0px;
width: 700px;
}
#nav li {
list-style: none;
float: left;
padding-left: 10px;
padding-right: 10px;
width: auto;
background-image: url(/lookandfeel/images/navMenuDiv.gif);
background-repeat: repeat-x;
}
li#ending {
background-image: url(/lookandfeel/images/navMenuRight.gif);
background-repeat: no-repeat;
}
li#start {
background-image: url(/lookandfeel/images/navMenuLeft.gif);
background-repeat: no-repeat;
}
.navigation a {
background-image: url(/pdr/images/navigation.gif);
}
</STYLE>
<ul id="nav" style="width: 100%;border: 1px solid">
<li id="start" />
<LI >
<SPAN class="navigation" >AAAAAAAAAA</SPAN>
</li>
<LI >
<SPAN class=navigation >BBBB</SPAN>
</li>
<LI >
<SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
</li>
<LI>
<SPAN class=navigation>DDDDDDDDD</SPAN>
</li>
<LI>
<SPAN class=navigation>EEEEEEEE</SPAN>
</li>
<LI>
<SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
</li>
<li>
<SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
</LI>
<li id="ending" />
</ul>
</body>
</html>
Setting the li elements to display: inline, and giving the ul a text-align: justify property will get you part way there (in FFX3 and IE7 at least). However, it does raise some complications when applying the background images.
As much as I dislike to say things can't be done, I think I have to agree with #johnners on the surrounding element for each navigation level. Even if you were to use table layout CSS you would need some sort of surrounding element for each 'row' in order to get the spacing on the left and right correct.