im trying to create a navigation bar that is sticky when im scrolling down but when i put position:fixed; on the text so they will scroll down too they overlap. i don't want to use jquery because my prof. says so.
<html>
<head> <title> My Portfolio </title>
<link rel="stylesheet" type = "text/css"
href="stylesheet.css"> </head>
<body>
<ul>
Home
<a href="About.html" > ABOUT </a >
<a href="Projects.html" >PROJECTS </a >
<a href="Resume.html" >RESUME </a >
<a href="Gallery.html" > GALLERY </a >
<b> </b>
</body>
</html>
CSS
body{
background-position:fixed;
background-repeat:repeat-x;
background-color:white;
font-family:Arial;
font-size:20px;
}
a{
color:#1b1b1b;
TEXT-DECORATION: NONE;
position:fixed;
z-index:2;
}
b{
top:0;
height:30px;
width: 100%;
background:white;
text-align:left;
position:fixed;
z-index:1;
}
Is this kind of you are looking for?
check the Demo.
http://jsbin.com/tafofesi/1/edit
There's quite a few issues with your code. For one thing, there is no closing tag on your <ul>. Some browsers will add these for you, but you shouldn't count on it. Secondly, <ul></ul> is an unordered list, which means it needs to have list items (<li></li>).
Another thing is that you're treating the <b> tag as an element. By default, <b></b> is meant to apply a bold state to text.
<ul>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li><b>BOLD LINK</b></li>
</ul>
Your main problem is that you've applied the position: fixed; to your links, and not to their container. What you want is for each link to be positioned relative to the other (position: relative;). Add a container to your menu (<ul>), and make its position fixed. All elements within that container should be positioned relatively or static.
See this example here: http://jsfiddle.net/7LTqQ/.
Related
I am a first time HTML user and need help to center my current navigation bar:
http://i.stack.imgur.com/czpJr.jpg
The code for it is as follows:
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class="navBar">
<ul>
<li><h2>ABOUT</h2></li>
<li><img src="ICON.jpg" width="60" height="60"></li>
<li><h2>MUSIC</h2></li>
</ul>
<!/div>
</body>
</html>
With the relevant parts of the external stylesheet in this image(couldn't get it to work as a code block - noob me):
http://i.stack.imgur.com/JaIah.jpg
Please help me work out to make this navigation bar appear in the center of the page, and not on the left. I have tried changing the float left in the CSS but all is does is make the nav bar appear vertically not horizontally, and it still appears on the left :(
Thanks,
Sam
to comment out HTML use this syntax (you're missing the dashes):
<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->
adding "float: left" to the li elements is forcing your elements to align to the left. To get the nav items to appear horizontally, use "display: inline-block;" instead. Also, you are using "align"... it shoudl be "text-align".
Example in codepen!
http://codepen.io/Drodarious/pen/bdmavb
U can center your element like this(see example below: with the text align center on the ul).
u could also, provide a width to the ul, for example 300px , and then add margin:0 auto; margin auto won't work on a block element without setting its width. or you should use inline-block;
(http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Ps As h1 is a block element and a is an inline element the correct way is
<h1>This is a title</h1>
, when using the header.
Though because is a block element it will take up all available space, meaning, all list items will still be underneath eachother, so specify the space it should take.
header nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
header nav ul li {
display: inline;
}
header nav ul li a {
text-decoration: none;
}
<html>
<head>
<title>large background</title>
</head>
<body>
<header>
<nav>
<ul>
<li>ABOUT
<li><img src="ICON.jpg" width="60" height="60">
<li>MUSIC
</ul>
</nav>
</header>
</body>
</html>
I suggest reading about: http://learnlayout.com/display.html
Hope this helps you a bit.
When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.
I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.
Firstly, there are 3 separate images. A chick, the word 'delivery' and 'foodstant' I wanted to align them in such a way--> 3 images
Are there any methods to achieve such positioning which enables an unchanged position despite the resizing of the browser window and perhaps resolution ?
Both Absolute and relative positioning works, but resizing the browser screws up everything.
Margins can't seem to do the trick.. Or I am just less-skilled.
HTML code as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<figure>
<img id="del" src="images/delivery12.png" alt="Delivery" />
<img id="foo" src="images/foostant2.png" alt="Foodstant" />
<img id="chi" src="images/logochick.png" alt="Chick" />
</figure>
<nav id="hnavbar">
<ul id="hli">
<li><a id="home" href="index.html">Home</a></li>
<li><a id="menu" href="menu.html">Menu</a></li>
<li><a id="cu" href="ContactUs.html">Contact Us</a></li>
<li><a id="au" href="aboutus.html">About Us</a></li>
<li><a id="tc" href="TC.html">Terms & Conditions</a></li>
<li><a id="job" href="jobs.html" target="_blank">Jobs</a></li>
<li><a id="yo" href="order.html">Your Order</a></li>
</ul>
</nav>
</body>
CSS code as follows
/* Foodstant Delivery */
* {
margin: 0;
padding:0;
}
body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");
}
/* home page */
#hnavbar{
font-size:2em;
margin-top:-13em;
}
#hnavbar ul li {
list-style-type:none;
width:325px;
display:inline;
padding:0 13px 0 13px;
}
#chi {
position:relative;
top:-30em;
left:10em;
}
#foo {
position:relative;
top:1em;
left:-11em;
}
#del {
position:relative;
top:10.5em;
left:26em;
}
/* home page */
Many thanks in advance.
Specify the values for top and left in percents as opposed to 'em'. These percentages would be relative to the parent element containing these image. OR simply use one single image instead of 3 and use a image map. Here s a coupla online tools to do this:
http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/
I recently had to do something very similar to this and after some time I decided I had to use absolute positioning to every link. The problem with your code is that it seems that you don't quite understand how relative and absolute positioning works. Absolute objects are always relative to it's nearer parent set to "relative position". So you should try this:
#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar
#home, #menu, ... { position: absolute; }
And after that, you should set the position of every absolute positioned menu link with top/left or bottom/right properties.
For the image, if you don't have links for "Foodstant" and "Delivery", I would really use one single image.
Hope it helps!
I have made a navbar at the top of my website which contains multiple buttons. One of the buttons right now I added a dropdown menu. It simply uses a unordered list with list items in with a little CSS coding to make it have some colour and actually be hidden until hovered. This works, I have tried it on IE and FF. Both work fine. Now Google Chrome when I try it there, there are some issues.
On hover the items appear which they should. But when I try and click on them they disappear. I've also been on another site and have had this issue though I did not code it in that case. I'm assuming this is a Chrome issue, but I also assume that there is something I can do to fix this on my site.
My question is how do I fix this issue on Chrome (Looking at the code not the browser though)?
Note: If I do a hard refresh (CTRL+SHIFT+R) I am able to hover over the things fine. Once I click on a link or perform a normal refresh again though the issue comes back. Obviously I don't want to have to do a hard refresh to click an item in the dropdown nor would users of the site want to.
Edit: Here is a link to where you can look at the problem on my websites testing area:
Testing Area
Edit2: Since I'm getting no responses I will include the code.
index.php:
<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<?php include("header.php"); ?>
<p class="content" >Welcome to my homepage! This page will feature a wide range of things from video tutorials to help forums. </p>
<p class="content" ><em>Remember the site is currently being devopled still! Check out the "Contact Us" button on the left if you have any bugs to report.</em></p>
<?php include("footer.php"); ?>
</body>
</html>
style.css:
b{
color:#000000;
}
a{
text-decoration:none;
color:#666;
}
img{
display:block;
margin:auto;
}
p.welcome {
text-align:center;
font-family: “verdana”;
font-size:1.875em;
color:white;
font-weight:900;
}
p.content {
font-family: “verdana”;
font-size:1em;
color:white;
}
div.main{
width:75%;
margin:auto;
background:black;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
float:left;
margin:0;
padding:1em;
color:white;
}
div.row2col2{
margin-left:10%;
margin-right:10%;
background-color:brown;
padding:1em;
border:15px solid #212121;
}
body{
background-color:#393635;
color:white;
}
p.footer{
text-align:right;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
header.php:
<div class="main">
<div class="row1"> <img src="logo.png" alt="Logo"/>
</div>
<div class="navMenu">
<ul>
<li>Home</li>
<li>Videos
<ul>
<li>Latest Videos</li>
<li>Tutorials</li>
<li>Gaming</li>
<li>Coding</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<br class="clearFloat" />
</div>
<div class="row2col2">
footer.php
</div>
Copyright Fog Productions 2012
</div>
From what I can tell, a small gap between the anchor and the sub-list is causing it to disappear is causing the list to vanish when you stop briefly hovering over the anchor.
I was able to test this by reducing the positioning of the sub-list by 2px (below) so that it was touching the anchor - therefore not leaving the anchor before hovering over the sub-list.
.navmenu li ul {
top: 30px; /* instead of 32 */
}
I have tested your demo site in the Chrome Browser and the menu functioned correctly. I tried several times and could not reproduce the "disappearing menu" issue you mention above (I was able to click on all the menu links)
Is your Chrome up to date? You can view this by clicking on the Wrench icon > About Google Chrome. The most up to date version (at this point) is 18.0xxx
If you are still having issues try disabling all add-ons, clearing your cache and testing it again. To disable add-ons go here: Wrench icon > Settings > Extension tab