Okay I am a newbie regarding CSS and while during a tutorial I got completely lost.
As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.
Okay and now the question. In the tutorial it makes an unordered list:
header nav ul li {
display: inline-block;
padding: 0;
}
There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:
header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}
But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?
Considering the few points below you should get it why the anchor has display: block
1- The display:block is set to the anchor which is inside the li... not directly to the li itself.
Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.
2- The default display property of anchor is inline ... this means that you don't have control on width and height.
3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height
BTW you can also use inline-block with the anchor and it will work
Related
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
My <ul> element has some <li>'s containing text, and one containing an image. I want them to appear in a single line, centered horizontally within the parent element, and also their <li> contents centered vertically and horizontally. I have the following code:
http://codepen.io/littlemissintrovert/pen/NqqLRr
By far, it's going great, however, I have an issue with the <li> containing an <img>. It's positioned higher than other <li> elements.
I can't find much resources to help me with this issue. Maybe I suck with searching but I found this link: List items appearing below other list items containing images. It seems we have the same problem and someone suggested there to use:
display: table-cell;
vertical-align: middle;
However, when I try to use it, I am unable to center the <ul> horizontally, relative to the size of its parent container. Plus, I can't space out my <li> elements using margin.
As much as possible, I really want to avoid defining the width. I want my elements to span across the screen 100%.
for fixing img issue
Add display:block to the a tag as it is a inline element
Add vertical-align:middle for the img tag as img is a inline element it will align it vertically middle
you can also use this technique to add the margin on the left side of the li
#mainnav li + li{
margin: 0 0 0 3em;
}
which will only give style to the next element
demo - http://codepen.io/victorfdes/pen/pJJORw
Just add vertical-align:middle to image will solve your issue:
Check your updated Codepen Here.
First I'll clarify that I'm not trying to display list items inline. I know you can do that by using css:
li { display: inline; }.
What I'm trying to do is position two ul's next to eachother using a relative position, but it should work without the relative position also.
I've tried
ul { display: inline; }
but it doesn't work. They won't appear on the same line. Funny since every other block element that I've tried to display inline like, div, li works just fine. I've done a lot of experimenting with making sure that width of the elements is something that could fit next to eachother and putting the ul's inside div's that display inline. So my question is, is ul a tag that is impossible to display inline?
P.S. If it is impossible I'll probably go with a absolute position to line them up together, maybe I could use float also but float would not work well in my webpage layout.
Use inline-block. See fiddle
ul { display: inline-block; }
P.S. I used the fiddle from #jmeas's comment, but assumed you wanted to keep display: block on the lis
In the code presented on the gist : https://gist.github.com/1341600
I am trying to use ul/li elements for grouping together some search form elements (instead of table).
When inspecting the output in the browser (Chrome 15/FF 7 with firebug) the ul element seems to have height 0 and the li elements are displayed outside of it. When I am commenting out the
float: left; statement from ul.search-inputs li CSS declaration then the height of the ul element is displayed correctly.
Could anybody point me to a solution in order to see correctly the height of the ul element?
That's not a bug, it's a feature!
The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).
The 3 options in this case are to:
Use a known height value and apply it to the ul element.
ul { height: 150px; }
Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.
ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
Float the container itself. As there is no need to shrink it if it floats by itself.
ul { float: left; }
Add following css:
ul.search-inputs {
overflow: hidden;
}
Also see this jsfiddle.
This behavior complies to W3C spec. It's deliberately, but can be a bit confusing first time. Container of the floated content must be shrunken to allow another inline content to flow around it's own one.
E.g. if you have a
<p>
<img class="float" height="1000">
sometext
</p>
<p>
sometext
</p>
you probably would expect that some text from the second p flow image.
If you need a container with width and height you can either specify them manually, or apply css overflow:auto or float:left to container;
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.