How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?
Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/
HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!
Related
I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
Just a forewarning, I am new to HTML and CSS. Please be patient with my inquiry here.
I am attempting to center the navigation bar while overlapping it on the bottom side of the banner. I have a banner image at the top and a background image for the main content which is positioned just below the nav bar. I've attempted to add the following:
ul.navbar li {
float: left}
This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used
ul.navbar li {
display: inline-table}
This was the only variation that would give me the correct horizontal format I was looking for. Now I just need it centered and overlaid on the bottom end of my banner image. Any suggestions? My HTML and CSS is as follows:
CSS:
body {
padding-left: 9em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #6699FF;
background-color: white
}
div#contentareamain1 {
background: url(contentareamain1.png) no-repeat;
background-color: white;
color: white;
height: 634px;
position: relative;
}
div#contentareamain1text {
position: relative;
height: auto;
width: 700px;
left: 5em;
top: 4em;
}
#header {
float:left;
width:100%;
height:87px;
}
.wrap {
position:relative;
margin:0 ;
}
ul.navbar {
list-style-type: none;
padding: 0.3em;
margin: 0;
top: 2em;
left: 5em;
width: 15em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: rgb(157,193,255);
margin: 0.5em ;
padding: 0.3em;
border-bottom: 1em solid black;
text-align: center;
display: inline-table;
}
ul.navbar a:hover {
color: blue;
background-color: #00FFFF;
}
ul.navbar a {
text-decoration: none;
}
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div><ul class="navbar">
<p> <li>Home </p>
<p> <li>Services </p>
<p> <li>Training </p>
</ul>
<div id="contentareamain1" no-repeat>
<div id="contentareamain1text"><p>
</p></div>
</div>
Thank you so much in advance!
First you should check your HTML structure – it seems there is a missing closing DIV tag and you should delete the wrapping P elements around the list elements.
Try this:
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div>
<ul class="navbar">
<li>Home</li>
<li>Services</li>
<li>Training</li>
</ul>
</div>
After you just need to give your header image this CSS:
display:block; margin:0 auto; position:relative;
and the ul.navbar needs something like this:
margin:0 auto; float:none; position:relative; top:-35px; width:500px;
and you should delete the relative position of your div#contentareamain1 to get this code work.
div#contentareamain1 { (…) /*position: relative;*/ }
You should really visit W3C and learn your HTML :)
The HTML
<div id="header">
<img src="" />
<ul class="navbar">
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</div>
<div id="content-area>
</div>
Your HTML contains some <p>-tags who don't belong there. Also I guess you would like your content outside of the header?
The CSS
(I only give you an example how to place your navbar centered in your header, the rest is up to you)
#header {
position:relative;
z-index:1;
text-align:center;
}
#header img {
position:inherit;
z-index:inherit;
}
#header ul.navbar {
position:relative;
z-index:2;
margin:0 auto;
top:-35px;
list-style-type:none;
}
#header ul.navbar li {
display:inline-block;
}
#header ul.navbar li a {
display:block;
padding:4px 8px;
background-color:blue;
color:white;
text-decoration:none;
}
You can see the code in action at jsFiddle and play around with it.
Hope it helped you a bit.
[Currently at: http://www.jsfiddle.net/tqtFg Michael Durrant]
I'm very new to css and I'm trying to create a website with a logo and navigation panel side by side. If you visit the site initially the panel appears out of the 'topcontent', just below and to the right in fact, but if you clicked the logo to go to the same page the panel appears where i'd like it to be!
My Site : http://acews.x10.mx
it seems something is not being intialized when first opened, but I can't tell what. here's my html code;
<div id="topcontent">
<div id="top">
<a href="index.html">
<img src="logo.png">
</a>
<div id="navbar">
<ul id="menubar">
<li class="menuButton">Home</li>
<li class="menuButton"><a href="about.html" >About ACE</a></li>
<li class="menuButton"><a href="login.html" >Customer Login</a></li>
</ul>
</div>
</div>
Here's my css code;
body {
}
/*Content page divider*/
#topcontent {
/* margin: 50px auto; */
height: 170px;
margin-left:auto;
margin-right:auto;
background-image:url('backgroundcolor.png');
}
#top {
height: 170px;
width: 900px;
margin-left:auto;
margin-right:auto;
}
/* MenuBar */
#navbar {
margin-top:60px;
float:right;
}
ul#menubar {
/* margin:20px; */
list-style:none;
margin-left:auto;
margin-right:auto;
padding: 5px 10px 0 10px;
}
ul#menubar li {
display:inline;
font-family: calibri;
font-weight: bold;
margin-left:10px;
}
ul#menubar li a {
text-decoration:none;
text-align:center;
padding:5px 10px;
/* width:100px; */
color:#FFFFFF;
float:left;
font-size:26px;
}
.menuButton a:hover{
background-color:#618E00;
text-decoration: none;
-webkit-border-radius: 5px;
}
add id for link with logo:
<a href="index.html" id="logo">
<img src="logo.png">
</a>
and CSS
#logo {float:left;}
link with logo is like one single line, if you add float to it should be ok.
My markup looks like this:
<div class="header-section">
<img src="logo.png" />
<div class="navigation">
<ul>
<li>Home</li>
<li><a href=#>Bakery</a></li>
<li><a href=#>Fishery</a></li>
<li><a href=#>Casino</a></li>
<li><a href=#>Disney Land</a></li>
</ul>
</div>
<div style="clear:both" />
</div>
and the css that matters is:
.header-section {
margin: 30px 0;
}
.header-section .logo {
float: left;
}
.header-section .logo img{
border: 0;
}
.header-section .navigation {
float: right;
margin-top: 23px;
}
.header-section .navigation ul {
list-style: none;
}
.header-section .navigation ul li{
font-size: 18px;
font-family: Tahoma, Arial, Verdana;
float: left;
margin: 0 20px;
}
So the links are formatted in a horizontal line to the right of the logo.
Initially I had the idea to have them just wrap when the screen real estate did not allow them to be in one line but then what actually happened was that before wrapping, they fell below the logo. I was happy with this until I saw that - ironically - IE rendered it the way I had in mind.
So my question is - how do I get the links to wrap before just snapping below the logo image?
make tag as a block element:
and add width & height..
.header-section a {
display:block;
width:100px;
height:100px;
}
Try putting <img src="logo.png" /> after navigation div end and fix width of both section... It should work