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.
Related
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
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)
I have inherited a site that has significant issues when displayed in IE8. Looks like a lot of them are div related, but I could use some help in fixing the problem.
The issue I am working on right now is that the divs for the phone numbers and flags are being displayed on two lines, instead of one. This ends up pushing down the content of the nav bar.
URL: fertileweb.com/demosite (slightly dated copy, latest is hosted locally)
IE8 view: !http://i.imgur.com/HaENEvu.jpg
IE10/firefox/chrome view: !http://i.imgur.com/q3mK5Bh.jpg
HTML
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/USA.png">
(425) 646-4700
</li>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/canada.png">
(800) 394-2402
</li>
</ul>
</div>
CSS
.addressBox {
float: right;
padding-top: 35px;}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;}
.addressBox ul {
float: left;
list-style: none outside none;
margin-bottom: 10px;
width: 100%;}
.addressBox li {
color: #231F20;
display: inline;
float: left;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding-left: 17px;}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;}
Thanks!
Try to add this in your CSS styles
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
The problem seems to be about browsers size instead of browsers version.
If a wordwrap doesn't make it, I would suggest using the display: table; option, as such:
.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }
That usually solves floating errors.
working full code with demo here
jsFiddle
html code:
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li><img src="http://images.apple.com/global/elements/flags/22x22/usa.png"> (425) 646-4700</li>
<li><img src="http://images.apple.com/ca/global/elements/flags/22x22/canada.png"> (800) 394-2402</li>
</ul>
</div>
css code:
.addressBox {
float: right;
padding-top: 35px;
}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;
}
.addressBox ul {
float: left;
list-style: none outside none;
margin: 0 0 10px 0;
padding:0;
width: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
.addressBox li {
color: #231F20;
display: block;
float: left;
list-style: none outside none;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding: 0 0 0 17px;
margin:0;
}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;
display:block;
}
Not 100% sure why, but adding the code below fixed the problem by making sure the element didn't get too small for the content - which would cause the text to wrap.I made sure to add it to a conditional style so it wouldn't have any other adverse effects.
.addressbox li {
width:133px;
}
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;
}