I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
Related
hi i am working on a site layout , because of my problem and for some other reasons like that it doesn't matter to me if i just can use the layout on my own as well cause i made it.
but the problem is that the pulldown menu isn't working as it is mend to be.
i share with you the code:
<html>
<head>
<style>
body{
background:linear-gradient(to bottom right,#013,#c0c);
color:#930;
}
#nav{
margin-left:auto;
margin-right:auto;
margin-top:40px;
maring-bottom:10px;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:40px;
}
#main{
margin-left:auto;
margin-right:auto;
margin-top:auto;
maring-bottom:auto;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:500px;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav li{
position:relative;
float:left;
display:inline;
}
#nav a{
text-decoration:none;
color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background-color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#pull li ul{
display:none;
color:#930;
text-align:center;
position:absolute;
}
#pull li:hover ul{
display:block;
color:#930;
text-align:center;
position:absolute;
}
#pull li ul a{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #930;
background-color:#cb6;
}
#pull li ul a:hover{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #fff;
background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
<li><b>home</b></li>  
<li><b>page 1 ▼</b>
<ul>
<li><b>page 2</b><li>
<li><b>page 3</b><li>
</ul>
</li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>
also the online lay-out is see-able for eyes at www.elderpact.tk
the menu bar and everything need to stay like they are
but the drop down menu has to lower the content box if it is opened.
now it goes right trough the content.
also i would like to display the drop down menu direct under the drop down menu opener
(page 1).
could someone please help me?
the risk with create you own dropdown is not work in all browsers. The best solution for this problem is use Bootstrap Twitter. Bootstrap DropDown
Here's a fiddle with the menu the way I think you want it: http://jsfiddle.net/TPLJ8/1/
You basically need to remove the margin and padding from the ul and li elements at the top of your CSS (resets), like this:
ul, li {margin:0; padding:0;}
This will help you start with a clean slate. I also cleaned up your CSS as you don't need to declare the same styling on hovers if that style stays the same.
Your HTML also needed some work. You were missing closing </li> tags and had a bunch of unnecessary <br /> tags.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
So what i want to happen is for the background of the current link(the link of the page you are currently on) to turn a seperate color and also for the font color to change to white. I also want this same effect to occur on a:hover (for links you are hovering over). I have gotten very close to this effect, however my one issue is that to change the font color of a:hover the mouse needs to be directly over the link and not simply within its container. I understand why this would not work since im giving this property to the link specifically and not the list, but font color changes for the "a" dont work if i put them with #nav li.
The effects i want are similar to those of the NavBar on this page http://www.vitalsmarts.com/
CSS/HTML:
<style>
#nav{
list-style-type:none;
text-align:center;
height:50px;
background-image:url("image/menuBg.png");
}
#nav li {
float:left;
width:155px;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
}
#nav li:hover {
background-color:#143D17;
color:#FFFFFF;
}
#nav li a:hover {
color:#FFFFFF;
}
#nav li a.currentFont {
color:#FFFFFF;
}
.navPadS {
padding:13px 0px;
}
.navPadL {
padding:13px 12px;
}
.navPadLL {
padding-top:13px;
padding-bottom:13px;
padding-right:20px;
}
.current {
background-color:#143D17;
}
</style>
<body>
<!Header and NavBar>
<div id="navCont">
<ul id="nav" class"tbBord">
<li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
<li class="navPadLL">home</li>
<li class="navPadL">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
</ul>
</div>
</body>
</html>
add this to your css
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
display:block;
}
Don't style the li's just float them left and put all your style in the a's. I've created this example on JS Bin but the bit that matters is:
#nav li {
margin:0;
padding:0;
float:left;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
width:155px;
display:block;
padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
background-color:#143D17;
color:#FFFFFF;
}
I'am trying to create a navigation menu with a sub menu, and fiddled with it today.
But i'am stuck at getting the sub menu of the parent menu to align it's links.
my HTML
<!-- navigation menu -->
<div class="MenuContainer">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="sub">
<li>Project1</li>
<li>Project2</li>
<li>Project3</li>
</ul>
</li>
</ul>
</div>
my CSS
.MenuContainer {
width:100%;
height:50px;
border:1px solid;
position:relative;
}
ul {
margin:0;
padding:0;
}
/*Main menu*/
li.menu {
height:50px;
float:left;
}
ul.menu li {
list-style:none;
float:left;
height:49px;
text-align:center;
}
ul.menu li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:49px;
text-decoration:none;
color:#5d5d5d;
}
ul.menu li:hover > a {
color:#fdfdfd;
}
ul.menu li:hover > ul {
display:block;
}
/*sub menu*/
li.sub {
height:40px;
float:left;
}
ul.sub li {
list-style:none;
float:left;
height:39px;
text-align:center;
}
ul.sub li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:39px;
text-decoration:none;
color:#5d5d5d;
}
If anyone can tell me where i went wrong please do. First time trying to create one from scratch.
Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.
Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.
Thanks on advance.
Hey i think you want this do the sun class position relative and sub ul give position absolute
.sub{
position:absolute;
}
ul.menu li {
position:relative;
}
Live demo http://jsfiddle.net/HVk4G/
Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}