I am making a horizontal navigation bar with a image in it, the nav bar has four links in total one of which is a image link, however the image link doesn't line up with the rest of the links on the nav bar i want to drop it down by a pixel or 2, but every time i try and reposition that image it brings the rest of the links in the div tag with it.
{ position: absolute; } and { position: relative; } puts the image link on top of the other links
http://i.imgur.com/v7Cg9kJ.jpg how it looks normally.
http://i.imgur.com/abaIdwE.jpg with absolute positioning.
Try the following:
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
DEMO
SNIPPET
#top-navbar {
float: right;
display: block;
padding: 10px;
word-spacing: 5px;
text-align: center;
font-family: Arial;
font-size: 13pt;
position: relative;
}
#signin {
background-color: #4387FD;
color: white;
width: 120px;
text-align: center;
padding: 5px;
text-decoration: none;
word-spacing: 1px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
a {
text-decoration: none;
}
<div id="top-navbar">
<ul>
<li>Gmail</li>
<li>Images</li>
<li>
<a href="https://www.google.com/intl/en/options/">
<img id="apps" src="https://lh3.ggpht.com/ExOY2XlSbdfFFE3BZ5l44wBQEU5JVsVrertIIdjPy93yfDfomhKx0waLXA9Hhv5qvg-b3aaq=w22" />
</a>
</li>
<li>
<a id="signin" href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/webhp%3Fhl%3Den">Sign In</a>
</li>
</ul>
</div>
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
What should I do to align the first 3 buttons in the center of the bar?
#navbar{
list-style-type: none;
position: relative;
top: -4px;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #212121;
}
In your navigation bar you can put these three in one separate div and then align it to center
Hello friends to center a that your
menu options (nav) you only need
to use the text-aling rule: center;
,why ? Because the menu list are
formed by '' li '' or '' ul '' and we
only apply this rule to list and
ready :), greetings from mexico;)
<html>
<head>
<style>
body{
margin: 0px;
}
.navbar{
height: 60px;
background-color: #bbb;
line-height: 60px; //this will center inline elements in your navbar
}
.container{
margin-left: 5%;
margin-right: 5%;
}
.btn{
background-color: white;
padding: 10px 20px;
width: 100px;
border: none;
border-radius: 2px;
display: inline;
}
.nav{
display: inline;
list-style-type: none;
}
.nav li{
display: inline;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar">
<div class="container">
<ul class="nav">
<li><button class="btn">Button1</button></li>
<li><button class="btn">Button2</button></li>
<li><a class="btn"><a> Button</a></li>
</ul>
</div>
</nav>
</body>
The above code should work for you. I have shown buttons using anchor tag and also button tag
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
Below is a screenshot indicating the manner I intend on placing an image and text above a list.
my desired design
Below is my screenshot in terms of my misalignment problem.
my alignment problems
Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:
<section class="vertical_menu_bar_section">
<div id="img_logged_in_user">
<img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg"
height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p>
</div>
<div id='vertical_menu'>
<ul>
<li><a href='#'><span>CALENDAR</span></a></li>
<li><a href='#'><span>TOTALS</span></a></li>
<li><a href='#'><span>OPTION 3</span></a></li>
<li><a href='#'><span>OPTION 4</span></a></li>
</ul>
</div>
<section>
Below is my CSS:
/* Section - Vertical menu bar */
.vertical_menu_bar_section {
color: #FFFFFF;
background: #FF0000;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin: 0;
height: 100%;
}
#vertical_menu {
background: #FF00CC;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
font-size: 20px;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
}
#vertical_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu li {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu a {
background: #333;
border-bottom: 1px solid #393939;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#vertical_menu a:hover {
background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* */
#img_logged_in_user {
clear: both;
display: block;
float: left;
background: #2580a2;
}
Any ideas as to where I'm going wrong.
Thanks.
Please check if this is what you need
Fiddle
For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned
Also added a <span> so the user name wont get below the pic.
To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):
#img_logged_in_user {
width: 250px;
}
Then set the image margin to add a spacing between them:
#img_logged_in_user > img {
margin-right: 20px;
}
See live example here: http://jsfiddle.net/cdog/sbu24c45/.
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.