I have this footer at the bottom of my side and it looks fine on a desktop, but on an iphone or ipad, the background gets cut off:
Here is the HTML
<div class="footerPowell">
<div class="footer-content">
<div class="footer-location">
<!--<h1>Locations</h1>-->
<ul>
<li>Address</li>
<li>Address</li>
<li>Address</li>
<li>Address</li>
</ul>
</div><!--footer-location-->
</div><!--footer-content-->
</div>
Here is the CSS:
.footerPowell{
background-color:#000;
height:500px;
margin-top:-100px
}
.footer-content{
width:1000px;
margin:0 auto;
color:#FFF;
padding-top:130px;
}
.footer-location{
width: 100%;
text-align:center;
}
.footer-location h1{
font-size:20px;
padding-bottom:15px;
color:#b9b9b9;
font-family: 'gotham_htfbook';
}
.footer-location ul{
list-style:none;
}
.footer-location ul li{
font-family: 'gotham_htfbook';
color:#808080;
padding-bottom:3px;
font-size:16px;
display:inline-block;
padding-right:10px;
}
.footer-location ul li a{
color:#808080;
text-decoration:none;
}
Not sure exactly what you mean by cut-off, but you might want to try this
.footer-content{
width: 100%;
margin:0 auto;
color:#FFF;
padding-top:130px;
}
use percentage for your width to keep it 100% wide.
Related
There is some black space to the right of my sub-menu when I activate the drop down menu(through hovering). I have tried a lot of thing and can't seem to find which element I must alter to get rid of it. Help me out please, when on fiddle increase width of website, the problem becomes more apparent.I don't want any space at all, I want the sub-menus to fit the size of the menu it dropped from.
html:
<body>
<header id = "M_head">
<img id="M_logo" src="MircLogo.png">
<img id="M_logo2" src="MircLogo.png">
<h2><ul>Mc</ul></h2>
</header>
<div id="container">
<nav id="M_nav">
<ul>
<li>NEWS
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>STORE
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li>ABOUT</li>
</ul>
</nav>
<section id="M_section">
<div id=Side_sec></div>
<div id="Side_sec2"></div>
</section>
<footer id="M_footer">
</footer>
</div>
</body>
css:
*{box-sizing:border-box;}
body{
max-width:100%;
margin:0px;
display:block;
}
#container{
padding:0;
text-align:center;
box-sizing:border-box;
margin: 0px auto;
margin-top:-.5em;
background-image:url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
}
#M_logo{
margin:-25px;
float:left;
height:5em;
width:8%;
margin-left:-1.825em;
}
#M_logo2{
margin-top:-25px;
float:right;
height:5em;
width:8%;
margin-right:-1.825em;
}
#M_head{
margin:0px auto;
color:black;
width:90%;
background-color:white;
height:4em;
}
#M_head ul{
padding:0px auto !important;
margin: 0px;
margin-left:5em;
text-align:left;
font-style:italic;
font-weight:bold;
width:30%;
letter-spacing:-0.08em;
word-spacing:-0.03em;
}
#M_nav ul {
width:102.5%;
padding:0px;
padding-top:.25em;
padding-bottom:.25em;
margin-left:-2.6%;
margin-top:0em;
background-color:black;
display:inline-table;
}
#M_nav ul li{
display:inline-block;
list-style-type:none;
text-decoration:none;
text-align:center;
padding-left:3.5em;
padding-right:3.5em;
padding-top:0.35em;
padding-bottom:0.35em;
display:inline-block;
border-radius:0.25em;
color:white;
font-weight:bold;
background-color:black;
}
#M_nav ul li:hover{
background-color:#FFBF00;
color:white;
font-shadow:none;
z-index:100;
}
#M_nav ul ul{
display:none;
}
#M_nav ul li:hover >ul{
display:block;
width:20%;
position:absolute;
margin-top:.7em;
float:center;
}
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
#Side_sec{
height:50em;
width:15%;
border-left:2px solid white;
float:right;
}
#M_section{
height:50em;
width:80%;
margin:-1em auto;
border:2px solid white;
}
fiddle link:http://jsfiddle.net/ft9b6np9/
Change:
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
to:
#M_nav ul li:hover ul >li{
display:block;
}
Setting a percentage width is causing the black overflow on the right side.
Fiddle: http://jsfiddle.net/ft9b6np9/1/
I'm currently experiencing an issue where my ul is being pushed out of my div. I have played with the margin, border, and padding on all the objects that might be affecting it with no success as of yet, here is the current code:
HTML:
<div id="nav">
<ul id=mainNav>
<li class=mainNav><a>Home</a></li>
<li class=mainNav><a>Products</a></li>
<li class=mainNav><a>Stores</a></li>
<li class=mainNav><a>About Us</a></li>
<li class=mainNav><a>Contact Us</a></li>
<li class=mainNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
<div id="subBar">
<div id="subNav">
<ul id=subNavl>
<li class=subNav><a>Home</a></li>
<li class=subNav><a>Products</a></li>
<li class=subNav><a>Stores</a></li>
<li class=subNav><a>About Us</a></li>
<li class=subNav><a>Contact Us</a></li>
<li class=subNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
CSS:
#header{
width:1000px;
background-color:#B443B7;
border-radius:200px;
height:50px;
margin:auto;
margin-top:0px;
margin-bottom:opx;
}
h1{
display:inline;
color:white;
margin-left:20px;
font-family: 'Indie Flower', cursive;
}
h1, a{
text-decoration:none;
color:#B443B7;
margin-top:auto;
margin-bottom:60px;
}
#subBar {
height:20px;
padding-top:10px;
width:875px;
margin-right:auto;
margin-left:auto;
background-color:#F4F459;
color:black;
border-radius: 0px 0px 200px 200px;
}
#nav {
margin:auto;
}
#subNav {
margin:auto;
}
#mainNav {
list-style-type:none;
}
.mainNav {
display:inline
}
.mainNav a {
display:inline-block;
height:35px;
padding-top:15px;
color:white;
width:100px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
.mainNav a:hover{
background-color:#F4F459;
color:black;
}
#subNavl {
list-style-type:none;
}
.subNav {
display:inline
}
.subNav a {
display:inline-block;
height:30px;
margin-top:0px;
padding-top:0px;
color:black;
width:80px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
And here's a screen shot of the results:
It would be much appreciated if someone could help me in resolving this problem.
http://jsbin.com/gorabonoqe/1/
I dropped your code in a JSBin and didn't look exactly like your screenshot but I think I was able to address the area you were trying to fix (the text dropping out of the yellow bar).
There's a lot of potential issues going on here. For one, all <a> elements have a bottom margin of 60px. I think that's what was throwing you off the most. I also changed the padding on #subBar and added a margin:0 on #subNavl.
Take a look at the jsbin link above and see if that's helpful.
Just to let you know .. when you work with ul > li > a
ul{
list-style: none;
list-style-type: none;
margin : 0;
padding: 0;
}
ul > li{
display : inline-block;
}
ul > li > a{
display: block;
height: 100%;
}
this way will make everything comes easy in your ul code
You set the height of that div, #subBar, to 20px and the browser is obeying that.
Does anyone know how to vertical center a-href elements in list-items while keeping them responsive and the whole list element clickable?
I've tried various things: vertical-align, display:table/table-cell etcetera, googled a lot and searched stack overflow, but none of the solutions seem to work (or I'm just implementing them wrong) or cover all the issues (center, clickable, responsive). The list item's height is reacting to the height of the browser, because of the display div (which is going to display a photo and I don't want to lose details because of the two menu items that cover it).
JSFiddle: http://jsfiddle.net/K6V58/1/
HTML:
<div id="wrapper">
<nav id="menu">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</nav>
<article id="display">boe</article>
<nav id="gallery">
<ul>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
</ul>
</nav>
</div>
CSS:
/*---------------------------- MAIN MENU ----------------------------*/
#wrapper{
height:100%;
width:100%;
margin:0;
padding:0;
}
nav#menu, nav#menu ul, nav#menu ul li{
margin:0;
padding:0;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:10pt;
color:grey;
background-color:#000000;
}
nav#menu{
position:absolute;
top:0;
width:100%;
height:5%;
text-align:right;
}
nav#menu ul{
padding: 0 10px;
height:100%;
}
nav#menu ul li{
height:100%;
display: inline-block;
margin: 0 10px;
list-style: none;
}
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: block;
}
/*---------------------------- IMAGE MENU ----------------------------*/
nav#gallery, nav#gallery ul, nav#gallery ul li, img.imageList{
margin:0;
padding:0;
background-color:#000000;
}
nav#gallery{
position:absolute;
bottom:0;
width:100%;
height:5%;
}
nav#gallery ul li{
display: inline-block;
list-style: none;
height:100%;
float:left;
}
.imageList{
height:100%;
vertical-align:top;
}
/*---------------------------- DISPLAY PHOTO ----------------------------*/
article#display{
position:absolute;
top:5%;
width:100%;
height:90%;
background-image:url(../images/gallery/groot/2.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
margin:0;
padding:0;
}
You can try this
I have added span inside a
HTML
<li><span>test 1</span></li>
<li><span>test 2</span></li>
And updated this CSS
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: table;
}
nav#menu ul li a span {
display: table-cell;
vertical-align: middle
}
I am trying to create a fixed horizontal navigation that stretches to the browser's width.The problem I am having is that the links in the navigation bar move when i resize the browser window. How can I make it so that when you resize the web browser, the links(Home, Services...) stay fixed to the right and vertically in-line with the #content.?
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
And my CSS:
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
I have been trying to solve this for hours, help would be much appreciated
You can apply your actual #navigation CSS rules to your #fixed_bar div and give #navigation the same width of the content (900px), let the browser calculate the margins with automatic margins and align the text to the right, so the ul will be at the right of #navigation while you keep the background, etc in #fixed_bar.
See it here: http://jsbin.com/bibulewa/1
And this is the CSS I've modified:
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
Not sure if this is what you're looking for
I gave the ul an absolute position and align to the right:2%.
A top margin of 5px.
Remove the float and display the list as inline-block
Here's a jsfiddle - http://jsfiddle.net/rezasan/kE7LK/
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:3px;
clear:both;
}
set navigation styling:
left:0;
right:0;
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}