I have a navbar right under the title to the site, but I want to be line up the first and last items in the navbar with the beginning and end of the Title. I don't have a live preview, but I attached an image. I can get it to line up in one browser, but when I open it in the other, its off again. Is there an easy way to line the text up so it works for everything? thank you
HTML:
<body onload="play()">
<div class="heading">UPRISING</div>
<div class="container_12">
<div id="topnav" align="center">
<ul id="list-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>TRAILER</li>
<li>STILLS</li>
<li>NEWS</li>
<li>CONTACT</li>
<!-- <li>DISTRIBUTION</li> -->
</ul>
</div>
<!-- START OF CONTAINER -->
<div class="trailer">
<img id="imgHolder" />
</div>
</div> <!-- END OF CONTAINER 12 -->
CSS:
#topnav li {
margin-right: 110px;
}
#topnav li:nth-last-child(1) {
margin-right: 0px;
}
You can work with text-align: justify
See a demo
This is a kind of problem which call for good old tables.
<table id="list-nav">
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>TRAILER</td>
<td>STILLS</td>
<td>NEWS</td>
<td>CONTACT</td>
</tr>
</table>
The widths will be evenly distributed problem solved.
Or...
#list-nav li:last-child { text-align: right; }
Set a fixed width for your list items. Align the first one to the left and the last to the right, all those in the middle should be center-aligned. This way, you're not leaving yourself at the mercy of the font renderer.
Update with CSS:
#topnav li {
text-align: center;
width: Xpx; /* X is total width divided by number of list items */
}
#topnav li:first-child {
text-align: left;
}
#topnav li:last-child {
text-align: right;
}
Related
I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.
However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.
For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li>About Me
</li>
</ul>
<ul>
<li>Photo Edits
</li>
</ul>
<ul>
<li>Video Edits
</li>
</ul>
<ul>
<li>Writing
<ul>
<li>Samples</li>
<li>Recognition</li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
Voo2Do Public Task List
Sitemap Public Image
Wireframe Public Image
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
And here is my CSS Code for the Navigation Bar:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me?
note I am not using JS or JQ.
Just add the images in HTML instead of CSS, and then style them.
Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:
<img src="/images/about-me.jpg" alt="About Me">
Then in your CSS just target the image:
#navMenu ul li a img { width: 254px; height: 35px; }
You then just need to add any styles for positioning.
For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.
You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.
If you would like more specific info please create a codepen or jsfiddle with your current state of things.
I am using the skeleton framework and am trying make a simple nave bar?
When I try and create a nav-bar div and set the css nav- bar id colour to blue the background won't change. However if i try and change the individual columns the colour will change. Is there a way will a grid framework to create a consistent nav bar on top with out telling each column to be a certain colour. this seems silly.
Also is it possible to have a nav bar that extends past the frameworks 960px length? I would like to have the bar background extend to both sides of the screen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="skeleton.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<div class="container">
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar--->
</div><!---container--->
</html>
CSS:
.container {
margin-top: 50px;
}
#nav-bar {
background-color: blue;
}
#nav {
margin: 13px 0 0 0;
}
#nav ul li {
display: inline;
margin: 0 20px 0 0;
margin-bottom: 130px;
}
#nav a {
text-decoration: none;
color: black
}
#nav a:hover {
text-decoration: underline;
}
https://jsfiddle.net/gp9d7yvz/
the #nav children is floating left that make #nav has no height.
Let append <div style="clear:both"></div> before the closing tag of #nav to make it have height like this fiddle.
https://jsfiddle.net/gp9d7yvz/2/
There is an error on the third line of your CSS code : there is no closing } tag. This causes the following CSS to malfunction. You also forgot to put the closing ";" at the end of your "color:black;" property. If it doesn't work also add a fiddle please.
First question:
Try adding background-color under #nav not under #nav-bar
#nav {
margin: 13px 0 0 0;
background-color: blue;
}
Second question:
All your content is inside a .container with a width of 960px. You cannot get these div's to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header outside of the container.
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar-->
<div class="container">
</div><!---container-->
Here is an example:
https://jsfiddle.net/gp9d7yvz/5/
When using grid 960, can I still have a 100% width header section?
i am trying on a footer to put an element on the far left:
--MY WEB SITE (aligned on the right)--
On the far right (the end of the list must be aligned with the right border of the browser), i want to put in order:
twitter, facebook, newsletter
By floating left, what i get is the opposite of the html file
Thanks all
jsfiddle
<div class=footer>
<UL><H4>MY WEB SITE (aligned on the right)</H4>
<LI><a href=https://www.linkedin.com/pub/ric style='border-bottom: 0px'></A><LI>
<LI>twitter</LI>
<LI>facebook</LI>
<LI><font color='#0894D2 '>NEWSLETTER</FONT></LI>
</UL>
</DIV>
.footer {
border: 2px solid grey;
width:90%;
height:auto;
text-align: center;
}
.footer:after {
content: '';
display: inline-block;
width: 100%;
}
.footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display:inline-block;
font-size:12px;
float:right;
}
.footer h4{
margin: 0;
padding: 0;
list-style: none;
display:inline-block;
font-size:12px;
float:left;
}
If you want to change an order of your list items on the right side, just try to change an order of list items tags in html...
<div class="footer">
<ul>
<h4>MY WEB SITE (aligned on the right)</h4>
<li><a href="https://www.linkedin.com/pub/ric" style='border-bottom: 0px'></a></li>
<li><font color='#0894D2 '>NEWSLETTER</font></li>
<li>facebook</li>
<li>twitter</li>
</ul>
</div>
Change your HTML as such:
<div class="footer">
<H4>MY WEB SITE (aligned on the right</H4>
<ul>
<li><font color="#0894D2 ">NEWSLETTER</font></li>
<li><img src="images/facebook.png" />Facebook</li>
<li><a href="https://www.linkedin.com/pub/ric" style='border-bottom: 0px'><img src="images/linkedin.jpg" />LinkedIn</a><li>
<li>twitter<div id="logo_twitter"></div></li>
</ul>
</div>
First things first....
In order to achieve what you are looking for (hope I understood corectly), you should put the H4 tag outside UL. Then, in CSS, set the UL (footer ul) to float:right and the the LIs (footer ul li) to float:left.
See this example: https://jsfiddle.net/w6pa3L30/4/
.footer ul{float:right;}
.footer ul li {float:left;}
Now, you should also review your code. FONT tag is not supported in HTML5. You should also avoid using divs for displaying social icons (I guess that is what you wanted to do inside Twitter LI), instead use span tag. I would also recommend you to avoid using inline styling; style them inside your stylesheet.
So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
Home
About
Team
Science
Need
Pipeline
Contact
</div>
</header>
CSS:
header .nav {
margin-top:100px;
width:100%;
height:10%;
text-align:center;
padding-top:2%;
margin:0 auto;
position:fixed;
top:0;
}
header .nav a {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
color:rgb(1, 1, 1);
text-decoration: none;
font-family: 'Bebas';
}
header .nav a:hover {
color:white;
background-color: #404040;
border-radius:5px;
padding:0 auto;
}
header .nav a:active{
background-color: #404040;
border-radius:5px;
text-decoration:overline;
}
header .nav img {
width:260px;
height:65px;
padding-right:4em;
}
The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.
OR, can you tell me any other way to create a NAV bar that shows the logo as well.
so it would be LOGO and MENUS on the same line.
Great thanks in advance.
Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.
I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.
have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties
Today I tried something unique, so I decided to code my template.
You know some menus have a title and a description?
EXAMPLE:
Homepage
Our main page
Twitter
Follow us!
Thats how the menu should look like:
http://gyazo.com/360b81db32cf61922e9ff8f55274d779
Okay I tried adding a description simply by using in a li item and it didnt work at all!
<div class="header">
<div class="container">
<div id="logo"><img src="img/logo.png"/></div>
<div class="menu">
<ul>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
</ul>
</div>
</div>
</div>
That's the CSS I used:
.header {
background: #6b6353 url("../img/header.png");
width: 100%;
height: 112px;
}
#logo {
float: left;
margin-top:22px;
}
.subheader {
background: #deac12 url("../img/subheader.png");
width: 100%;
height: 36px;
}
.menu ul li{
display: inline;
}
Why doesn't it work even though it has inline & a break?
What happens with that code:
http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236
Thank you!
You should use display: inline-block for your li and for God's sake stop using <br> tags, use a <span> or a <p> instead.
.menu ul li{
float: left;
}
will solve your problem. You get the newlines, but the 2nd li starts immediately after the 2nd newline (the 1st line of the 2nd li will start next to the 2nd line of the 1st li), so this is something like
[Home
Main Page][Home
Main Page][Home
Main Page]...
Try using
.menu ul li{
list-style: none;
float: left;
}
Removing display: inline; will make the list styling visible, that's why list-style: none;, and the float: left; will make all <li> to be on the same line.