header ul {
display: inline; }
header ul .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
*{ border: 0; margin: 0; padding: 0; }
this is my css now using the reset wildcard seems to cancel out the display: inline; anyone know a fix?
The issue here is if you delete the wild card the Welcome header is displayed on the line after the navbar. Where as currently its on the same line, using display: inline; should remove that but didn't.
http://jsfiddle.net/P8QmL/
You need to apply your display:inline to the header not the header ul.
You should also remove the divs within your ul.
html:
<header>
<ul class='nav-header'>
<li>
Kali # 1000 Commercial
</li>
<li>
Home
</li>
<li>
Products
</li>
<li>
About
</li>
</ul>
</header>
<section class='body-wrapper'>
<h1>Welcome</h1>
</section>
<footer>
<div class='nav-footer'>
<ul>
<li>
Contact Us
</li>
</ul>
</div>
</footer>
css:
header {
display: inline; }
header .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
Okay, I understand now.
Here's the problem:
An element (e.g. <header>) containing all floating elements "loses" its size. Thus, your <header> element has a width and height of 0, even though it contains non-zero elements. As a consequence, the subsequent elements ignore the header element (since its size is 0) and appear to "float" to the right.
There are a few fixes, but the best one is probably to use the css clear property on your subsequent elements:
section {
clear: both;
}
I have taken the liberty to improve your HTML & CSS:
http://jsfiddle.net/P8QmL/4/
I should note this still doesn't give your <header> element any size, so should you wish to style your header, you'll notice nothing happens since the header is still of size 0.
So if you need your header to have e.g. a background color, you have to use a different solution. The easiest one to give an element with floating children a size is to use overflow: auto. It's kind of hacky, but it works.
header {
background-color: red;
overflow: auto;
}
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 am building my first website after reading through CSS and HTML.I was able to bring the header on my index page with nav bar and the brand. For the brand, I aligned it in the center using the margin-top property and set the navigation links using float property. However, when I inspect the ul element using firefox,
I see a margin-top and margin-bottom of 16 px each which I do not have a clue on how its getting added.
Is aligning the brand using the margin-top property the right way to center align?
Why is the ul element not taking the entire height of 44 px set for the header.
I am adding the plunker url for more details: http://plnkr.co/edit/RjQtIR?p=preview
Code for more details:
<header class="main-header">
<nav class="top-bar clearfix">
<span class="brand">Money Plant Services</span>
<section class="nav-menu">
<ul class="nav-items">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</section>
</nav>
</header>
CSS:
.main-header{
width: 100%;
height:44px;
background-color: #3A3A3A;
}
.brand{
float: left;
margin-top: 12px;
padding-left: 10px;
color: #FFFFFF;
}
.nav-menu{
float:right;
}
.nav-items{
list-style: none;
}
.nav-items li{
float: left;
margin-right: 5px;
padding: 5px;
background-color: #FFFFFF;
}
li > a{
color: black;
text-decoration: none;
}
I hope this will helps you. Just replace the below code with yours it will works...
CSS:
.nav-items {
list-style: none;
margin: 0;
padding: 0;
margin-top:8px;
display: inline-block;
}
Ul has a default margin so you can remove that by adding....
<ul style="margin:0px">
Also margins are different from browser to browser so its worth checking out info online about it or test it for yourself using inspect element.
When aligning horixontally there are many ways to do it...
you could use the text-align method or the margin auto method or the custom padding way.(there are also other ways).
Example:
<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>
Example:
<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>
Vertical align is a bit harder but can be done with table cells (there are also other methods).
The right way to align is either using the text-align property or using auto margins as said by the w3c validation service.
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
I trying to come up with a simple css layout which should look like this:
This is my html code for the header and nav bar:
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Help
<li>Contact Us
<li>Customers
</div>
And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned.
When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items.
Could someone please help me with the header positioning?
#header ul { float: left; }
or
#header ul { position: absolute; right: 0; }
In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).
To target the list items in the header, you can simply use a parent selector, like this: #header li.
Here's what you need:
#header {
border: 1px solid #ccc;
overflow: hidden; /* clearfix */
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
}
See DEMO.