Im having some trouble! Something really simple i believe. However its troubling me.
I am trying to achieve:
1) The navigation bar to be the width of the main image above it.
if anyone can solve this for me i would be truly greatful and it would be a huge help. Im very new to coding and this has been hard for me.
Ive done my fair share of looking for an answer but have failed so far.
here is a picture of the page http://i46.tinypic.com/w9a80i.jpg please excuse the white box covering the graphic that is simple for privacy etc
css:
/* Reset */
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 4px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin:auto;}
#wrapper { width: 900px; margin:0; background-color: #666; }
#list-nav { width: 700px; float: right;}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
width: 100px;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<div id="wrapper">
<img src="css/Images/banner top.jpg" />
<div id="navbar">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</div>
</div>
</div>
</div>
I'm not sure i understand well, but i think that's what you are looking for.
First, your nav was 700px large, also your image and container are 900px.
Make your #list-nav : width:100% as large as the container and the image
Then the li, which are 5 of them, must be 20% large of the ul(so they have the same width)
#list-nav li{display:inline-block;width:20%;float:left}
Here's your code with modification
Is that what you wanted to do ?
You can also do it with a display:table-cell trick.
remove the width definition of #list-nav: #list-nav{ /*width: 700px;*/ float: right;}
and add this
ul#list-nav li {
display:inline-block;
}
Related
How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
I've tried several changes but it keeps going onto the next line. I'm trying to avoid using floats because I was told they are not good to use. I want it to look like the navigation bar on this website in this end:
http://www.freecsstemplates.org/
I would like to understand how it is being done on that website.
I am just very confused as to how the process is to work.
CSS:
#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}
#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}
#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}
#menu a:hover,a:active
{
background-color:#7ce5e6;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<ul>
<li>Home</li><li>Contact</li><li>About</li><li>Products</li><li>Design-a-Tee</li><li>Reviews/Testimonials</li>
</ul>
</div>
</div>
</body>
</html>
add this css
#logo {
float:left;
}
#menu {
float:right;
}
#header {
clear: both;
overflow: auto;
}
I am new to CSS but loving it so far. But, I've hit a road block with my code. I'm almost there but need some proper guidance.
I have provided my website where I'm attempting to place my logo to the left side of my nav. I want the site content CENTERED with a width of 960px and 0px from the top (against the top of the browser). I am using the CSS display: inline with li selectors to try to achieve my goal.
I'm trying to also get the inline nav to be right up against the logo. I'm also trying to mimic the logo's top 4px border with the CSS a:hover selector on the nav. I want this to be at the margin-top: 0px in the browser.
Here's the link to my almost correct logo/nav layout:
http://multimediaxchange.com/vls/index.php?page=home
Here's my CSS CODE:
.topbar {
width:960px;
height:87px;
text-align:center;
}
.topbar-inner {
width:960px;
margin:0 auto 0 auto;
text-align:center;
}
.logo {
margin-top:0px;
display:inline;
}
img {
float:left;
border: 0;
padding: 0;
margin: 0;
}
.menu {
display:inline;
margin-top:0px;
}
.menu > ul > li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
margin-right:0px;
padding-top:40px;
min-width:80px;
}
.menu > li {
display:inline-block;
list-style:none;
margin-top:50px;
}
.menu li a {
color: #000;
display: block;
text-decoration:none;
}
.menu li:hover {
border-top-color: #039;
}
.menu li:hover a {
color:#039;
}
body {
font-family:Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
height:500px;
padding:0px 20px 20px 20px;
text-align:left;
font-size:12px;
}
.footer {
border-top:1px solid #DFDFDF;
width:960px;
margin: 0 auto;
font-size:11px;
text-align:center;
}
Here's the HTML Code:
<?php
// Load Setup document:
include('_config/setup.php');
?>
<!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><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
<!-- logo -->
<div class="menu"><?php include('_template/nav_main.php'); ?></div>
<!-- menu -->
</div>
<!-- topbar-inner -->
</div>
<!-- topbar -->
<div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>
<div class="content"><?php get_page_body($dbc, $pg); ?></div>
<div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>
Thanks!
everything is right but you need to add this property margin:0 auto; not to the topbar-inner class but to the topbar class, and this like like this. so change present
.topbar {
width:960px;
height:87px;
text-align:center;
}
to
.topbar {
width:960px;
height:87px;
text-align:center;
margin:0 auto;
}
The secrets are in the .topbar class. Remove the text-align:center, and instead add a margin:0 auto. Should look like this:
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
The text-align:center prevents the <ul> from being centered in the remaining space after the image floats, so the top border looks seamless.
The margin:0 auto centers the whole kaboodle.
Add this line:
.menu ul {
margin:0;
}
and it will be on the top of the browser. My comments about a lot of extra junk still apply though :)
EDIT
Here's your page, with the "minimalist" markup and styling I'm talking about. There's one or two minor tricks a beginner may not know, but you should easily understand pretty much everything.
Just slice out all the crap extra divs, basically, and you can chase down problems quicker, target elements easier, have a lighter page (in bytes, that is) and generally add a bit of elegance to your solutions.
This rebuild does everything the original did, in half the space.
HTML:
<body>
<div class="topbar">
<img src="logo.png" height="87" width="287"/>
<ul class='menu'>
<!-- Not great practice to stagger </li> like this,
but a good way to avoid rogue padding. -->
<li>Home
</li><li>Staffing
</li><li>Jobs
</li><li>Training
</li><li>GSA
</li><li>Why Us
</li><li>Clients
</li><li>Contact</li>
</ul>
</div>
...the rest of your page...
</body>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
.topbar img {
float:left;
border: 0;
}
ul.menu {
margin:0 0 0 287px;
padding:0;
}
ul.menu li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
list-style:none;
padding-top:40px;
min-width:80px;
}
ul.menu li a {
color: #000;
display: block;
text-decoration:none;
}
ul.menu li:hover {
border-top-color: #039;
}
ul.menu li:hover a {
color:#039;
}
It is a good practice to put your divs inside a container, something like this:
<div id="container">
<div class="topbar">
<div class="topbar-inner">
<div class="logo">
<img src="/vls/_images/mylogo.png" height="87" width="287"/>
</div>
<div class="menu">
<?php include('_template/nav_main.php'); ?>
</div>
</div>
</div>
<div class="bdy_hdr">
<?php get_page_name($dbc, $pg); ?>
</div>
<div class="content">
<?php get_page_body($dbc, $pg); ?>
</div>
<div class="footer">
<?php include('_template/footer.php'); ?>
</div>
</div>
Then do just this in your CSS:
.topbar{
margin:0 auto;
}
I suggest you to give a width to .bdy_hdr, .content and .footer and then do the same with them, i.e:
.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}
below is the sample of my websites navigation div
when i reduce the size of the window the other links gets on next line instead of being fixed to therir postion.here is the cose and css.
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id=navigation>
<ul id="navigation-bar">
<li>Home</li>
<li>Gallery</li>
<li>Images</li>
<li>Softwares</li>
<li>Contact</li>
<br><br>
</ul>
</div>
</body>
</html>
and here is the css
div#navigation {
width:100%;
background-color:#000;
border-top:2px solid #5d6869;
border-bottom:2px solid #5d6869;
}
#navigation-bar {
list-style: none;
margin: 0px;
}
#navigation-bar li {
display: inline;
float: left;
}
#navigation-bar li a {
padding: 0em 1em 0.08em 1em;
text-decoration: none;
color:#fff;
font-size:1.8em;
}
#navigation-bar li a:hover {
text-decoration: none;
color:#fff;
background:#5d6869;
}
can anyone help me whats the reason?
It's because your li elements are floated left. Floated elements, when the parent's width is not wide enough to fit, automatically move to the next line. It's their built in behavior
If you want them to stay on the same line and be hidden when the parent is not wide enough, you can give them display:inline-block and give the parent a set height, say height:35px;, and also give the parent overflow:hidden;
Demo Here of that approach
EDIT based on your comment below
In that case, give the parent a min-width. Demo here
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets\sets1.css">
</head>
<style type="text/css">
body /* site bg color */
{
margin: 0;
background-color:#b0c4de
}
#navbar ul {
margin: 0;
padding: 5px;
cellspacing: 0;
cellpadding: 0;
border: 0;
list-style-type: none;
background-color: #8B008B;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: #8B008B;
}
#navbar ul li a:hover {
color: #0EC6D7;
background-color: #8B008B;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="images/logo.png" alt="Site Logo" height="50" width="68"></img></li>
<li>Forum's</li>
<li>Chat's</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
</body>
</html>
added margin: 0; to body tag and it works like fb header covering whole top of page no white space or ignorant breaking or any thing like that also its cross browser so thanks alot .thank all you users who have helped me with this
Set the margin to 0px in the body
body{
margin:0px;
background-color:#b0c4de
}
This will remove any white spaces around the body
If you want the navigation bar to span the top of the entire page try setting the width to 100%
#navbar{
position:relative;
width:100px;
height:auto;
background-color: #8B008B;
}
This will make a Magenta bar across the top of the page. Not sure about what height you want so I get it to auto so it will re-size depending on the content. You can then place your logo image inside this div.
If you mean a "sticky" header then use position:fixed
#navbar{
position:fixed;
top:0;
left:0;
}
You may need to define width, z-index, or anything else specific to your design, but this is the basic idea.
If you didn't mean sticky, then maybe william got the answer right.
You need to put margin: 0; in the body tag. I recommend to use a reset style that you can find in google to reset all spaces that browsers put.
I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.
This is screen shot of the div and the ul in it:
And this is the CSS code I'm using:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
I've never come across this problem before. Does anyone have any solution? Thanks.
UPDATE (HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
Another update (CSS code of the parent div):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
.stats-list ul {
padding-left: 0;
}
Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"