I'll apologize first because I understand that this has been asked a zillion times, but I've tried everything I've found to no avail. :(
FYI: I am attempting to create an ASP.NET web app using Master Page. All HTML code below is from my MP.
I have 3 questions:
How the heck do I make my footer stick (my failed code will be below)?
In the setup below, I have nested divs inside the Header/Content, etc. I am assuming that doesn't affect my epic journey toward sticking the footer to the bottom?
Lastly, I have the (form) tag immediately after my (body) tags. I know other folks have mentioned that they felt as though there was an issue. I, too, feel like it messes with my ability to sticky my footer... but maybe this is an irrational fear emerging from my Noob instincts... lol.
Thank you in advance for taking the time to help me!!
CSS
* {
margin: 0;
}
html,
body {
font-family: Arial;
font-size: 10pt;
background-color: #F2FDFF;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
padding: 0;
height: 100%;
}
a {
outline: none;
}
#wholePg {
min-height: 100%;
position: relative;
}
#divNav-cont {
width: 100%;
position: fixed;
top: 0px;
}
#divNav {
background-color: #DBDBDB;
margin-bottom: 5px;
margin-top: 0;
height: 100px;
width: 800px;
text-align: center;
font: 0/0a;
vertical-align: middle;
display: table;
border-radius: 0px 0px 25px 25px;
}
#divBody {
width: 98%;
overflow: hidden;
white-space: nowrap;
margin-top: 110px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding-bottom: 40px;
}
#divFooter {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
border-radius: 25px 25px 0px 0px;
background-color: #DBDBDB;
}
HTML
<body>
<form runat="server">
<div id="wholePg">
<%--Navigation--%>
<div id="divNav-cont">
<div id="divNav">
<div id="imgNav">
</div>
</div>
</div>
<%--Body: Left and Right--%>
<div id="divBody">
<div id="leftContainer" class="bodyWidth196px">
<div class="mainHeader">
<p>Left</p>
</div>
<div class="mainBody overflowYhidden
overflowXhidden bodyWidth196px
borderBottomCurved height85percent">
<p>
Blah blah etc.
</p>
<asp:ContentPlaceHolder ID="LeftContentPlaceHolder" runat="server" />
<br />
<br />
</div>
</div>
<div id="rightContainer" class="bodyWidth580px">
<div class="mainHeader">RIGHT</div>
<div class="mainBody bodyWidth580px borderBottomCurved">
<asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server" />
<br />
<br />
</div>
</div>
</div>
<%--Footer--%>
<div id="divFooter" class="center">
<br />Blabbity boo dee dah.
</div>
</div>
</form>
</body>
Here's the usual HTML solution to implement a sticky footer:
http://www.cssstickyfooter.com/html-code.html
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
It took me a long time to figure out how to make this work with ASPNET and master pages. The trick is to add the form tag to the html, body {...} rule as follows:
html, body, form {height: 100%;}
So, your main layout divs should have the following pattern:
<body>
<form runat="server">
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</form>
</body>
Related
I'm new to web development and I am stuck on this problem. What I am trying to do is show a words on the left(20-30% width/ small square) and img(70-80% large square)on the right then right.Directly below it have a small img box of with a large word box on the right.
For the life of me I can't make both the same height as well.
Sorry I'm describing it the best way I can.
I want it to look like this website reservation and about div.
https://dribbble.com/shots/2052368-Faicco-s-Italian-Restaurant-Parallax/attachments/366053
function sorry(){
alert("This is just a example.")
}
body{
margin: 0;
padding: 0;
}
img{
max-width: 100%;
}
h1,h2,h3,h4,p{
margin: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
html{
background: url("background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
#header-background{
background: url("restaurant.jpg");
height: 75vh;
width: 90%;
margin: 5% auto 0 auto ;
background-size: cover;
background-size: 100% 100%
}
header h3{
float: left;
margin: 21px 0 0 45px;
font-family: Brush Script MT, cursive;
font-size: 42px;
color: white;
}
nav{
float: right;
display: inline-block;
position: relative;
right: 5%;
top:1.5%;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
text-decoration: none;
margin: 0 27px;
padding: 0;
display: flex;
justify-content: space-around;
color: white;
font-family: 'Lobster', cursive;
}
nav li:before{
padding-right:10px;
}
#header-middle{
width: 50%;
margin:200px auto 0 auto;
text-align: center;
}
.rise h1{
font-size: 50px;
color: white;
margin:0;
letter-spacing: 4px;
}
.rise h2{
font-size: 50px;
color: white;
margin: 0;
}
.rise{
position: relative;
animation-name: rise;
animation-duration: 1.5s;
}
#keyframes rise{
0% {bottom: -500px; opacity:-3;}
100%{ bottom: 0px; opacity: 1; }
}
.rise2{
position: relative;
animation-name: rise2;
animation-duration: 2s;
}
#keyframes rise2{
0% {bottom:-500;opacity:-8;}
100%{bottom:0px; opacity:1;}
}
/*Inner Content*/
#middle{
height: 45vh;
width: 90%;
margin: 0 auto 5% auto ;
background-color: WhiteSmoke;
}
#inner-content-wrapper{
width: 80%;
}
#inner-wrapper{
position: relative;
bottom: 35px;
width: 50%;
margin: 0 auto;
background-color: white;
}
#wrapper{
position: absolute;
width: 100%;
}
#inner-content{
width: 80%;
object-fit: contain;
float: left;
display: block;
}
#inner-content img{
max-width: 100%;
max-height:100%;
display: block;
}
#inner-content:first-child {
width: 20%;
}
#inner-content:nth-child(3){
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="food.css">
<title></title>
</head>
<body>
<div id="header-background">
<div class="cf">
<header >
<h3>Taco Día Del</h3>
<nav>
<ul>
<li>Shop</li>
<li>Recipes</li>
<li>News</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="header-middle" class="rise">
<h2>Taco Día Del</h2>
<h1 class="rise2">Mexican Specialties</h1>
</div>
</div>
<div id="wrapper">
<div id="middle">
<div id="inner-wrapper" class="cf">
<div id="inner-content-wrapper" class="cf">
<div id="inner-content" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
<div id ="inner-content" class="cf">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
</div>
<!--Extra-->
<div id ="inner-content" class="cf">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
</div>
<div id="inner-content" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="food.js"></script>
</body>
</html>
There's a lot of problems going on with your code, starting with how your have named the tags. You have used the same ID for almost all the tags. Make use of classes not ID when you want to style more than one element with the same CSS styles. And give unique ID to individual elements which you want to style differently.
I've just taken out the relevant part of the code and modified a few things to demonstrate how the grid (Responsive) has been or could be implemented:
Instead of using img tags, use image as a background for the div containing it.
Use vw units to create squares with the same dimensions and that makes it responsive itself.
For the fonts as well, you can make use of vw units like shown below.
Float the elements to the left and right depending on their unique ID.
Note: This is just a workaround to not implement this code from
scratch. But there are plenty of better and cleaner ways to achieve
this. You can make use of CSS grids or flexbox, etc for that matter.
function sorry() {
alert("This is just a example.")
}
#wrapper{
width:100%;
}
.inner-content-wrapper {
width:81vw;
margin:0 auto;
}
#inner-content1,
#inner-content4 {
width: 20vw;
height: 20vw;
font-size: 1.3vw;
float:left;
border:1px solid gray;
}
#inner-content4{
float:right;
}
#inner-content1,
#inner-content2,
#inner-content3,
#inner-content4 {
display: block;
padding: 0;
margin: 0;
}
#inner-content2 {
width: 60vw;
height: 20vw;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
float:right;
border:1px solid gray;
}
#inner-content3 {
float:left;
width: 60vw;
height: 20vw;
border:1px solid gray;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
}
<div id="wrapper">
<div id="inner-wrapper" class="cf">
<div class="inner-content-wrapper" class="cf">
<div id="inner-content1" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
<div id="inner-content2">
</div>
</div>
<div class="inner-content-wrapper" class="cf">
<div id="inner-content3">
</div>
<div id="inner-content4" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</div>
</div>
</div>
I recently came back to HTML after a very long hiatus. At the moment, I'm wrapping my mind around since when I was designing, those weren't as popular as they are now. I'm currently stuck on an easy regarding width.
This is what's in my page:
<div class="parent">
<div id="logo">
<img src="images/logo-01.jpg" alt=""/>
</div>
<div id="social">
<img src="images/blogger-01.png" alt=""/> <img src="images/email-01.png" alt=""/>
<img src="images/facebook-01.png" alt=""/> <img src="images/foursquare-01.png" alt=""/><br>
<img src="images/google+-01.png" alt=""/> <img src="images/instagram-01.png" alt=""/>
<img src="images/linkedin-01.png" alt=""/> <img src="images/yelp-01.png" alt=""/><br>
</div>
</div>
<div class="parent">
<div id="content1">
<p>Poem-A-Day. Poem-a-Day is the original and only daily digital poetry series featuring over 200 new, previously unpublished poems by today's talented poets each year. On weekdays, poems are accompanied by exclusive commentary by the poets. Don't pay attention to me.</p>
</div>
<div id="content2">
<p>Testimony</p>
<p>Request Proposal</p>
</div>
</div>
And this is my style sheet (note: width on parent is purposely left blank:
*
{
font-family: "Century Gothic";
margin: 0em;
}
.parent
{
width: ;
}
#logo
{
clear: both;
float: left;
font-size: 100%;
left: 15em;
padding: 1em 0em;
position: relative;
}
#social
{
float: right;
font-size: 90%;
padding: 1em 0em;
position: relative;
right: 15em;
}
#banner
{
background: url(../../images/banner-01.jpg);
background-size: cover;
clear: both;
padding: 10em 0em;
position: relative;
}
#content1
{
border-right: medium solid #7e8082;
clear: both;
float: left;
font-size: 100%;
left: 15em;
position: relative;
}
#content2
{
font-size: 90%;
float: right;
position: relative;
right: 15em;
}
Here's a sample of the page I'm working on: http://www.ragnarok.ws
The idea is to have the margins on the logo & content1 and social & content2 align, which it does here. Unfortunately, content1 gibberish is running wild. If I put in, something like "width=500px", it falls back in line, but the alignment I'm looking for is screwed up. I suspect that I'm misusing the parent class, but I'm stone walled at the moment.
Any help is greatly appreciated.
Remove this style (left:15em;) from your main.css at line number 64.
#content1 {
/* left: 15em; */
}
and add this style
#content1 {
border-right: medium solid #7e8082;
font-size: 100%;
margin: auto;
position: relative;
width: 55%;
}
#home-slider should be perfectly centered behind all other divs within #home. margin and padding don't seem to work, as #home-slider remains at the top, left side of it's parent div. How else can I bring it down and centered? Or rather, what have I missed?
jsfiddle
live site
html
<!-- language: lang-html -->
<div id="home">
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
<div class="logo">
<h1><img src="http://lorempixel.com/232/232" alt="logo" id="logo" /></h1>
</div><!-- end logo -->
<div id="slider_mask">
<div class="slide_container">
<div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
<div class="slide"><p>is the maker + doer for makers + doers</p></div>
<div class="slide">
<ul>
<li>No items.</li> </ul>
</div>
</div>
<div class="left_button"></div>
<div class="right_button"></div>
</div>
</div><!-- end home -->
css
#home-slider {
top:0;
height:100%;
left:0;
position:fixed;
z-index:-9999;
}
#home .logo {
padding-top: 215px;
margin: 0 auto;
width: 232px;
}
#home #slider_mask {
width: 600px;
margin: 0 auto;
padding-top: 60px;
position: relative;
overflow: hidden;
}
#home #slider_mask .left_button {
float: left;
display: block;
width: 23px;
height: 25px;
background: url(img/left-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .left_button:hover {
background: url(img/left-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide_container {
float: left;
font-size: 120%;
text-align: center;
width: 300px;
}
#home #slider_mask .right_button {
float: right;
display: block;
width: 23px;
height: 25px;
background: url(img/right-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .right_button:hover {
background: url(img/right-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide {
float: left;
display: block;
text-align: center;
}
I understood you want #home-slider behind all others, and the others centered. Like adaam says "inline stylings on the HTML element defining the #home-slider div as having a relative position whilst in your CSS you had it set as absolute positioning. The inline had overrided the external stylesheet stylings"
I also added a few other css attributes here.
the HTML should be:
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
It's because you had inline stylings on the HTML element defining the #home-slider div as having a relative position whilst in your CSS you had it set as absolute positioning. The inline had overrided the external stylesheet stylings
Here is an updated fiddle: http://jsfiddle.net/dsZSE/10/
This is what your #home-slider code should look like:
#home-slider{
top:0;
height:100%;
left:0;
background-image:url('http://lorempixel.com/g/840/420');
background-repeat:no-repeat;
background-size:cover;
position:fixed;
z-index:-9999;
}
I pretty much see to have all the bugs figured out so far, besides one... the footer, again, isn't attached to the bottom. I had to remove the relative and absolute method because the content would stretch under the footer. So I need some sort of way to expand the area between the content and footer dynamically to keep the footer on the bottom. Is there a way this can be done? I have a "box-divider" set to 100% height, but it doesn't seem to do anything.
Live code here http://jordan.rave5.com/tmp/
CSS
#body {
transition: height 2s;
-webkit-transition: height 2s;
width: 74%;
min-width: 1024px;
height: auto !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #080908;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#body-content {
display: none;
height: 100%;
}
#box-divider {
width: 75%;
min-width: 1024px;
height: 100%;
margin: 20px auto 20px;
}
#footer {
width: 100%;
height: 150px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
padding: 0 0 20px;
}
HTML
<div id="background-overlay">
<div id="background-gradient">
<div id="header-image-grad">
<div id="header-container">
<div id="header">
<div id="navigation-container">
<div id="navigation">
<span id="nav">Navigation Area...</span>
</div>
</div>
</div>
</div>
<div id="header-image-border">
<img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
<div class="image-grad"></div>
</div>
</div>
<div id="body">
<div id="body-content"></div>
<div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
</div>
<div id="box-divider">
</div>
<div id="footer">
<br />
<div id="footer-content">
Footer Area...
</div>
</div>
</div>
</div>
One of the many versions out there... i use one in my designs
Sticky footer
This is what i do with my sites
html, body {height: 100%}
#wrap
{
min-height: 100%;
}
#footer
{
position: relative;
margin-top: -58px;
clear: both;
color: #333;
font-size: 10px;
text-align: center;
height: 85px;
background-image: url(../images/footerBG.jpg);
background-repeat: repeat-x;
}
the negative top margin is what does the trick...
HTML
<body>
<div id="wrap"><!--for sticky footer-->
<div id="headerWrapper"></div>
<div id="navWrapper"></div>
<div id="main">
<p>this is where your content fun crazy shenanigans will go</p>
</div><!--main or content-->
</div><!-- STICKY FOOTER -->
<div id="footer"></div>
</body>
Using nested divs, each div has a background image, I want the images side-by-side
I am trying to put stars side-by-side.
here is my html & css code
<body>
<div class="rate-stars">
<div class"star" id="s5"><pre> </pre>
<div class"star" id="s4"><pre> </pre>
<div class"star" id="s3"><pre> </pre>
<div class"star" id="s2"><pre> </pre>
<div class"star" id="s1"><pre> </pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My CSS:
.star
{
background-image: url("star-off.png");
float: left;
border: 0px;
width: 20px;
height: 20px;
margin: 0px;
padding: 20px;
}
Demo
Your first problem is you're missing the = in all of your class assignments:
<div class"star"
^ missing =
With those fixed, this CSS will do it:
.star
{
background-image: url("star-off.png");
background-repeat:no-repeat;
width: 20px;
height: 20px;
margin-left:25px;
}
You can do the following :
HTML can written as :
<div id="rate-stars">
<img id="star1" src="img/star1.png">
<img id="star2" src="img/star2.png">
</div>
Css :
#star1 {
left: 20px;
position: absolute;
top: 100px;
}
#star2 {
left: 60px;
position: absolute;
top: 100px;
}
Try this css
.star
{
background-image: url("star-off.png") no-repeat top left;
border: 0px;
padding-left: 20px;
height: 20px;
margin: 0px;
}