I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out:
Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
This basically says that there wont be anything beside #header and
#content
Also #header #header h1 #header #nav #content will all be
floated to the left.
And #wrap basically centers itself.
#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content of course.
And if you want to use #wrap you should know that it should be the width of your widest element(s)
Related
I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.
Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</li>
</ul>
</div><!--end header-->
CSS
body {
font-family: Helvetica, Arial, Century;
font-size: 12px;
margin: 0;
background: url('images/bluebg.jpg') repeat-x top center;
}
#header {
background-color: #ffd727;
height: 40px;
position: relative;
margin: 150px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235,200,35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page.
i tried margin:0 auto but it wont work
here is my code:
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</div>
Change your last two CSS rules to:
li {
display:inline-block;
}
#menu {
background-color:#98bf21;
text-align:center;
}
jsFiddle example
margin: 0 auto; only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.
Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Good luck!
Use the inline-block css magic :)
JSFiddle
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
I had the same problem until I read this post and decided to center the text in the "nav".
So basically your ul should be in a nav so you can text-align: center the nav area.
nav {
width: 75%;
margin: auto
}
#menu {background-color: #98bf21}
.container{padding: 0.10em}
.cell-row {display:table; width:100%}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
a:link, a:visited {
font-weight: bold;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {background-color: #7A991A}
#media (max-width: 500px) {
.mobile {
display: block;
width: 100%;
text-align: center
}
nav {
width: 100%;
margin: auto
}
}
<nav>
<div id="menu" class="cell-row" style="text-align: center">
<div class="container cell cell-middle mobile">Home</div>
<div class="container cell cell-middle mobile">News</div>
<div class="container cell cell-middle mobile">Articles</div>
<div class="container cell cell-middle mobile">Forum</div>
<div class="container cell cell-middle mobile">Contact</div>
<div class="container cell cell-middle mobile">About</div>
</div>
</nav>
Add the following css:
ul {
margin: 0 auto;
display: inline-block;
}
This will make the ul fit its contents and then be centered in its container.
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}
I want the following code to display only 1 line of text. How can I get rid of the break between the span and the ul?
<div id="twitter_div">
<span class="talenthouse">#twittername: </span>
<ul id="twitter_update_list">
</ul>
</div>
With the following CSS:
*{
margin: 0;
padding: 0;
}
#twitter_div{
font-family:"lucida grande",tahoma,arial,sans-serif;
color: #999999;
font-size: 71%;
background: url(images/twitter_bg.gif) top left no-repeat;
width: 965px;
height: 48px;
overflow: auto;
padding: 15px 0 0 85px;
}
.talenthouse{
font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif;
color: #80c242;
font-weight: bold;
font-size: 135%;
display: inline;
}
ul#twitter_update_list{
list-style: none;
width: 780px;
height: 15px;
display: inline;
}
Try this CSS.
<style type="text/css">
ul, li, ol{display:inline}
</style>
Short answer: put this in your CSS.
ul#twitter_update_list, ul#twitter_update_list li { display: inline; }
Try to use a reset sheet to remove all paddings/margins from the elements.
Google for 'eric meyer reset sheet'.
Then put the list an the content to display:inline;
You can set the CSS to display the UL inline. This will also remove the dots.
#twitter_div li { display: inline; }
Thanks
Andi
I believe this should work:
#twitter_div span { float: left; }
#twitter_update_list { float: left; margin: 0; }
EDIT: I just added the margin: 0 which brings the list up to the same level as the span.