The website I'm developing has a horizontal scroll bar and I'm not sure why.
Fiddle
HTML
<body>
<div id="header">
<div id="logoHolder">
Logo
</div>
<div id="loginHolder">
Login
</div>
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body {
}
/*Header*/
#logoHolder{
width:20px;
background-color:green;
float:left;
}
#loginHolder{
width:20px;
background-color:green;
float:right;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
I'm using the 960 gridsystem as well.
Example
It is #loginHolder
You can either take away width:20px; or give it a margin-right:20px; and it will go.
You ought to be using the development tools that are built into browsers these days. Firefox and Chrome both have features that can be accessed by pressing F11. There is also Firebug for firefox.
Any of these will go into an 'inspect elements' mode where you can hover over your page and identify where your elements sit and exactly how big they are, even when they are filled with whitespace.
These tools also let you experimentally edit css directly in situ, so you can find a better way to style the elements the way you intended them to work.
Also Chris Pederick's Web Developer Toolbar has proven to be a useful development tool.
Related
I am trying to center my navigation bar but every way I have tried so far results with either the navigation bar not centered or it is centered but the links aren't in one line. I would also like to keep the logo in line with the navigation bar but floating left. I tried adding a container class and a nav id but I don't think that did anything. Please Help!
Here is my html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li>Our Sponsers</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is my css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Using flex property will solve your problem. Learn more here.
Working code: https://codepen.io/Sahero/pen/rzmVjN
You should change your CSS Code .nav to #nav.
There are a lot of way to make located your logo.
I'd like to recommend display:flex.
You can find easy about flex.
I'm building a page with a header at the top, a menu on the left and a footer at the borrom. I've defined all of these using .
The link is in the menu. As long as I'm not applying the css, the links work, but as soon as I apply the css that is in an external file it stops working.
I can see it change when I hover and disappear when I click on it, but the page doesn't change.
It only works if I open the link in a new window or in a new tab. Why is it doing this? How can I fix it?
Here's the HTML code :
<body>
<div id="container">
<div id="header">
<h1>Site HTML</h1>
</div>
<div id="menu" >
<h1>Navigation</h1>
<ul>
<li> Javascript </li>
</ul>
</div>
<div id="content">
<p>
</p>
</div>
</body>
and here is the CSS for the menu and the link to clic on.
#menu {
min-width:20%;
max-width:20%;
min-height:80%;
max-height:80%;
background-color:#
margin:0;
padding:0;
position:fixed;
top:10%;
overflow:auto;
}
#menu li {
list-style-type:none;
font:large, arial,sans-serif;
}
#menu a:link,a:visited{
display:block;
font-weight:bold;
color:#FF6600;
background-color:black;
width:75%;
text-align:center;
padding:4px;
text-decoration:none;
}
#menu a:hover {color:#0000FF;}
#menu a:active {visibility:hidden;}
Remove #menu a:active {visibility:hidden;}
Don't think it makes any difference.
Because you are setting the property visibility hidden on active pseudo class. Just remove the line:
#menu a:active {
visibility:hidden;
}
http://jsfiddle.net/gomflo/KEq8U/
I am creating my own personal website as a test for what I have learned so far in HTML and JavaScript. I made the toolbar, and it looks nice on my monitor, which has quite a large width. I have the toolbar contents to be in the center. I tried accessing it on a smaller monitor, and the elements in the toolbar overlapped each other because I set the contents based on percentages. I know that measuring with pixels will come up with the same problem. How would I create a website where if the monitor width is larger than x pixels, then it will center the contents of the toolbar, but if the monitor width is smaller than x pixels, it will not center the contents of the toolbar?
As you can see in this jsFiddle, the elements overlap, but if you drag the view pane wider, you can see that it centers.
index.html:
<body>
<div id="header">
<div id="toolbar">
<div id="links">
<ol>
<li id="home">Home</li>
<li id="blog">Blog</li>
<li id="forum">Forums</li>
<li id="chatbox">Chatbox</li>
<li id="code">Code</li>
<li id="calendar">Calendar</li>
</ol>
</div>
<div id="login">
Username: <input type="text" name="firstname"></input>
Password: <input type="text" name="lastname"></input>
<button id="submit" class="button">Submit</button>
</div>
</div>
</div>
CSS:
body{
background-color:#EBF2F0;
margin-top:50px;
}
#links{
padding:0px;
margin:0px;
top:-10px;
position:absolute;
vertical-align: center;
}
a:link{
text-decoration:none;
color:#FFFF00;
}
a:visited{
text-decoration:none;
color:#FFFF00;
}
a:hover{
text-decoration:none;
color:#000BF2;
}
a:active{
text-decoration:none;
color:#FFFF00;
}
li{
display:inline;
padding:0px;
font-family:Courier;
}
ol{
list-style-type: none;
}
#header{
width:100%;
padding:5px 10px;
margin:0px;
height:25px;
top:0px;
left:0px;
position:fixed;
background-color:#000000;
}
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
}
#home,#blog,#forum,#chatbox,#code,#calendar{
padding:10px;
color:#000BF2;
}
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{
background-color:#2E2E2D;
color:#000BF2;
}
#login{
color:#FFFFFF;
margin-right:30px;
text-align:right;
}
#submit{
margin-top:-7px;
margin-left:10px;
padding:6px;
}
If you need a CSS only solution you could play with min-width:
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
min-width:1200px;
}
Fiddle
I have this working fine on IE 9, Firefox 21.0 but not on Chrome Version 28.0.1500.95. How can I get this working across other browsers?
I have the following as my HTML and CSS.
<div class="footer">
<div class="contact">
<ul>
<li >Contact</li>
<li >Site Map<div ></div></li>
<li >Legal</li>
<li >Privacy Statement</li>
<li >Send Feedback</li>
</ul>
</div>
<div class="clear"></div>
<div class="copyright">© 2013 Hygeia Group. All Rights Reserved.</div>
<!-- <br clear="all"/>-->
<div class="social">
<ul>
<li>Tweeter<div class="separator"></div></li>
<li>Youtube<div class="separator"></div></li>
<li>FaceBook<div class="separator"></div></li>
<li>LinkedIn<div class="separator"></div></li>
</ul>
</div>
</div>
.footer {
height:40px;
font-size:11px;
bottom:0px;
}
.footer ul{
margin-left:24.95%;
list-style:none;
list-style-type:none;
list-style-image:none;
list-style-image:url("../images/separator.png");
z-index:50000;
list-style:none;
}
.footer ul li{
padding:0 5px 0 0px;
margin-right:15px;
list-style:none;
list-style-type:none;
list-style-image:none;
float:left;
list-style-image:url("../images/separator.png");
text-align: center;
}
.footer ul li > a{
text-decoration:none;
color:#666;
padding:0px 2px;
}
.footer ul li:first-child {
list-style-image:none
}
Just fyi: if you misname a .png as .jpg (or vice versa), some browsers won't load it.
I'm seeing it fine in Chrome 28.0.1500.95 when I use jsfiddle.net for testing. Try using that site to create a page we can all see.
I supplied a 'separator' image I had lying around -- I assume that it's not something odd about your .png file, and that it displays correctly when you load it directly?
I'm working on a site for a client of mine, the issue I am having is that whenever you resize the window the buttons on the navigation bar all squish together. The cause of the issue isn't apparent to me so I came here to ask for some help. Also the navi bar looks fine for me when the browser window is maximized, but for my client she sees the twitter button in the middle of the page. I think it's just a resolution issue as her screen is smaller than mine but is there a way to resolve this?
website:
the crue cart
HTML
<title>the crue cart</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><div id="logo">
<h1 class="thecruecart">the crue cart
<img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
<h1 class="wholesnackerie">whole snackerie<h1>
</div></li>
<!--Who What When Where Why Help!-->
<li class="navigation">Who<span class="green">?</span></li>
<li class="navigation">What<span class="green">?</span></li>
<li class="navigation">When & Where<span class="green">?</span></li>
<li class="navigation">Why<span class="green">?</span></li>
<li class="navigation">Help<span class="green">!</span></li>
<li class="navigation">ORDER<span class="green">!</span></li>
<li class="navigation"><div id="share">
<iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div></li>
</ul>
</div>
<div id="navbar"></div>
<div id="title">
<h2 class="title">Catering? Hungry?</h2>
</div>
<div id="body">
<p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
<br/>
<p>Want to chat? <span class="chunky">Email us: hello#thecruecart.com</span></p>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<p class="ft">© the crue cart 2010. All Rights Reserved.</p>
</div>
</body>
CSS
#font-face {
font-family: chunkfive;
src: url("fonts/Chunkfive.otf") format("opentype");
}
#font-face {
font-family: aller;
src: url("fonts/aller.ttf") format("truetype");
}
#font-face {
font-family: tgheros;
src: url("fonts/tgheros.otf") format("opentype");
}
#font-face {
font-family: tgheros-bold;
src: url("fonts/tgheros-bold.otf") format("opentype");
}
html {}
body {
width:auto;
height:100%;
background-color:#ffffff;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
h1, h2, h3, h4, h5, h6 {
font-family:chunkfive;
color:#0000ff;
margin:0px;
}
h1 {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin:0px;
padding:0px;
}
h1.thecruecart {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin-left:auto;
}
h1.wholesnackerie {
font-family:chunkfive;
color:#44aa00;
font-size:15px;
margin-left:40px;
}
h2.title {
font-size:35px;
margin-top:10px;
margin-left:10px;
}
h2 a{
font-size:35px;
color:#44aa00;
margin-top:10px;
margin-left:10px;
}
img {
margin:0px;
}
img.leaf {
position:relative;
top:2px;
left:-8px;
}
p {
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.order{
font-family:tgheros-bold;
font-size:16px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.facebook {
display:inline;
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:5px;
}
p.ft {
color:#0000ff;
font-family:chunkfive;
font-size:14px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
a {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
text-decoration:none;
margin:0px;
padding:0px;
}
a:link, a:visited, a:hover, a:active {
}
a.navigation {
color:#0000ff;
font-family:chunkfive;
font-size:20px;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0px;
padding:0px;
}
li {
float:left;
}
li.navigation{
display:inline;
position:relative;
top:33px;
float:left;
margin-left:45px;
}
iframe {
display:inline;
margin-top:0px;
margin-left:10px;
}
/*Facebook Stuffs*/
/*Twitter Stuffs*/
.chunky {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
.green {
color:#44aa00;
}
.clearfooter {
height:1px;
clear:both;
}
#container {
min-height:100%;
margin-bottom: -20px;
position: relative;
}
#header {
display:block;
width:auto;
height:58px;
padding-right:5px;
padding-left:5px;
}
#logo {
margin-top:0px;
margin-left:10px;
}
#navbar {
display:block;
width:auto;
height:2px;
background-color:#0000ff;
}
#share {
display:inline;
margin:0px;
}
#body {
width:1330px;
margin:0px;
margin-bottom:30px;
padding:0px;
}
#footer {
display:block;
width:auto;
height:10px;
position:realtive;
text-align:center;
clear:both;
}</code>
Problem is, is that you don't have a fixed width container you have width:100%, the site is liquid.
You need to set a width on a container and it will play nice!
You have set the body width to 1330px. If you are really making a site for a client, you might be better of going with the "standard" maximum width of 960px. That way the site will work properly on most screen sizes.
Some reading that sides the magic number: http://cameronmoll.com/archives/2009/04/is_it_time_to_move_beyond_960/
ps. You should not set the width to the body element itself, some older browsers are quite quirky with it, I think at least IE6 does not understand it, but cannot check now since I'm don't have it close to hand.
I don't think you have posted all the CSS styles in your question. Nevertheless, you have to fix the width of the navigation bar element in css. You could use a fixed width for your header div, but I'd use another div or ul for the navigation items and use fixed width on those, so that the rest of the items in the header can still float around.
You don't have a doctype and are in quirks mode. Add this to your first line and see where we stand: <!doctype html>
There are quite a few ways of styling your navigation, and I made a variation on your layout to illustrate how you might approach it.
Please see my variation at: http://jsfiddle.net/audetwebdesign/YzrUn/ and my following comments and explanation.
CSS Styling
You can take advantage of CSS selectors and get rid of unnecessary classes, thus simplifying your style sheet.
Keep the logo as a separate div in the header and use the ul list to mark-up your navigation links.
You can either typeset your logo or use an image. Fixing the with of the logo div helps a bit, the height can be set to auto or fixed if you are using an image.
Let's float the logo div to the left and see how this all works out.
Add the blue border to the header to serve as a visual separator.
The Flexible Navigation Bar
Set the margin of the 'ul' list so that it clears the logo div. Since the logo is floated
left, the left margin is needed otherwise the links will overlay the logo.
We float the li elements to the left, add some margins, and then display the a navigation links as block's, add some padding.
Note how I used the b to add the green punctuation, simpler than span+class.
Finally, add a class to the last li element so that you have a hook to style the iframe and other bits related to the social media sites.
How This Works
In my demo, you can vary the width of the output window.
As you make the window narrower, the links (include the social media bits) will wrap around to the right of the logo and the header panel will expand vertically, thus allowing all the links to be accessible on smaller screens or to people who prefer to use a narrow browser window.
This way you don't have to fix the width of the page unless you have other reasons to do so.
You can adjust padding on various elements to get the vertical alignment that you need. I think that there are enough adjustable elements here to take care of any eventualities in your design.
Finally, for best results, use a strict doctype, otherwise, quirks mode in IE may cause issues.