I busy in the process of creating a website and currently seem to be having an issue with logo that keeps hiding its self away.
I'm not to sure what I'm doing wrong I have added my html and css here so that hopefully some one can tell me what I have done wrong please.
I am currently using the html5 boilerplate template as well but have commented out the code in the mean time this is the html part of the code:
<!--header -->
<div id="header">
<div id ="logo">
<h1></h1>
</div>
<div id= "hmenu">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Bar</li>
<li>Specials</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
this is the the css code for the header and logo and menu:
body,#container
{ margin:0;
border:0;
height:100%;
font:Arial, Helvetica, sans-serif;
background:url(../Images/bgImg.png) repeat-x ;
}
body > #container
{
height:auto;
min-height:100%;
}
#header
{
background:url(../Images/hdBgImg.png);
width:100%;
height:115px;
}
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
#hmenu
{
font-size:38px;
font-family:Tangerine, sans-serif;
font-weight::bold;
text-align:right;
text-shadow:3px 2px 3px #333;
border-radius:8px;
position::absolute;
top:10px;
right:10px;
}
#hmenu ul
{
height:auto;
padding:8px 10px;
margin:0.1em;
}
#hmenu li
{
display:inline;
padding:20px;
}
#hmenu a
{
text-decoration:none;
color:#FFF;
padding:8px 8px 8px 8px;
}
#hmenu a:hover
{
color:#8AAB8E;
back:#fff;
}
when I try to get the logo added then it moves my menu of the header and it some how creates a double logo too.
any help would be great thanks.
previous CSS code:
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
suggested to fix
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
}
let me share an updated JSFIDDLE link
may you could see what's missing
Change heigh to height:-
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display:block;
}
#header #logo
{
background:url(Images/1.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display: inline-block;
}
Related
Im trying for some while already to properly align my page. In jsfiddle it seems to be looking nice, but in my widescreen monitor the section tag floats all the way to the left and makes a big mess!
I think I'm doing something wrong with the floating... But still: this is an exercise from my course and it says that i NEED to use the sections as display:block and align them with floating.
I've been stuck in this for a good while and I my course tutors dont answer!
Hope somebody can show me where I'm being mistaken.
HTML:
<body>
<header class="menu">
<img class="imglogo" src="img/TotalLogo.png">
</header>
<section class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</section>
<nav class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</nav>
<footer class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</footer>
</body>
CSS:
root {
display: block;
}
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, section e footer */
header{
display:block;
margin-bottom:15px;
}
nav{
display:block;
width:240px;
float:left;
}
section{
display:block;
width:540px;
float:right;
}
footer{
clear:both;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
The link to jsfiddle is: http://jsfiddle.net/67jrj/1/
Thanks!
Set the width of your page to what you like, 960px is a good standard. Create a div for each element needed to float in an area then clear the float with the next area. Also, rearrange the order of your elements in your html so they appear as you need them to. I'm including my example of your page, at least what I think your asking. :)
HTML:
<div class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</div>
<div class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</div>
<div class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</div>
</body>
</html>
CSS:
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, e footer */
.header{
display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
Hope this helps!
Set standard width for header, section(s) and footer, or better, wrap them all in a div, assign a class to it and set margin to that class. There's nothing called "root" element, replace that with html (that is what they mean by root element).
In my header I have a logo with an image sprite on both sides of the image. I am trying to center them horizontally to the top of the browser. The header has to be positioned:fixed.
HTML:
<div id="headerbg">
<div id="header">
<ul id="navleft">
<li id="navhome"></li>
<li id="navnew"></li>
<li id="navbrands"></li>
</ul>
<div id="logo"></div>
<ul id="navright">
<li id="navsales"></li>
<li id="navlocation"></li>
<li id="navcontact"></li>
</ul>
</div>
</div>
CSS:
#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;
z-index: 1000;
position: fixed;
top: 0;
left:0;
}
#header
{
width: 800px;
height: 100px;
margin: auto;
}
#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;
}
/* NAVIGATION */
#navleft
{
position:relative;
}
#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navleft li, #navleft a
{
height:50px;
display:block;
}
#navright
{
position:relative;
}
#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navright li, #navright a
{
height:50px;
display:block;
}
I left out CSS for the hover images of the sprite to shorten my post. I appreciate any help I can get. Thanks!
You already know the width of the header and the logo. You then knnow that each ul should have a width: 300px; and just set them all to float:left; or display:inline;
#header ul {
width:300px;
}
#header {
display:inline-block;
*display:inline; /* IE hack */
}
EDIT
You could also apply specific CSS styles for psuedo element e.g.:
#header ul:first-child {
width:300px;
position:relative;
top:0;
left:0;
}
#header ul:last-child {
width:300px;
position:relative;
right:0;
left:0;
}
I have retyped your code to fit your needds (well what I assume is your needs)
see fiddle here http://jsfiddle.net/aLQYS/
And for the future, I will recommend you to use classes instead of Id's. Not only you save the ID tag for something more important such as javascript, but you also have the possibility of reusing your css styles by adding multiple classes to one object e.g.
CSS
.shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.box {
width:200px;
height:200px;
}
HTML
<div class="shadow box"></div>
I'm having some issues trying to style a menu in chrome. The menu looks fine in ltr mode, but in right to left mode it breaks in Chrome.
I have a fiddle of this here:
http://jsfiddle.net/YKger/
In firefox, the menu in ltr is "one - two - three", in rtl "three - two -one". It chrome it is always rendered as "one-two-three".
Any idea why this is happening, or how I can style this without the first 'li' spanning the whole menu?
Thanks,
Also, here's the code:
<!doctype html>
<head>
<style>
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline;
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first">One<span id='tail1'> </span>
<span id='tail2'></span></li>
<li class="menu-1014">Two<span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active">Three<span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>
</html>
i think thats the easy way -
you should make both of your:
ul, li
{
direction:rtl;
}
Try this:
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline-block;
}
I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
I am trying to show the menu as follows
| HOME |
| GAMES |
| PLAYERS|
|SCHEDULE|
The problem is that my menu is showing like this
| HOME || GAMES |
|PLAYERS||SCHEDULE|
and also.. how can I set the width of it to be consistent?, right now it takes only the length of the word inside of |HOME| but i would like to set this to a fix number.. I am new to css please help
.#tabshor {
width:100%;
font-size:50%;
line-height:5px;
}
#tabshor ul {
margin:-30px;
padding:150px 0px 0px 0px;
line-height:10px;
}
#tabshor li {
display:block;
margin:0;
padding:5;
}
#tabshor a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabshor a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 20px 20px 10px;
color:#FFF;
}
#tabshor a span {float:none;}
#tabshor a:hover span {
color:#FFF;
}
#tabshor a:hover{
background-position:0% -42px;
}
#tabshor a:hover span {
background-position:100% -42px;
}
div#tabshor>ul>li {
display:block;
position:relative;
float:left;
list-style:none;
left:50px;
}
div#tabshor>ul>li ul{
position:absolute; display:none;
list-style:none;
left:100px;
}
div#tabshor>ul>li>a{
display:block;
}
div#tabshor>ul>li:hover ul{
display:block;
z-index:500;
width:50%;
margin:10px 0px 0px -20px;
width:100%;
}
div#tabshor ul li ul a{
display:block;
width: 50px;
}
div#tabshor ul li a:hover{
background:red;
font-style: oblique;
}
HERE IS THE HTML
<div id="left_banner" class="divleftside">
<div id="tabshor">
<ul>
<li><span>HOME</span></li>
<li><span>GAMES</span></li>
<li><span>PLAYERS</span>
<ul>
<li><span>PLAYERS</span></li>
<li><span>SOCCER</span></li>
<li><span>BASKETBALL</span></li>
</ul>
</li>
<li><span>COURTS</span></li>
<li><span>REFEREES</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
<li><span>REGISTER</span></li>
</ul>
</div>
</div>
Try:
Remove float: left from div#tabshor>ul>li
Remove float: left from #tabshor a
Add width: 170px; to div#tabshor>ul>li>a
Cleaning up your CSS might lead to less headaches. Also starting with an example like this vertical rollover list or this nested vertical rollover list might be easier.