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.
Related
I'm trying to make a simple top menu with one level of submenus. I want to animate them with translate3d, but I can't manage to get them to sit behind the header with z-index. I'm using Foundation, so the header looks a bit like this:
#main-menu > li {
position: relative;
}
#main-menu ul {
position: absolute;
-webkit-transition: transform 400ms ease; (omitted other prefixes)
transform: translate3d(0,-100%,0);
}
#main-menu > li:hover ul {
transform: translate3d(0,0,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
So in the normal state the submenus #main-menu ul are translated vertically by their height so that when the main menus buttons are hovered the submenus slide down. However, I can't seem to make it so that the submenus are behind the entire header but appear above the content below.
this may help to your.This can do in several ways.this is one of it.you can do it easily if you start to use bootstrap.this solution only use html, css and js.this may a quick help to you.
<!DOCTYPE>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.one").mouseenter(function(){
$("div.submenu").fadeIn(500,function(){
$(this).mouseleave(function(){
$(this).fadeOut(500);
});
});
});
});
</script>
<style type="text/css">
body{
margin: 0;
}
ul{
background-color:black;
}
ul li{
color: white;
list-style-type: none;
display:inline;
font-size:30px;
width:100px;
margin-left: 30px;
margin-right: 30px;
}
div.submenu li{
list-style-type: none;
color: white;
font-size: 30px;
width:200px;
background-color: black;
text-align: center;
position: relative;
top:-15px;
left:550px;
}
div.submenu{
display: none;
}
</style>
</head>
<body>
<div style="text-align:center;">
<ul>
<li class="one">Basin & Sinks</li>
<li>Bathroom Accessories</li>
<li>Showers </li>
<li>Toilets</li>
</ul>
<div class="submenu">
<li>one</li>
<li>two</li>
</div>
</div>
</body>
</html>
You need to set your either your header or main menu (depending on the style you going for) to absolute with no z-index applied and then add a negative z-index to the absolute positioned sub-menu. this will hide the submenu content behind the parent elements.
* {
margin:0;
padding:0:
}
#header {
background: #f4f4f4;
border-bottom: 1px solid #e3e3e3;
height:60px;
position:relative;
}
#main-menu {
position:absolute;
width:100%;
height:30px;
list-style:none;
}
#main-menu li > a {
display:block;
text-decoration:none;
padding:1em 2em;
}
#main-menu li.has-children ul {
position:absolute;
z-index:-1;
top:100%;
-webkit-transition: transform 400ms ease;
transform: translate3d(0,-100%,0);
background:#f4f4f4;
border:1px solid #e3e3e3;
padding:1em;
}
#main-menu li:hover ul {
transform: translate3d(0,20%,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
After adding link_to block, I now see a black line when I hover over the box -- see attached pic. Tried changing many CSS properties but couldn't resolve the issue. My view and CSS code are below. Any ideas how to remove this black line?
**View Code**
<div class="categories">
<ul>
<%= link_to nqdc_user_path do %>
<li>Sample Box</li>
<% end %>
</ul>
</div>
**CSS Code**
div.categories {
margin-top: 25px;
margin-left: 50px;
}
ul {
padding: 10px;
color: white;
list-style: none;
text-align: center;
}
li {
background-color: #4d4dff;
padding: 25px;
margin: 15px;
display: inline-block;
border-radius: 8px;
font-size: 18px;
color: white;
}
li:hover {
background: #b3b3ff;
color: black;
text-decoration: none;
}
Source Code
<div class= "categories">
<ul>
<a href="/users/1/nqdc">
<li>Sample Box</li>
</a>
</ul>
</div>
Link a element should go inside li element
<li>
<a href="">
Sample Box
</a>
</li>
codepem
I hope someone will be able to help me with my problem. I'm working on a mobile site and I need the footer background image to be responsive with footer links centrally positioned over this image. To make the background image responsive I used that code:
#footer-bg {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("../img/background.jpg");
}
#footer-bg .inner-footer {
padding-top: 39.06%;
display: block;
height:0;
}
and it works as a charm, but when I add links they are way out of position, on the bottom of page. Is there a way around this? Thanks in advance for any help.
JSfiddle code here http://jsfiddle.net/4kuUm/
Just to clarify, I want the links and copyright logo to be positioned over an image and not the bottom of it.
I cleared out a lot of the extra cruft that you had in your HTML & CSS to strip this down to the essential bones. You may need to add some minor styings (padding margins etc to get the two menu list items to match up but it's mostly there.
I can say that with a little extra time the HTML & CSS could be trimmed further.
JSfiddle Demo
HTML
<div class="footer-container">
<footer class="wrapper">
<div class="social-icons">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"/>
</li>
</ul>
</div>
<div class="f-links">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
CSS
.footer-container footer {
color: #000000;
padding: 20px 0;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://queermeup.com/wp-content/uploads/2010/10/background-2-640x250.jpg");
}
.social-icons {
text-align:center;
}
.social-icons ul,
.f-links ul {
list-style:none;
width:50%;
margin:0 auto;
text-align: center;
}
.social-icons li,
.f-links li {
display: inline-block;
width:30%;
}
.f-links a {
font-size:12px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
text-decoration: none;
color: black;
padding:2px 10px;
white-space:nowrap;
}
.f-links a:hover {
text-decoration: underline;
}
.divider {
padding:0;
margin:0;
}
.divider p {
margin: 0 5%;
text-align:center;
border-top: 1px solid #000;
font-size:11px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
<div class="footer-container">
<footer class="wrapper"> <span id="footer-bg" role="img" aria-label="Footer">
<div class="social-icons" style="padding:25px;">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter">
</li>
</ul>
</div>
<div class="f-links" style="padding:25px;">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
This works my friend :)
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..!!
[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.