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.
Related
The top part of the five links on the right aren't clickable. How can I get the link to be active throughout the entire button?
Also, how would I make it so that when I hover over the links, the background color still changes as it currently does but has an opacity:0.5. Whenever I try this the background color as well as the words turn transparent.
One more thing. If I re-size my browser the navbar moves around and looks terrible. How can I keep the navbar in place as I re-size the browser?
Here's the JSFiddle link
HTML Code
<!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>Me</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
</head>
<body>
<section class="main_front">
<nav id="nav_container">
<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li">Goals</li>
<li class="nav_li">School Site</li>
<li class="nav_li">Web Design</li>
<li class="nav_li">Summer</li>
<li class="nav_li">Schedule</li>
</ul><!--end of right_links-->
</nav><!--end of nav_container-->
</section><!--end of main_front-->
<section class="footer">
<div class="phonenumber">
<b>Contact:</b> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div id="email">
adesign#email.com
</div><!--end of email-->
<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
margin:0;
margin:none;
}
.logo {
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:90vh;
background-color:#A9D2F1;
}
/* .nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
} */
.nav_li {
float:right;
margin-right:20px;
}
#nav_container {
width:100%;
height:79px;
/*background-color:#82B5E8;*/
background-image:url(../images/nav_container_bg.png);
}
.right_links {
width:70%;
float:right;
list-style-type:none;
text-align:center;
}
.right_links a {
display:inline-block;
list-style-type:none;
text-decoration:none;
color:white;
font-size:17px;
margin-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
width:130px;
height:40px;
line-height:10px;
text-align:center;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.right_links li a {
display:block;
width:130px;
height:40px;
}
.right_links li:hover {
background-color:#166083;
}
.phonenumber {
font-size:26px;
margin-left:15px;
float:left;
}
.address {
font-size:26px;
margin-left:75%;
}
#email {
font-size:26px;
float:left;
margin-left:-295px;
margin-top:40px;
}
.footer {
width:100%;
height:10vh;
background-color:#8FC6ED;
}
change your CSS to this:
/* CSS Document */
body {
margin:0;
margin:none;
}
.logo {
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:90vh;
background-color:#A9D2F1;
}
/* .nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
} */
.nav_li {
float:right;
margin-right:20px;
}
#nav_container {
width:100%;
height:79px;
/*background-color:#82B5E8;*/
background-image:url(../images/nav_container_bg.png);
}
.right_links {
width:70%;
float:right;
list-style-type:none;
text-align:center;
}
.right_links a {
display:block;
list-style-type:none;
text-decoration:none;
color:white;
font-size:17px;
margin-top:0px; height:30px; padding-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
width:130px;
height:40px;
line-height:10px;
text-align:center;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.right_links li a {
display:block;
width:130px;
height:40px;
}
.right_links li:hover {
background-color:rgba(22,96,131,0.5);
}
.phonenumber {
font-size:26px;
margin-left:15px;
float:left;
}
.address {
font-size:26px;
margin-left:75%;
}
#email {
font-size:26px;
float:left;
margin-left:-295px;
margin-top:40px;
}
.footer {
width:100%;
height:10vh;
background-color:#8FC6ED;
}
About your last question, it all depends on what you need. If you want to make it responsive, the size of the nav will vary, hence the menu elements will re-locate, this requires a decision on what do you want to do depending on which size is shown (you can do nothing as well, as in no resizing)
You are using margin-top:15px to move the text down on the button. Change this to padding-top and the entire button will be clickable. This is because padding is on the inside of the a tag, and so expands the size of the a tag (which is your clickable link).
You have stumbled onto a problem that bothers a lot of us. When you have text within an element, it is tricky to apply opacity to the element but not to the text within. However, there are workarounds that workgreat. Here are a couple of posts:
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
CSS - Apply Opacity to Element but NOT To Text Within The Element
There are two ways to specify the location/size of elements on your page: fixed px/em or percentages. Fixed sizes do not re-size, but percentages do. Therefore, instead of this:
Do this:
<div style="height:10%;width:15%;"></div>
As the window size changes, so will the width/height of the div.
Two downsides to this approach:
a. You probably can't do this with just the navbar -- you may have to refactor your page to use percentages in most places;
b. Large monitors will have larger elements than smaller monitors -- but usually, this is a good thing.
What most folks do when switching to percentages is to set the outer page boundaries (the "wrap" or "container" or whatever is your top-level level div beneath body) in pixels -- and then use percentages for all else underneath. Okay, rarely all -- it is okay to mix percents and pixels/ems (of course, not in the same element ). Usually, there are some divs (buttons or shapes or whatever) that will remain fixed size regardless the size of the monitor/window.
A couple of references on this one:
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Which is better to use in CSS, percentage or pixels?
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."
My first square is made with div tags and the second one is with ID which I named #blacksquare2. The second square which is #blacksquare2 seems to always keep aligning at the bottom with my first square and can't bring it up to the page.Also the words 'i'm lovin' it' seem to be separate from each other. If it helps, I'm trying to achieve something like the McDonald's Website, just for practice.
CSS:
div{
height:90px;
width:96px;
background-color:#CC0000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#blacksquare2{
height:25px;
width:200px;
background-color:#000000;
text-align:left;
margin:1px 10px 10px 10px
}
#blacksquare2 a{
color:#E6E600;
font-size:11px;
font-family:Arial;
margin:25px
}
span{
font-size:50px;
text-decoration:none;
font-family:Arial;
color:#E6E600;
font-weight:Arial;
margin-left:10px;
}
a{
text-decoration:none;
font-size:13px;
margin-right:10px;
color:white;
font-family:Arial bold;
}
l{
font-size:8px
}
body{
margin-top:0px
}
HTML:
<!DOCTYPE html>
<head>
<title>Home :: McDonalds.com</title>
<link rel="stylesheet"; type="text/css"; href="McDonald'sPrac.css">
</head>
<body>
<div>
<span>M</span>i'm lovin' it<l>™</l>
</div>
<div id="blacksquare2">
<a href="http://www.mcdonalds.com/us/en/home.html#">Home<a>
</div>
</body>
</html>
Element div takes up all the available horizontal space by default.
You can use span instead of div for the first div. Also, setting
display: inline;
in css will have the same effect.
For the text 'i'm lovin it' to be aligned properly you should not give any width for the div.
div is a block element and so will have the property to take the entire block.
Try giving div{display:inline;} in your css.
I'm currently having problems with resizing the window which cuts off a lot of the page and the elements which are positioned relatively to the document fly off the page.
Heres what it looks like:
Normal: http://i.imgur.com/KpnUOwI.png
Minimized: http://i.imgur.com/CfCrmub.png
scrolled to the end while minimized: http://i.imgur.com/p8dwiP9.png
I either want the blue elements to go right to end even if it's minimized (It's width:100%) or have the elements resize proportionally to the window and fit everything in (everything is positioned relatively to the document)
css:
body {
margin:0;
padding:0;
height:100%;
width:100%;
position:relative;
overflow:auto;
}
#headr {
background-image:url(../images/top%20bg.jpg);
background-repeat:no-repeat;
height:400px;
width:100%;
position:relative;
z-index:-100;
overflow:hidden;
}
#lgo {
position:relative;
margin-left:33%;
margin-top:80px;
}
#nav {
background-image:url(../images/nav%20bar.png);
position:relative;
top:0;
margin-top:0px;
width:100%;
width:!important;
height:99px;
}
#listone {
list-style-type:none;
display:inline;
margin-left:570px;
top:25px;
position:relative;
overflow:hidden;
}
.navlist {
display:inline;
font-size:33px;
padding:25px;
color:#FFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
position:static;
}
#searchb {
background-image:url(../images/search.png);
background-repeat:no-repeat;
width:500px;
height:200px;
position:relative;
padding:0px;
margin-left:1350px;
margin-top:-85px;
}
#searchb form {
display:inline;
}
#searchbar {
background-color:transparent;
border:0px;
position:absolute;
top:50px;
left:60px;
width:200px;
height:80px;
outline:none;
font-size:24px;
}
.searchsubmit {
border:0px;
background-color:transparent;
position:absolute;
top:70px;
left:400px;
width:30px;
height:50px;
}
Html:
<body>
<div id="nav">
<ul id="listone">
<li class="navlist">Home</li>
<li class="navlist">Portfolio</li>
<li class="navlist">Prices</li>
<li class="navlist">Contact</li>
</ul>
<div id="searchb">
<form>
<input type="text" id="searchbar" placeholder="Search">
<input type="image" class="searchsubmit" src="images/searchicon.png" value="">
</form></div>
</div>
</div>
<div id="headr">
<!--<img src="images/head logo.png" id="lgo"> -->
</div>
#Joe - I guess you're looking a responsive design. I'd suggest you to get along with Twitter Bootstrap 3. CSS Framework that takes care of the window size. You just need to make some div classes to make it responsive.
Getting along with framework will make it easier and faster for your develop the page and Twitter Bootstrap 3 does it for us.
Here's another post where the same answer's been given.
Yes you would have to sepcifiy for each size you want, you would than write the css for the under media like you would any other css file. Here is an example
/*if the width is over 768px the background will turn blue*/
#media screen and (min-width: 769px) {
body {
background:blue;
}
}
/*if the width is under 768px the background will turn yellow*/
#media screen and (max-width: 769px){
body {
background:yellow;
}
}
You only have to rewrite the properties that tou wish to change at each breakpoint. The cascading properties of CSS are important here, so you shuld pay attention to specificity and order of your selectors so as to achieve the expected result being DRY.
If you really want to support multiple screensizes you should take a look at responsive webdesign. Substituting your px to em is one example of what you wolud be doing.
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)