THis is my first time commenting on this website. I've found this site to be helpful in the past but now I can't seem to find a solution to my problem to I would like for someone to answer me directly.
I have webpage using where I have a fixed header and footer and absolute positioned panel where the content goes. My problem is, when I resize the browser the header content stays in the fixed position> Now that is obvious, none the less I would like to have it move with the scroll of the rest of the page. When I set the header to relative, it does work to my liking, but then the header nav links go under my lowerband and z-indexing wouldn't help. The same goes for the footer.
Also for the content panel, when I set the body overflow to auto or show, the content panel when I scroll, leaves a whitespace to the right.
Can anyone help me with this problem? It is very frustrating.
And one more thing, can anyone help me with code to use for css for my ux-header-upperbandcontent and lowebandcontent?. I would like to place the logo and other text in the upperband and the nav links in the lowerband but using a content wrapper.
Thanks. Here is my code for css and html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="content/style.css">
</head>
<body>
<!--BACKGROUND-->
<!--HOME-->
<div id="home">
</div>
<!--ABOUT-->
<div id="about" class="panel">
<div class="content">
<p>about content</p>
</div>
</div>
<!--SERVICES-->
<div id="services" class="panel">
<div class="content">
<p>services content</p>
</div>
</div>
<!--CONTACT-->
<div id="contact" class="panel">
<div class="content">
<p>contact content</p>
</div>
</div>
<!--HEADER-->
<div id="ux-header">
<div id="ux-header" class="upperband">
</div>
<div id="ux-header" class="lowerband">
</div>
<div id="ux-header">
<ul id="ux-header" class="dev-navigation">
<li><a id="dev-home" href="#home">HOME</a></li>
<li><a id="dev-services" href="#services">SERVICES</a></li>
<li><a id="dev-about" href="#about">ABOUT</a></li>
<li><a id="dev-contact" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--FOOTER-->
<div id="ux-footer">
</div>
</body>
</html>
body {
min-width:980px;
margin: 0px;
color: rgb(51, 51, 51);
line-height: 30px;
font-family: "Segoe UI","Helvetica",Garuda,Arial,sans-serif;
font-size: 0.81em;
cursor: default;
overflow:hidden;
}
a {
color: rgb(0, 68, 204);
text-decoration: none;
cursor: pointer;
}
img {
border:currentColor;
border-image: none;
max-width: 100%;
}
ul {
margin: 0px;
padding: 0px;
}
ol {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
ul {
margin-bottom: 0px;
}
ul li {
margin-bottom: 0px;
margin-left: 15px;
}
ol li {
margin-bottom: 2px;
margin-left: 18px;
}
p {
margin-bottom: 10px;
}
h1 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h2 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h3 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h1 {
line-height: 42px;
font-size: 2.77em;
margin-bottom: 20px;
}
h1.error {
margin-top: 50px;
}
h2 {
line-height: 34px;
font-size: 2.16em;
margin-bottom: 20px;
}
h3 {
line-height: 24px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.39em;
margin-bottom: 20px;
}
h4 {
margin: 0px 0px 10px;
color: rgb(51, 51, 51);
line-height: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.08em;
}
#ux-header.dev-navigation {
margin-top:60px;
width:300px;
z-index:3;
left:70%;
white-space:nowrap;
}
#ux-header .dev-navigation li{
padding-right:10px;
margin:10px;
}
#ux-header ul.dev-navigation li{
display:inline;
}
#ux-header.dev-navigation li a {
text-transform:uppercase;
font-size:12px;
padding-bottom:0px;
margin-bottom:0px;
}
#ux-header.dev-navigation li a:hover {
padding-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#4169E1;
border-bottom-width:10px;
}
#ux-header {
position:fixed;
top:0px;
z-index:2000;
width:100%;
overflow:hidden;
}
#ux-header a {
color:#FFF;
}
#ux-header ul {
margin:0px;
}
#ux-header li {
margin:0px;
}
#ux-header .upperband{
height:60px;
background-color:#000;
}
#ux-header.upperbandcontent {
margin:0px, auto;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-header .lowerband {
top:60px;
height:30px;
background-color:#F42;
}
#ux-header.lowerbandcontent {
position:absolute;
margin:0px, 0px, 5px, 0px;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-footer {
position:fixed;
bottom:0px;
width:100%;
height:50px;
background-color:#000;
border-top-style:solid;
border-top-width:8px;
border-top-color:#0000FF;
z-index:2000;
}
.content {
font-size:12px;
padding:3px;
line-height:10px;
color:#fff;
display:inline-block;
margin:3px 0px;
z-index:-1;
}
.content h2{
font-size: 30px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 12px;
padding: 3px;
line-height: 16px;
color: #fff;
display: inline-block;
margin: 3px 0px;
}
.panel {
position:absolute;
min-width:100%;
min-height:80%;
margin-top:90px;
right:2000px;
background-color:#FF00FF;
z-index:-2;
transition:right 2s;
overflow:hidden;
}
.panel:target {
background-color:#F6A600;
right:0;
}
#home:target ~ #ux-header .dev-navigation #dev-home,
#about:target ~ #ux-header .dev-navigation #dev-about,
#services:target ~ #ux-header .dev-navigation #dev-services,
#contact:target ~ #ux-header .dev-navigation #dev-contact,{
color:#000;
}
Is that what you are looking for?
http://jsfiddle.net/cancerian73/huawb/
#media screen and (max-width: 400px) {
/* grid4 */
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}
Related
I'm not quite sure what I'm doing wrong here. I want a standard dropdown navigation block when someone hovers over a nav item (in this case the "Products" Link). I haven't used an unordered list, just links. I manage to get all the elements in the right place with the right formatting looks great. The only issue is that I can't get the sub menu to show up when I hover over the main menu button? Can't figure out why, it looks fine to me. I'm previewing in google chrome
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
Products
About Us
Contacts
</div>
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
</body>
</html>
The CSS Style Sheet
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
}
.productsnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
The last few in the CSS code is what seems to be wrong, but I cannot figure out what exactly is amiss. I have watched a number of videos on this and have formatted the css code to display the submenu in a few different ways but I could not figure it out.
Thanks
You should really consider using unordered lists to make it easier to display your sub-menus.
I did a quick plunk of your problem without the other menu items.
https://plnkr.co/edit/pBtp39zKpRL5YqCZvxK0?p=preview
I changed your html and css to the following:
HTML
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
ul {
display: inline-block;
}
ul li a{
width: 100%;
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.productsnav a{
width:100%;
margin-top: 5px;
}
.products:hover .productsnav{
display:block;
position: absolute;
}
Please change it to the desired style.
Yes thanks, I've done that now it looks much better. The issue I have now is that when the sub menu pops up the next main menu item gets pushed to the bottom of the sub menu. And also after the sub menu appears when I try to hover over it quickly disappears as soon as my mouse is removed off from the main nav item.
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<ul class="menunav">
<ul class="Products">
<li><a href="#" >Products</a>
<ul class="productsnav">
<li>Fruits</li>
<li>Vegetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul></li></ul>
<ul class="AboutUs">
<li><a href="#" >About Us</a>
<ul class="aboutusnav">
<li>History</li>
<li>Mission</li>
<li>Personel</li>
</ul></li></ul>
<ul class="Contact">
<li><a href="#" >Contact</a>
</li></ul>
</ul>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
li{
list-style-type:none;
}
.menunav{
margin-bottom:3px;
}
.menunav a{
float:left;
margin-top:5px;
margin-right:3px;
}
.productsnav, .aboutusnav{
width:33%;
margin-bottom:3px;
}
.productsnav a, .aboutusnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
.aboutusnav{
margin-left:33.3%;
}
.AboutUs:hover .aboutusnav a{
display:block;
}
If you want to use CSS hover style for your drop-down menu then it must be a child item of hovered element.
Otherwise, you can use jQuery/javascript for this drop-down menu.
I have another idea to solve this problem. Please check this link:
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:100%;
margin-bottom:3px;
display: none;
position:absolute;
}
.Products{
display:inline-block;
width:33%;
position:relative;
}
.Products a{
display:block;
width:100%;
}
.Products:hover .productsnav{
display:block;
}
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<div class="Products">
Products
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
About Us
Contacts
</div>
</div>
</body>
http://codepen.io/shiplo_R/pen/VPyMzp
Also, you can add some animation to show your drop-down menu smoothly instant of "display:none".
You can try this
https://jsfiddle.net/uhg84d8d/
HTML:
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
.menunav {
width: 100%;
float: left;
}
.menunav ul {
width:100%;
float: left;
margin: 0px;
}
.menunav ul li{
list-style: none;
float:left;
width: 33.3%;
}
.menunav ul li a{
width: 100%;
}
.menunav ul li a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav ul li a{
display:inline-block;
margin-top:5px
}
.menunav ul li .productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.menunav ul li .productsnav li{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li .productsnav li a{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li.products:hover .productsnav{
display:block;
position: absolute;
width: 300px;
}
Then it will work...:)
I want a vertical menu to the left side of my site, but the text is getting pushed down and is not to the side of the menu. Please ignore text in the paragraphs and headers. I am sorry for the poor organization or any small mistakes I have made, This is my first language and I am still learning.
<style>
body
{
background-color:#333;
color:#999
font: 12px/1.4em Arial,sans-serif;
}
#wrap
{
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header
{
background-color:black;
color: #fff;
}
#logo
{
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap
{
height:15pxpx;
}
#nav ul
{
margin: 1px;
padding:1px;
}
#nav li
{
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a
{
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover
{
text-decoration: underline;
}
br.clearLeft
{
clear: left;
}
h1
{
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2
{
color:red;
}
h3
{
color:cyan;
}
p.2
{
color:black;
font-size:22px;
text-align:left;
}
p
{
color:#DBDBDB;
font-size:22px;
text-align:left
right: 500px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>link1</li>
</ul>
<br class="clearLeft"/>
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
You just need to float your #wrap div to the left using the following CSS and that'll solve the issue:
#wrap {
float: left;
}
Here's a demo:
body {
background-color:#333;
color:#999 font: 12px/1.4em Arial, sans-serif;
}
#wrap {
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header {
background-color:black;
color: #fff;
}
#logo {
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap {
height:15pxpx;
}
#nav ul {
margin: 1px;
padding:1px;
}
#nav li {
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a {
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
h1 {
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2 {
color:red;
}
h3 {
color:cyan;
}
p.2 {
color:black;
font-size:22px;
text-align:left;
}
p {
color:#DBDBDB;
font-size:22px;
text-align:left right: 500px;
}
#wrap {
float: left;
}
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>link1
</li>
</ul>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
The padding on your logo is pushing the text down, and your line-height is huge. I would suggest adjusting those two values.
#logo {
float: center;
font-size: 30px;
line-height:400px; // pushing it down
padding: 500px; // pushing it down
}
Also, you're setting the height on #navWrap, which is also causing your navigation to look weird. Finally, floating your #wrap element puts your content in the right place.
Here is a fiddle that resolves your situation:
http://jsfiddle.net/cywb70ds/2/
I adjusted the padding and line-height on the #logo element.
I'm trying to create a fixed header that sticks to the top on scroll. I have one wrapper (#topbarwrapper) that should fit 100% across the entire browser. I also have another div wrapper (.topbarcontentWRAPPER ) inside the(#topbarwrapper) which includes logo and navigation (#mainNav). One floats to the left and the other floats to the right. They both float as they should but it seems as if when the browser is resized, the divs move. I want the two divs floating inside to be centered with the entire page. The layout is responsive so the body width is 90%. I spent several days trying to figure this out including research. Any help would be appreciated.
Ideal goal is to have the header with 100% width fixed and centered.
Layout View:
http://s30.postimg.org/so036qarl/Screen_shot_2014_03_10_at_1_53_42_AM.jpg
HTML:
<body>
<div id="topbarWRAPPER">
<div class="topbarcontentWRAPPER">
<nav id="mainNav" role="navigation">
<h2 class="hidden">Main Site Navigation</h2>
<?php if ($this->countModules('nav')): ?>
<jdoc:include type="modules" name="nav" />
<?php endif; ?>
</nav>
</div>
</div>
<div id="mobilelogo"></div>
<div id="imageshow">
</div>
<div class="wrap">
<div class="miscellaneousRow">
</div>
<div class="search">
</div>
</div>
<section><h2 class="hidden">Recent News</h2>
<article id="recentNews">
<jdoc:include type="component" />
</article>
</section>
<aside>
<div class="sideBOX"> <section>
<h1 class="sideHeader">MAILING LIST</h1>
<div class="signup">
</section> </div>
<div class="sideBOX"> <section>
</section></div>
<div class="tabviewTABS"> <section>
</section>
</div> </aside>
<footer id="mainbottomFooter">
<div class="footerFLOATLEFT">
<h1 class="hidden">Footer</h1>
<div class="floatone">
</div>
</div>
</footer>
<div class="secondbottomFooter"> <div class="secondbottomfooterRight">
<nav id="sidenav">
<ul>
<li>
l
</li>
<li>
f
</li>
<li>
g
</li>
<li>
x
</li>
<li>
!
</li>
</ul>
</nav>
</div>
<div class="secondbottomfooterLeft"> content</a></div>
</div>
</html>
body {
width:90%;
margin:0 auto;
min-width:1024px;
max-width:1580px;
}
.latest-post clearfix{
display:hidden;}
.imageshow {
position:relative;
width: 100%;
}
.blog-readmore{
font-size: 24px;
display: inline;
width: 180px;
text-transform:uppercase;
margin-top:20px;
}
.blog-readmore a:link{
font-family: arial;
color: #690000;
}
.blog-readmore a:visited{
color: #690000;
}
.blog-readmore a:hover{
color: #eee;
}
#topbarWRAPPER{
position:fixed;
left: 0px;
right: 0px;
background-color:#000;
z-index:1000;
text-align:center;
}
.topbarcontentWRAPPER {
display:block;
height:50px;
background-color: #1E1E1E;
width: 90%;
margin: 0 auto;
}
#topbarLOGO
{
background-image:url("http://strip2.png");
background-repeat:no-repeat;
display:block;
float:left;
height:50px;
width:250px;
text-indent:-9999px;
}
aside{
background-color: #d6d6d6;
width: 29.1%;
padding-left:1%;
height: 100%;
float: right;
overflow: none;
color: #fff;
font-size:10px;
padding-bottom:1000em;
margin-bottom:-1000em
}
/* Blog content */
#recentNews {
width: 65.1%;
float: left;
padding-right:2%;
padding-left:2%;
padding-bottom:2%;
background-color:#fff;
padding-bottom:1000em;
margin-bottom:-1000em;
}
.wrap{ overflow:hidden;
background-color:#fff;
}
/* ~~ Bottom footer ~~ */
#mainbottomFooter{
background-color:#000;
position:relative;
height: 300px;
clear: both;
padding:15px 0;
min-width:100%;
}
.footerFLOATLEFT li{
list-style-type: none;
padding-bottom: 1em;
padding-top: 1em;
}
.footerFLOATLEFT a:link{
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:visited {
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:hover {
font-size:12px;
color: #690000;
text-transform:uppercase;}
/* ~~ P~~ */
p{
font-size: 17px;
color: #000;
line-height:140%;
font-family: 'HelveticaNeue';
padding-left: 1%;
padding-right:1%;
font-weight:bold;
}
h3 {
margin-bottom: 0px;
font-size: 2em;
color: #690000;
font-family: 'Lato', sans-serif;
font-weight:300;
text-transform:uppercase;
padding-bottom:1em;
padding-top:1em;
}
.floatone {
float:left;
padding-right: 4em;
padding-top: 4em;
height: 100%;}
.floattwo {
float:left;
height: 100%;
padding: 4em;}
.floatthree {
float:left;
height: 100%;
padding: 4em;}
.floatfour {
float:left;
height: 100%;
padding: 4em;}
.signup {
width:100%;}
.footerFLOATLEFT {
width:100%;
float:left;
}
.secondbottomFooter {
width: 100%;
height:40px;
background-color:#690000;
border-top:1px solid #222;
border-bottom:1px solid #222;
color: #fff;
font-size: 12px;
padding-top:2em;
padding-bottom:2em;
text-align:right;
}
h2 {font-face:arial;
font-size:12px;
color: #fff;
padding-top: 1em;
padding-bottom: 1em;}
#sidenav {
}
#sidenav li {
display:inline;
}
#sidenav a:link{
font-family: 'socialicoregular', Arial, sans-serif;
font-size:5em;
color: #eee;
text-decoration:none;
}
#sidenav a:visited{
color: #fff;
text-decoration:none;
}
#sidenav a:hover{
color: #690000;
text-decoration:none;
}
.miscellaneousRow {
background-color: #000;
width: 100%;
height:100px;
position:relative;
}
.twitterFeed {float:left;
padding-top: 10px;
padding-bottom: 10px;
width: 65.1%;
}
.search {
float: right;
padding:2%;
width: 26%;}
#mainNav {
float:right;
}
.sideDivider {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.tabviewTABS {
background-color:#222;
height:auto;
margin-bottom:20%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.sideBOX {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
text-align:center;
}
.soundcloud {
background-color:#222;
position:relative;
height:auto;
clear: both;
padding:15px 0;
min-width:100%;
}
.soundcloudtitle {
font-family: 'Droid Serif', serif;
color: #fff;
font-size: 2em;
text-align:right;
text-transform: uppercase;
margin-bottom: 1em;
border-bottom: 5px solid #690000;
}
.secondbottomfooterRight p{
padding-right:3em;
padding-bottom:1em;
}
.hidden
{
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
You're setting the left and right positions of your topbarWRAPPER to 0px instead of 5%.
See this fiddle.
EDIT:
I see what you mean. I've updated the fiddle. It should be what you need.
EDIT #2:
Alrighty. Forgive me, I didn't notice this earlier. You've assigned the body a width in percent but a min and max width in pixels. If you remove the min and max widths you'll see the behavior you're looking for, but what I think you should do is assign the 70% width to .wrap and give it a margin:0 auto;
I want to fix my footer at the bottom of my content so that when ever i add content it will just automatically adjust with it, Like this website here (http://www.matthamm.com/about)
Here is the Jsfiddle of what it more or less looks like now
http://jsfiddle.net/9L6Lh/
HTML:
Home
<p>This Website will be made using PHP</p>
<p>A Home Page</p>
<p>A Style Sheet</p>
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer_inner_wrapper">
<div>
<p>©
<?php echo date( "Y"); ?>UR. All rights reserved. Andrew Byrne.</p>
</div>
</div>
</div>
CSS:
body {
margin: 10%;
min-width: 30%;
text-align: center;
background-attachment: fixed;
background-image:url(/img/mooning.png);
font-weight:bold;
color:#666666;
}
#main {
height: auto;
width:80%;
margin:auto;
text-align:left;
padding:15px;
font-family:'Roboto', sans-serif;
background-color:red;
box-shadow: -10px -10px 15px #888;
overflow:auto;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-font-smoothing: antialiased;
}
.day3txt {
margin-top: 1%;
border-bottom: 3px solid #c7c7c7;
padding: 80px;
}
#footer_wrapper {
background-color: black;
}
#Contact-font li {
list-style: none;
}
#Contact-font li a {
border-bottom: 2px solid #336699;
}
#Contact-font li a:hover {
color: #E8110F;
opacity: 0.7;
}
/*banner */
#nav li {
margin-top: 0.25%;
white-space: nowrap;
list-style: none;
float:left
}
#nav li a {
font-size: 25px;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
color: #E8110F;
}
#nav select {
display: none;
}
Since you have a paragraph inside the footer, the browser gave it some default style(There are default styles for every element). Use a CSS Reset like this:
*{
margin:0px;
padding:0px;
}
OR
Just add this to your style:
#footer_wrapper p{
margin:0px;
}
Just add overflow: hidden; to the footer and append some margin.
here is your fiddle with "connected" footer: http://jsfiddle.net/9L6Lh/1/
#footer_wrapper {
background-color: black;
margin: 0 46px;
overflow: hidden;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Add This only at the top in the css file so before body{}
*{margin:0; padding:0;}
I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?
Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.
If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.
<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>
float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}
Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}
Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.
DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO
Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>
Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.