I need UL list to be placed inside the p tag. I have added inside p tag only but it is not exactly starting inside p tag. And also p tag has 1600px of width so I need the li elements to extend beyond that width (I have scroll bar for tat). Now li elements are flowing in multiple lines.
Here is my demo
http://jsfiddle.net/VvuU4/2/
Unfortunately for you, HTML does not allow ul (or div) to sit inside p, so browsers will automatically correct the DOM from this:
<p>
<ul><li>etc</li></ul>
</p>
...to look something like this:
<p></p>
<ul><li>etc</li></ul>
<p></p>
You can verify this using their built-in developer tools. So you'll need to change your markup. Perhaps change the p to a div?
As for the second part of the question, this is a good place to start:
ul.list2 {
width: 500px; /* adjust to suit your needs */
overflow: auto;
white-space: nowrap;
}
ul.list2 li {
display: inline-block;
vertical-align: top;
}
It sets the ul to use a scrollbar when necessary, and tells inline elements within it not to wrap. It then sets the list items to be inline block items, which makes them sit side by side (like display: inline;) but behave more like block items (i.e. margin, padding, width, height work as you'd expect).
Related
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
hi i used bootstrap vertical navbar in my home page and now i want to make horizantal navbar in my gallery page.
but new navbar also displaying vertically. i want to make bootstrap default navbar for this page.
i used this code segmant to make vertiacl navbar in home page.
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
now i want to undo these navbar to horizantal
thnx
You should learn what these properties you are using do..
Display:block; :
Quote from W3C
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).
Float:none;:
Quote from Noah Stokes
The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.
Floating means, very generally, to push a block-level element to the left or to the right, manipulating the flow in relation to other block elements.
Block means to define the type of element and the space it takes up on the page. The majority of HTML elements are either going to be block or inline elements by default. The display properties is used to manipulate these defaults. Block elements, or elements manipulated with the display properties to be block elements will take up all of the horizontal space of it's parent, or, very generally, often begin at the beginning of a line and end at the end of the line.
Change your float:none; to float:left; and display:block; to display:inline-block;
Here is my JsFiddle
When I inspect the size of the anchor tags with Chrome developer tools it shows me 144px*18px for the 1st element and 310px*18px for the 2nd element.
I want to know why it does not take the height and width of the containing element and how it is being calculated.
.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px solid black;
}
.wide {
height: 160px;
width: 280px;
border: 5px solid black;
}
<div class="gallery">
<img class="normal" src="">
<img class="wide" src="">
</div>
The CSS 2.1 spec says
The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details.
The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.
For height, the spec says:
10.6.1 Inline, non-replaced elements
The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how.
So 18px is arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.
For width, the spec says
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
in other words, the width is determined by the <a> element's contents, paddings, borders and margins.
For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px
For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px
Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a> element and at the end of the second <a> element are being dropped. The spaces at the end of the first <a> element and the start of the second <a> element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a> element, so that's why a space participates in the width of the first <a> element but not in the width of the second one.
use display:inline-block in anchor
.gallery a{
display:inline-block;
}
here is updated jsFiddle File
also remove margin from image and add it to anchor
.gallery a{
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
anchor is always display: inline by default. To make anchor took it's child space, you must give him a display:block, or in this case, display:inline-block so that they will be inlineand block.
a{
display:inline-block;
}
JSFiddle
Read this question for more info.
The a tag's need to be styled as well
I added
.gallery a {
display: inline-block;
}
I had the same issue, for example, I have HTML generated by GitHub flavored markdown, so I can have paragraphs containing anchor with images inside.
Actually setting display: inline-block in anchors did not work for me; I did also set display: block in images. Using Sass nested something it looks like this:
.gallery {
a {
display: inline-block;
img {
display: block;
}
}
}
Instead of applying {display: inline-block} on <a>
, try applying {float: left} on the child of <a>. The height of the <a> would now match the height of the child.
Another solution is to use a negative margin-bottom attribute with the img element (the size depends on the font, so, it's better to be sure of the used font by using an #font rule, 0.2em was fine for the font I use, moreover, using em units is a good idea as the size depends on the font, so, if you change the font-size later, you won't have to change this CSS code):
HTML:
Something, <img src="whatever.png" alt="Whatever" />, something else.
CSS:
a:link {
display: inline-block;
}
img {
margin-bottom: -0.2em;
}
That way, all the texts are well aligned with the image, whatever it's in a link or not, I've done that to have all image + text blocks displayed the same way, but you might use a > img instead of just img in the above code.
By the way, I came up with this solution because I had something like:
a[something]:link::after {
content=" something to add"
}
so, the img {display: block;} was not an option for me as the “ something to add” would have been under the image and the rest of the text after, this would have cut the reading flow.
I have a very simple HTML with CSS code, don't understand why, the css rule isn't applied to the a tag, but it works on p tags. If I wrap the a tag inside a p tag, the css works, but I can't understand why it doesn't work without wrapping it.
Here's a full example http://jsfiddle.net/juaning/84Xn2/
css: div p, a {
margin-top: 35px;
font-size: 24px;
}
html: <div class="family">
Luigi
</div>
The box model of an a tag is different than the box model of a p tag. Add this one line:
div p, a {
display: inline-block;
By default, an a tag has the display: inline box model, so that you can easily place it in the same line as regular text (i.e. inside a p). The p tag is more of an entity on it's own, always being a 'block' or 'box' of text, therefore the p has display: block; by default.
Fiddle: http://jsfiddle.net/ECAbd/1/
a tag is an inline element, and p is a block level element, margin won't apply to inline element, and hence you need to make your a tag, block or inline-block.
div p, a {
margin-top: 35px;
font-size: 24px;
display: block;
}
Now, here, again it depends, what you want your a tag to be, if you want multiple a tags to line up inside your div you will have to use inline-block and if you use display: block; it will take entire horizontal space and will render another element below it.
Take for example you've a horizontal menu, where you line up your elements, you will probably use ul and li but suppose you take div for each menu item, you may need display: inline-block;, this will have all properties of block level element, but it will render them inline leaving the other space empty for other elements to take up, but if you want to render each element below one another, you need to use display: block;(not for div tag or p tag, they are block level elements by default, inorder to change their behavior, you need to mention that in your CSS)
List of block level elements
List of inline elements
Anchors have display: inline by default, while paragraphs are (if I recall) display: inline-block. Margins do not apply to inline elements. You can easily fix this by explicitly setting display to inline-block in your CSS.
Add this rule to the css -
display: block;
Another solution replace your code "div p, a" by following
div p, div a {
font-size: 24px;
line-height: 100px;
display: inline; }
Notice I used line-height (same as box height) to make vertical align center rather than margin-top. But this is not the solution for multi line.
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;