I've enlarged the menu space, but still when I add a new item to the menu, it becomes like on the screenshot (vertical). I'm very new in html css. How should I fix that, to make them next to another horizontal?
To make list elements appear horizontally, you must add li{ display:inline-block; } to your css for the navigation. li elements are at default, block level elements which are displayed on a line for themselves, so to get them to behave and display beside each other, you must display the li elements as inline-block or inline. Inline-block would be better suited for your purposes for further styling of the li elements.
Related
I have a very basic CSS problem.
I have a floating image in my top-left corner with a margin-right. The content is made of paragraphs and lists with bullets. I want my lists to have a padding-left for more visibility and my bullets appear in "list-style-position: outside" (text must be aligned).
My problem is, when a list is displayed next to my floating image, ul padding is not applying.
Here is an annotated screenshot for your comprehension :
This kind of behavior happens with FF and Chrome. With IE, it is worse because the bullets appear at the very left of the floating image...
Edit : css property "ul{overflow: hidden;}" is not an option because I want to avoid this :
I'm sorry I can't show you a piece of code because it is a Drupal website and the content of the node is generated by wysiwyg module and written by webmaster and editors. I have no access to the generated structure. The content is not fixed and lists could appear everywhere in the text.
This Fiddle represents well my situation: http://jsfiddle.net/34Cuf/
I think you have to get rid of this:
list-style-position: outside
This is putting your bullets points outside of padding. In the box model, anything outside the border box collapses during a float.
Lists have initial left padding on them (so there is enough space to show the bullet) so unless you give the ul a padding that is greater than this initial value, your list will actually move left instead of right.
Have a look at this example
To make your ul behave properly next to a floated element you just need to float it too: Example
Padding won't apply to list at right of floating div, because it stays behind floating div.
It doesn't count from after div, it still counting from left as ul after floating div.
It happens because the div "floats" with text.
To understand it better, play it ul li padding in my example in fiddle
See that a put a little margin in floating div to you see that the content of ul extends form the left margin behind floating div.
You'll have to apply a bigger right margin to the floating div.
I'm having some real trouble with CSS here... it's very odd.
I have a UL element wrapped within a Nav tag. I'm trying to apply some padding to the individual links and for some reason the padding isn't moving the element down and expanding the container as a result.
Here's a screenshot of what's happening:
As you can see, the padding is being noticed by the browser, but it's just overlapping with the element above (which is being floated). I can't find a way to push it down, or at the very least make the container expand to hold it properly.
For reference, I'm using the Skeleton responsive boilerplate as a base.
Here's a link to it live: http://richardsonweb.co.uk/
Try display:inline-block; on your li elements
I have a sidebar in which there are certain li elements as an index, and on hover of each of the li elements, I have a specific image appearing 'over' the li elements (eg: position:relative;top:-25px;)
Let's say I hover over the first li element and the rollover images appears fine. However, the space between 1st and 2nd element increases while this hover is occuring. I am not able to understand why this is happening and I want to stop this from happening i.e. the image should appear over the li item without no spacing problem but only a simple rollover.
Here is a fiddle of the problem I am talking about: http://jsfiddle.net/PF35v/3/
I would use absolute positioning in this case, I usually do when dealing with images and top/side nav bars that are "glued" to one side of a screen. Alternatively, in situations in which I am set on using relative vs. absolute I use a little cheat....Here is what I changed in the above fiddle
ul#nav a:hover+img {
display: block;
position:relative;
top:-35px;
margin-bottom:-48px;
}
UPDATED FIDDLE
http://jsfiddle.net/PF35v/9/
However, if your images are all different sizes, you would need to individually set up the top and margin-bottom positioning.
adding "position:absolute;" to ul#nav a:hover#first_id+img is stopping the LIs being pushed down (tried this on Chrome). Did you try this?
How can I make the content text on this page, http://morriswebsitedesign.com/about.html, line up with the navigation links? I used to use the absolute property or tables, but now I'm trying to figure out how to use float.
I want it to look like this:
A BBB
where A is nav and B is content.
In CSS when using float, the item you add float to should also have a width.
http://jsbin.com/azetuk/
But when floating you need to know about clearing those floats. Here is a good read:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
If you want logo beside content too, wrap menu and logo in div then float that element
http://jsbin.com/itaqok/
Your text and navigation links are too wide to fit in their containing div. If you want them to line up, you'll have to increase the size of the containing div, or decrease the size of the text and/or navigation links.
When I use the following style, for example, they line up perfectly on my computer:
#content { width:700px; }
You'll have to wrap the miniature logo and the navigation links in a div with the style float:left;. You can then remove the float:left from the miniature logo and the ul.
First remove the float:left from the #content, that will make your #content to be at the right side of the menu.
Second if you don't want part of the text to be under the menu, give it an overflow:hidden.
#menu{float:left}
#content{overflow:hidden}
This way you won't need to give any width to your content.
In order to make some space between them you can give a margin-right and margin-bottom to your menu.
#menu{margin-right:20px; margin-bottom:20px}
I see that in your css your 'p' have margin-top. And that makes the top of your content not to be aligned to your menu. You can use css3 to remove the margin of the first element.
#content p:nth-child(1){margin-top:0}
EDIT:
To align the #content with the logo:
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
First you need your logo and your menu act as a column, to get that both must have the same width, and be floated to the left. The clear left will make your menu to move under the logo.
Then select your #content remove any float:left and give it a display:inline, that way it won't act as a block anymore.
The margin-bottom of the menu is to make that your text won't move under your menu, but you can try giving your menu a bigger height.
So essentially I have a horizontal menu using ul and li elements styled with CSS which has a fixed height attribute for the ul but since the number of li elements are too many they are spilling over into multiple lines ...since the height of the ul is fixed, the li elements appear on the next line just fine but they are outside of the 'block' of the ul...so any further html content that appears starts showing inline with the li elments on the 2nd line?
I hope I have been able to describe the problem. I wish this was a publicly accessible site, for the CSS gurus to help with using firebug or web inspector.
use min-height on your UL, not height
use float:left on your LIs
use display:block on your A tags and put all other styling on the A tags. (DO NO STYLE THE LI TAGS OTHER THAN FLOAT:LEFT)
you can expand the width of the
container tag holding the ul, you do not have enough width for all the list elements
if you can not enlarge the container try to cut down the width of the li's, using less padding and margin in between them.
you can all so use a min-width property to bee sure that they will have enough space