I have two menus: one is at the very top and another one right under it. I can't get the two menus to align properly to the right on top of each other. I want to align the last menu items of each of them vertically.
Here's the link: http://bit.ly/1KJjaOZ
CSS:
#header-text {
float: left;
border-radius: 25px;
border: 1px solid #CCC;
padding: 0 1em 2.35em 1em;
width: 15.30em;
height: 2em;
margin: 0 0 0 560px;
}
.top-menuv2 ul {
list-style-type: none;
margin: 10px 20px 0 90px;
font-size: 0.80em;
float: none;
}
.top-menuv2 li {
display: inline-block;
position: relative;
}
.top-menuv2 ul li {
display: inline;
margin-left: 20px;
font-family: 'Open Sans Bold', sans-serif;
line-height: 1.8;
}
You have to restructure your codes. Adding a huge margin to certain div is not a good solution. Since your top menu is right aligned, why don't you use float: right; instead?
Here is my solution. It's recommendable for you to make a backup because I technically redo your top menu html and css styles.
HTML:
<div class="top-navigation top-menuv2">
<ul>
<li>Contacts</li>
<li>Our Partners</li>
<li>Careers
<ul>
<li>Vacancies</li>
<li>Corporate Culture</li>
</ul>
</li>
</ul>
<div id="header-text">
<div class="header-text cc"> Customer Service 02 753 57 11</div>
</div>
</div>
And the style:
.top-menuv2 ul {
list-style-type: none;
margin: 15px 63px 0px 10px;
font-size: 0.8em;
float: right;
}
#header-text {
border-radius: 25px;
border: 1px solid #CCC;
padding: 0px 1em 2.35em;
width: 15.3em;
height: 2em;
float: right;
margin: 10px 0px 0px;
}
I won't use such a huge margin for my divs as it will ruin your design when it goes responsive. Hope it helps!
All you have to do is add this class :
.top-navigation.top-menuv2 ul {
text-align: right;
padding-right: 42px;
}
you can use this class..
.top-menuv2 {
display: inline-block;
margin: 10px 0 0 0;
}
.top-menuv2 ul {
list-style-type: none;
margin: 10px 20px 0 30px;
font-size: 0.80em;
float: none;
display: inline-block;
}
try to add margin left 14px to "search-icon" div. (return your menus to the previous positions before doing that)
Related
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
Jsfiddle as,
https://jsfiddle.net/9qyv03u3/
How can i break the li caption string into two lines so that they will fit into a maximum width?
In jsfiddle, the menu items are placed in a single line but inside my 50% width container in firefox, it gets rendered as,
This will lead to user pressing the wrong menu option. So, i prefer all menu options horizontally placed like,
Save & Run | Run saved | Run selected |
suite | suite | tests |
You can do this by making the ul a flexbox:
ul {
display: flex;
}
ul {
display: flex;
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
… or by making each li a table-cell:
li {
display: table-cell;
}
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
display: table-cell;
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
You can display the list items as table cells. You may need to tweak the margins and paddings a bit, but this way the items will be next to each other always.
ul{
display: table;
width: 20em;
border: 4px solid gray;
margin: 5em auto;
padding: 20px 0 0 0;
list-style: None;
height: 30px;
}
li {
display: table-cell;
border-right-style: dotted;
padding-right : 15px;
}
<ul>
<li>Questions</li>
<li>Tags liek bla blo foo bar bak nam plo and sni</li>
<li>Users</li>
</ul>
CSS tables I would suggest.
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: None;
height: 30px;
display: table;
table-layout: fixed;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
border-right: 1px dotted black;
}
<ul>
<li>Questions & Answers</li>
<li>Tags</li>
<li>Users</li>
</ul>
You can also use the column-count property to define CSS columns. This is a quick and easy way of achieving the desired effect.
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
width: 25em;
border: 4px solid gray;
padding: 1.5em;
margin: 5em auto;
list-style: None;
font-size: 12pt;
font-family: Arial, sans-serif;
}
li {
text-align: center;
border-right-style: dotted;
padding-right: 10px;
}
li:last-child {
border: 0;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
I'm trying to get distant between my horizontal lists, but I don't know how to do it. I tried with targeting specific list and add padding, but it doesn't work.
https://jsfiddle.net/L58v1jr2/1/
In this case, I want more distance between Follow on Facebook and Subscribe by RSS
This is my code:
<div id="theheader">
<ul id="subscribe">
<li class="facebook">Follow on Facebook</li>
<li class="rss">Subscribe by RSS</li>
</ul>
</div>
CSS:
#theheader ul#subscribe {
float: right; margin: 22px 0 0 0; list-style: none;
}
#theheader ul#subscribe li {
float: left; margin: 0 0 0 32px;
}
#theheader ul#subscribe li a {
display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
text-decoration: none; padding: 1px 0 0 10px;
}
body #theheader .rss li a {
padding: 1px 0 0 120px; /*This doesnt work*/
}
You might want this:
https://jsfiddle.net/L58v1jr2/4/
I've also simplified your css selectors alot.
Basically all you do is add
#subscribe .rss {
margin-left: 120px;
}
to your css.
Hi this seems to be a common problem, however the solutions I've found haven't worked for me yet :(
I found this however this solution didn't work for me for some reason.
My demo link:
http://leongaban.com/_stack/centering/
I'm trying to get the top nav to center, as well as the Portfolio Nav to center as well.
My JSFiddle:
http://jsfiddle.net/8DM65/
Please help! Driving me nuts X_x
HTML
<header>
<div id="main-nav">
<ul>
<li>Portfolio</li>
<li>Contact Me</li>
<li>Resume</li>
</ul>
</div>
<div id="logo-title">
<img src="images/leon_gaban.png" width="256" height="256" class="avatar" />
<h1>Hello</h1>
<h2>Web Designer & Developer</h2>
<h3>And self-improvement blogger</h3>
</div>
</header>
<section id="content">
<div class="portfolio-nav">
<ul>
<li class="cta">Select Portfolio</li>
<li class="selected">Design & Development</li>
<li class="not-selected">Flash & Animation</li>
</ul>
</div>
<div id="showcase-div">
<ul id="showcase-boxes">
<li>Test</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
CSS
/* 02 Header */
header {
width: 100%;
height: 720px;
margin: 0 auto;
background: #ededed;
border-bottom: 1px solid #ccc;
}
header h1 {
font-size: 2em;
font-weight: 400;
font-style: italic;
}
header h2 {
font-size: 3.125em;
font-weight: 700;
}
header h3 {
font-size: 1.125em;
font-weight: 400;
font-style: italic;
}
#logo-title {
width: 100%;
margin: 60px auto;
text-align: center;
}
.avatar {
width: 256px;
height: 256px;
margin-bottom: 20px;
-webkit-border-radius: 128px;
-moz-border-radius: 128px;
-ms-border-radius: 128px;
-o-border-radius: 128px;
border-radius: 128px;
-webkit-box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
-moz-box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
}
#main-nav {
width: 80%;
height: 100px;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
border-bottom: 2px solid white;
}
#main-nav ul {
clear: left;
float: left;
width: 100%;
list-style: none;
padding: 30px 0;
position:relative;
left:50%;
}
#main-nav ul li {
display:block;
position:relative;
right:50%;
float: left;
padding: 0 20px;
}
/* 03 Content */
#content {
width: 100%;
height: 100%;
margin: 0 auto;
}
#content ul {
list-style: none;
}
.portfolio-nav {
height: 60px;
padding: 30px 0 0 0;
background: #ccc;
}
.portfolio-nav ul {
margin: 0 auto;
text-align: center;
}
.portfolio-nav ul li {
display: inline;
float: left;
padding: 0 20px;
text-align: center;
}
#showcase-div {
width: 80%;
height: 100%;
margin: 0 auto;
background: blue;
padding-bottom: 60px;
}
You've actually added too much CSS to these elements and appear to be coding yourself in the wrong direction. I would scrap all the position: relative; stuff and instead focus on building your li's around inline-block. That makes the li's not expand width-wise push each other into a vertical stack.
#main-nav ul li {
display: inline-block;
padding: 0 20px;
}
#main-nav ul {
list-style: none;
padding: 30px 0;
}
Why have you gone with a big mixture of floats, clears, display and positioning? You need to remove a lot of code if you're going to make any sense of what you're doing.
For example, that first navigation. You don't need to display the list-items as block-level elements, and then float them, and then clear them, and then try and position them halfway across the page.
They are list-items, and you want to display them inline.
#main-nav ul {
width: 100%;
list-style: none;
padding: 30px 0;
}
#main-nav ul li {
display: inline;
padding: 0 20px;
}
http://jsfiddle.net/8DM65/2/
It appears I can get this to work very easily with the following:
.portfolio-nav{
text-align: center;
}
.portfolio-nav > ul{
display: inline-block;
}
What i found was that changing the #main-nav width css to 35% fixed it but removes the extra white separator line, so you could add an hr tag with a color of white to fix that. To fix the #portfolio-nav, I changed the width to 44% and added margin: 0 auto.
I'm trying to make a navigation bar with 100% width, that distributes equally within a header that also has a width of 100%. Also each a element has two words each, that are perfectlly center aligned under each other.
The HTML I'm working with is below:
<div class="nav">
<ul>
<li><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</li>
<li><span style="font-family:sacramento;text-align: center;">About</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</li>
<li><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</li>
</ul>
</div><!--end of nav-->
CSS I'm working with
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;
}
The example I'm trying to make looks like this below :
UPDATE
When I try the code in IE9, I get this image :
Please how can i solve this.
To distribute all items equally set a percentage width on the list items. You have six items so add width: 16%; to the .nav li rule.
To center align the text change:
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
to (removed explicit width and added display: block):
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
}
Lastly remove display: inline-block from the .nav li rule and add float: left. You should also add a <div style="clear: both"></div> element below the list (the tag) to "fix" the page flow.
Check this JSfiddle : JSfiddle working
See the result here Result of navigation
Use this css
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 5px 20px;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 2px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}