(No answers have worked as of yet, please keep answering)
http://gyazo.com/952d354b05e4a4a4cef08e74f8b0253d
http://gyazo.com/e8cc5ae0bcd0464eb074c4674d2896fb
As you can see from these images, I have created the navbar for my website but my website is too wide, it means that you have to scroll to reach the end of it, how would I change the width so it only goes up to the end of the navbar?
That is all my CSS for the navbar that I have used:
#title {
position:relative;
margin:17px 1680px 30px 15px;
}
#banner {
border:1px solid #4A4A4A;
width:1903;
height:110;
background-color:#4A4A4A;
margin-left:0px;
position:absolute;
top:-10px;
border-radius:15px;
}
#navbar {
position:fixed;
left:50%;
margin-top:2px;
}
ul {
list-style-type:none;
margin:-115px;
}
li {
display:inline;
padding:9px;
border:4px solid;
font-family:Bebas;
font-size:25px;
font-weight:bold;
color:#FFFFFF;
border-radius:10px;
background-color:#000000;
margin-left:2.5em;
}
This is my HTML code aswell:
<html>
<head>
<link type="text/css" rel="stylesheet" href="todd.css"/>
<title>Home</title>
</head>
<body bgcolor="#ABABAB">
<div>
<div id="banner">
<img src="file:///C:/Users/Todd/Desktop/Todd.png" id="title">
<div id="navbar">
<ul>
<li>Home</li>
<li>Not Finished</li>
<li>Not Finished</li>
<li>Not Finished</li>
<ul>
</div>
</img>
</div>
</div>
</body>
</html>
A couple things I see here...
Your navbar has this line:
width:1903;
If you don't want the navbar to be so wide, you should shrink this way down.
Additionally, if you want to keep the site from expanding so wide, you can also set the width for the html and body tags, like so:
html, body {width: 1024px}
Hopefully that helps...
EDIT
At second glance, I see your margin is also set very wide here:
margin:17px 1680px 30px 15px;
Shrinking the 1680 down will keep the bar from expanding so wide. This appears to be the main cause of your title bar extending out so wide.
If you use min-width the size of the page should minimise in order to fit all the content in.
#banner {
min-width: 1903px;
}
Related
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
I have a navigation bar which works fine, but I want to add padding and a height to each link.
Whenever I do so, It make all the links except the first one taller than they are supposed to be. This does not work in Fiddle for some reason, so here is the code:
(CSS)
body {
overflow-x:hidden;
font:13px arial;
background-color:#171120;
margin:0;
}
nav {
height:100px;
width:100%;
padding:10px;
padding-top:30px;
background-image:url('nav_bg.png');
border-bottom: 3px solid #302342;
}
nav #header {
color:#FFFFFF;
font:bold 56px arial;
float:left;
}
nav ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
margin-top:20px;
margin-right:180px;
overflow:hidden;
}
nav ul li {
float:left;
}
nav ul li a:link,a:visited {
display:block;
width:180px;
##################################If you add height or border or padding, the links become taller!
background-color:#333333;
text-align:center;
font:bold 26px arial;
color:#ffffff;
text-decoration:none;
}
(HTML)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<title>Testing...</title>
</head>
<body>
<nav>
<div id="header">Testing...</div>
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</nav>
</body>
</html>
Why can't I add height, padding or border on the links without them suddenly becoming taller?
This is well know and annoying problem.
This can be solved using "box-sizing"
See this link for a tutorial
This explanation is very relevant:
"The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. We can now safely declare our textarea to be of 100% width, including pixel-based padding and border, and accomplish out layout perfectly."
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
I am building a very simple webpage that has a header, a left-hand navigation box and some content, and a footer. It's using CSS to control the layout. It works fine if the text in my content area is short, but if the length of the text gets too long (i.e. in almost all cases) the content area drops below the navigation box rather than sitting nicely up next to the navigation.
The HTML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en-GB">
<head>
<title>Title Goes Here</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- local style sheet -->
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrapper">
<div id="navigation"><!-- Navigation -->
<ul>
<li>Navigation</li>
<li>Options</li>
<li>Go</li>
<li>Here</li>
</ul>
</div><!-- Navigation end -->
<div id="content"><!-- Main Content Area -->
<h2>Your Content Goes Here</h2>
<p>Whatever content you like can go here but if the text is too long it seems to
break the floating of the content and ends up below the navigation div.
This is really very annoying and I'd love to know how to fix it.</p>
</div><!-- Main Content Area end -->
</div>
<div id="footer">
<ul>
<li>Some</li>
<li>Footer</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
and the CSS looks like this:
body {
background:#000;
-webkit-background-size:1920px 1200px /* dimensions of graphic */
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
width:100%;
}
#header, #wrapper, #footer {
width:100%;
}
/* Header styles */
#header {
clear:both;
float:left;
}
/* main container that wraps the content */
#wrapper {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
overflow:hidden; /* This chops off any overhanging divs */
background:#fff; /* right column background colour */
margin-top:20px;
-moz-border-radius:25px;
border-radius:25px;
}
#content {
float:left;
position:relative;
margin-left:20px;
padding:0 0 1em 0;
}
#navigation {
float:left;
position:relative;
background:#000;
width:150px;
font-size:.9em;
margin:40px 0 0 0;
padding:0 0 1em 0;
z-index:1002;
}
#navigation li{color:#FFF;background:#000;list-style-type:none;}
#navigation a{text-decoration:none;color:#FFF;display:block;padding:5px 15px;}
#navigation li:hover{}
#navigation li:hover a{color:#FFF;display:block;background:#4f81bd;}
#navigation li:hover ul{display:block;}
#footer {
clear:both;
float:left;
font-size:.75em;
margin-top:30px;
}
#footer p {
padding:10px;
margin:0;
}
#footer ul{margin:0;padding:0;}
#footer li, #footer li a{color:#aeaeae;display:inline;padding:0 5px;}
#footer li{list-style-type:none;padding:2px 0;}
#footer li a{font-weight:normal;text-decoration:none;text-transform:none;}
#footer li a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:#4f81bd;}
h1{font-size:1.6em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
h4{font-size:1em;}
What am I missing?
Dont float the content div instead give it enough left margin to clear past the navigation div.
Simple two column layout to illustrate here http://jsfiddle.net/DFvyb/
I'd recommend trying to use an open source grid system rather than trying to roll your own.
There are many, you could check out this for instance:
https://github.com/stubbornella/oocss/wiki
h2 and p tag should be in div and apply width on div check link below
http://jsfiddle.net/DzQRR/
Set with property for #content div e.g. 900px
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.