[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.
Related
I've created a CSS top bar menu that uses the | character as separators. It's rendering exactly as it should on any browser I try for Linux or Windows. But, on Mac, with any browser, the | characters drop down a line or so, and render below the menu bar.
CSS
#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}
HTML
<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;">Home <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">About <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Services <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Portfolio <span style="vertical-align: top !important;"> |</span>
<ul id="sub">
<li>The Sparkle Project</li>
<li>Jam In Jubilee</li>
<li>Connect Now Network</li>
<li>Ovidiu Bistriceanu</li>
<li>The Devon Clifford Music Foundation</li>
</ul>
</li>
<li class="navLi">Testimonials <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Blog <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Contact</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks
If it was me..
I'd put all my css in a css file, not inline. Then I'd use css for visual appearances, like below..
#menu>ul>li{
border-right: 1px solid #000;
padding-right:20px;
padding-left: 10px;
}
#menu>ul>li:last-child {
border-right:none;
padding: none;
}
...
<div id="menu">
<ul class="nav">
<li class="navLi">Home</li>
<li class="navLi">About</li>
<li class="navLi">Services</li>
<li class="navLi">Portfolio
Demo
I am currently learning Ruby on Rails by following Micheal Hartl's tutorial to create a twitter clone.
I was working on the CSS code for the front page. But for some weird reason, It is rendering a different view for both Firefox and Chrome.
I have added screenshots. The navigation bar in the upper right page ( consisting of Home, Help and Sign In) seems to disappear in Firefox.
I have tried tinkering around with the code, but I just can't seem to get the logo and the navigation bar to get aligned in Firefox, like they are aligned in Chrome.
Here is the CSS code:
.container{
width: 710px;
padding-left:30px;
}
body{
background: #cff;
padding-left:30px;
margin:1em;
}
header{
margin-top: 30px;
padding-top: 30px;
padding-left: 20px;
}
header img {
padding: 1em;
background: #fff;
position: relative;
margin-left:-1.1em;
}
section{
margin-top:1em;
font-size:120%;
padding:20px;
background: #fff;
}
section h1{
font-size:200%;
}
a{
color: #09c ;
text-decoration:none;
}
a:hover{
color: #069;
text-decoration:underline;
font-weight:bold;
}
a:visited{
color:#069;
}
nav{
float:right;
background: white;
padding: 0 0.7em;
white-space:nowrap;
margin-top: -5.4em;
margin-left:-0.4em;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
list-style-type:none;
display:inline-block;
padding:0.2em 0;
}
nav ul li a {
padding: 0 5px;
font-weight: bold;
}
nav ul li a:visited{
color: #09c;
}
nav ul li a:hover{
text-decoration:underline;
}
a.signup {
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
width: 190px;
color:#fff;
background: #006400;
font-size:150%;
font-weight:bold;
padding:20px;
}
.round{
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
footer {
text-align: center;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
}
footer nav{
float:none;
}
The image and the Navigations are defined in the header.html.erb page. The code of that page is:
<header>
<%= link_to logo,root_path %>
<nav class = "round">
<ul>
<li> <%= link_to "Home", root_path %></li>
<li> <%= link_to "Help", help_path %></li>
<li> <%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
Here is the source code generated by Chrome:
<body>
<div class="container">
<header>
<img alt="Sample app" class="round" src="/assets/logo.png" />
<nav class = "round">
<ul>
<li> Home</li>
<li> Help</li>
<li> Sign in</li>
</ul>
</nav>
</header>
<section class ="round">
<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>
Sign up now!
</section>
<footer>
<nav class = "round">
<ul>
<li> About</li>
<li> Contact</li>
<li> Git Repo</li>
<li> Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
Source code generated by Firefox:
<body>
<div class="container">
<header>
<img alt="Sample app" class="round" src="/assets/logo.png" />
<nav class = "round">
<ul>
<li> Home</li>
<li> Help</li>
<li> Sign in</li>
</ul>
</nav>
</header>
<section class ="round">
<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>
Sign up now!
</section>
<footer>
<nav class = "round">
<ul>
<li> About</li>
<li> Contact</li>
<li> Git Repo</li>
<li> Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
I think part of the problem is that you have this CSS definition:
nav {
float: right;
background: white;
padding: 0 0.7em;
white-space: nowrap;
margin-top: -5.4em;
margin-left: -0.4em;
}
Which is being applied to BOTH your nav in your <header> and in your <footer>. I would remove margin-top: -5.4em; completely and then change this CSS definition:
footer {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
by updating margin-top: 100px; to something like margin-top: 20px; and see if you have any better luck.
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..!!
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.
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