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.
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.
A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists.
Additionally, when there are no lists present within the div in question, nothing should appear whatsoever. This is why I'm looking for CSS as a solution, because if I hard-code the titles within the div it will appear if there are no lists present.
I cannot predict which instances of this unique div will have a ul within ahead of time - our application generates content based on user input from drop-down menus, and so if a menu is never used, a ul is not created.
I am unable to use JavaScript of any sort for this labeling process.
This is what I would like to see:
Foo Items
List One
aaaa
bbbbb
cccc
List Two
defdefdef
ghighighi
Bar Items
List One
xxx
yyy
List Two
zzzzzzz
aaaabbbbccc
At present I am trying to use the alt attribute of the ul to populate the div:before area. This is with the hope that there is a way to define CSS which says "for each div that contains an .exam class element, place the ul's attr(alt) in the div:before element".
This is what I've tried:
<div>
<b>Far</b>
<ul class="exam" alt="Foo Items">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam" alt="Foo Items">
<li>dunno</li>
</ul>
</div>
<div>
<b>Far</b>
<ul class="exam" alt="Bar Items">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
And the CSS to go with it:
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
Please see the jsfiddle link here - https://jsfiddle.net/f6gwyvuu/
I realize it's all a bit convoluted but unfortunately this is the result of working around the way in which the application generates its content. I don't really have control over that, I can only stylized the elements it creates.
Thanks in advance.
First, ul elements can't have an alt attribute. You can use custom data-* attributes instead.
And it doesn't make much sense to repeat the same data in each ul. Instead, add it only to the div.
Then, you can use
div:not(:empty):before {
content: attr(data-alt);
display: block;
}
div:not(:empty):before {
content: attr(data-alt);
display: block;
font-style: italic;
}
ul {
margin: 0 1em;
padding: 0;
}
li {
margin-left: 2em;
}
<div data-alt="Foo Items">
<b>Far</b>
<ul class="exam">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam">
<li>dunno</li>
</ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
<b>Far</b>
<ul class="exam">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
If you must do this, try
div {position:relative;} /*let this be the absolute container*/
div > .exam {position: static;}
div:not(:empty) {padding-top: 30px;} /*for div with generated content, only works for short titles*/
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
position: absolute;
top: 0;
margin-left: -1em; /*compensate your ul margin*/
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
This works for short titles, but maybe tweak it to work for long titles as well.
JSFiddle
I think you are looking for :empty and :not css selectors.
You can do something like this:
div > .exam:not(:empty):before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
JSFIDDLE
If you are trying to change styles of previous sibling, then it is not possible using css. You better add another attribute as you did by adding alt attribute. And also it is best practice to add our custom attributes with a prefix as data-.
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;
}
I’m sure somebody has had this problem before, but I can’t seem to find the right way of describing it.
I’ve got a row of icons like so:
Which is produced like so...
HTML:
<nav class="nav-global">
<ul>
<li>
Home
</li>
<li>
Our Story
</li>
...
<li>
Login
</li>
</ul>
</nav>
CSS:
.nav-global ul {
padding: 0;
text-align: center;
}
.nav-global li {
display: inline;
}
.nav-global li a {
background-image: url(/try/img/nav-global-icon.png);
background-repeat: no-repeat;
background-position: center 0;
}
My problem happens when I want to add padding to the top of the <a> to get the icons to sit on top.
By adding padding-top: 35px; to .nav-global li a:
Here’s what the inspector is telling me:
I’ve tried using inline-block, tried making the <a> display: block, using clearfix and a few other things but can’t seem to figure it out.
Any suggestions?
you should also try adding padding to li element (.nav-global li), and display it as inline-block
.nav-global li {
display: inline-block;
padding-top: 35px;
}
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)