I have a problem with aligment of two li elements inside a div because in the next example
HTML
<div id="menu-container">
<div class="menu-left">
<ul id="menu-principal" class="menu">
<li>Hola</li>
<li>Hola2</li>
</ul>
</div>
<!-- More code -->
</div>
The CSS code is in the next link and I use that html structure because that is what is generated by placing a menu in wordpress.
http://jsfiddle.net/Soldier/KhLhR/1/
I have a simple code with two li elements and I want to align horizontally with 50% of width for each but doesn't work.
Edit
Well.. All responses involve float: left, but did not want to use float: left because this causes overflow to ul and I have to use overflow: hidden .. I thought there was another factor that was failing but they all give +1 and accept the answer that answered first.
Thanks
Add:
float: Left;
to the css class of the li elements of the menu (in this rule):
".menu-left ul li {"
After the "width: 50%"
The float property specifies whether or not a box (an element) should float.
See http://www.w3schools.com/cssref/pr_class_float.asp
This is purely to do with the fact that your width specification is more than you've allowed for the child element in relation to it's parent elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%; // should be less than 50%
}
Updated fiddle: http://jsfiddle.net/KhLhR/3/
http://jsfiddle.net/Soldier/KhLhR/1/
.menu-left ul li {
display:inline-block;
float:left;
vertical-align: top;
width: 50%;
}
Add a left float to your li elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%;
float: left;
}
Related
Is it possible to create a horisontally styled menu (like on image below) without using absolute positioning or JS?
Trying to create a menu. It uses standard unordered list to display.
Here is what I'm trying to achieve:
(Green list is a submenu of "How are you". It has a line break because it is limited by width.)
And currently what I have is this:
This is the pen: http://codepen.io/olegovk/pen/NNREMY
And the code:
HTML
<nav>
<ul>
<li>Hello</li>
<li>How are you
<ul>
<li>Allright!</li>
<li>And you?</li>
<li>Fine</li>
<li>La-la-la</li>
<li>Bla-bla-bla</li>
<li>Cheerio!</li>
</ul>
</li>
<li>Good bye</li>
</ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>
CSS
.clear {
clear: both;
}
p {
background-color: lightgrey;
}
li {
float: left;
list-style: none;
display: list-item;
margin: 0 0.5em;
}
li li {
margin: 0 1em;
}
li li a {
color: green;
}
nav ul ul{
max-width: 300px;
}
I know it's possible with absolutely positioning child lists or with JS. But absolute positioning of child lists takes them out of doc flow. As a result they overlap with content below them. Also I can't use JS.
for li li use this css style .
li li {
margin: 0 1em;
position:relative;
left:-110px;
}
and give a id to good bye li and then write it css
e.g
<li><a href="#" id='someId'>Good bye</a></li>
li #someId{
position:relative;
left:-150px;
}
Seems that it's impossible.
Here is another similar question: Position: absolute and parent height?
With regards to the menu, to achieve the desired result, the only solution is to have top level menu and sub-menu in different lists. That way no need to position sub-menu (second level list) absolutely.
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
Styling li tags with float:left is a standard way to create horizontal navigation bars. But whenever I do this, the entire navigation bar list gets separated from the containing div.
Removing float:left would fix the problem, but let's assume I want to do it this way.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
News
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
Any insight is much appreciated!
Edit:
Solution is to add empty div after the list, or style the containing div with overflow:hidden.
After looking for an explanation why this happens, I found a great link explaining everything!
http://css-tricks.com/all-about-floats/
The trick is, working with float's - use clearfixes. In your case, add the following, before header closing tag </div>:
<div style="clear: both"></div>
That will make header strech, considering floating elements inside it.
Add a div after the ul with style clear:left; - I would go into more detail, but I'm on my iPad and about to go to bed.
Instead of anything in the li css code, put #header li{display: inline;} (and your color and other preferences)
I have a div which wraps a number of images that are generated dynamically. I don't know how high the list of images is. My problem is the div that contains the dynamically generated images doesn't behave like it is housing any content - I want it to extend to the height of the list of images. Each image is itself wrapped in a div.
This is the wrapper div:
.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
This is the markup dynamically generated for (one of) the images:
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div>
.....
How do I get the block div to extend down with the images?
Thanks
The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your block div does not extend the full height of your image.
There are a few different solutions:
1) Add the rule overflow: hidden; to the block class:
.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
2) Add a element after your image that clears the floating:
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
<div style="clear: both;"></div>
</div>
Both will work, but I prefer the first solution.
REMOVE float:left from Image style and height:Auto from block style
ADD display:inline-block; in block style (container style)
I had the same problem. I got the wrapper element to wrap the content by setting the wrapper element's display to "table". So for your situation try
.block {padding:10px; margin-top:10px; height:auto; background- color:#f9f9f9; display: table;}
Add this in your CSS file:
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */
And add the "group" class to your block div so the float is cleared:
<div class="block group">
...
Add the following code in your css:
.block::after{
content : '';
clear : both;
display : block;
}
It will solve your problem.
It just inserts a blank "after" the block class.
I have a div tag that expands (horizontally and vertically) depending what I have in it. I have:
<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right">
I also put a table within it to hold all my information:
<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">