This question already has answers here:
Sticky footer with sticky header?
(2 answers)
Closed 6 years ago.
I think my coding is correct, but I still can't put the footer to the bottom of the page, and I really need to do it.
The footer on the result appears directly under the header which is annoying as I want it to go into my main div which is located in my body.
Thanks. :)
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link type="text/css" rel="stylesheet" href="mobile.css"/>
</head>
<body>
<div id="header">
<div id="companyname">Shutter Up Photography</div>
<div id="nav">
<ul>
<li>Contact Us</li>
<li>Experience</li>
<li>Offers</li>
<li>Gallery</li>
<li>Location</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="img">
<img src="img_model.jpg"/>
<div class="desc">Model Shot</div>
</div>
<div class="img">
<img src="img_classy.jpg"/>
<div class="desc">A classy family shot</div>
</div>
<div class="img">
<img src="img_father.jpg"/>
<div class="desc">A father and his boys</div>
</div>
<div class="img">
<img src="img_wedding.jpg"/>
<div class="desc">Timeless Wedding Shot</div>
</div>
<div class="img">
<img src="img_mother.jpg"/>
<div class="desc">A mother and her children</div>
</div>
<div class="img">
<img src="img_kid.jpg"/>
<div class="desc">Imaginative Kid</div>
</div>
</div>
</div>
<div id="footer">
<div id="companyname">Shutter Up Photography</div>
</div>
</body>
</html>
This is the result from my coding, I've tried to put the css gallery into the main div, but won't work
This is my css code for it
Add a wrapper with the following CSS attributes as the code below. This should do the trick:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 150px;
/* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px;
/* negative value of footer height */
height: 150px;
border-bottom-style: solid;
clear: both;
background-color: #006BFE;
border: 2px solid red;
/* remove border, showns for illustration purposes only */
}
div.img {
margin: 5px;
display: inline-block;
width: 400px;
border: 1px solid blue;
padding: 10px;
}
div.img img {
width: 100%;
height: auto;
border: 2px solid #006bFE;
}
div.desc {
padding: 15px;
text-align: center;
}
.somelist {
list-style-type: square;
list-style-position: inside;
float: none;
line-height: 1.5em;
background-color: #93dbfe;
}
<div id="wrap">
<div id="header">
<div id="companyname">Shutter Up Photography</div>
<div id="nav">
<ul>
<li>Contact Us
</li>
<li>Experience
</li>
<li>Offers
</li>
<li>Gallery
</li>
<li>Location
</li>
<li>About Us
</li>
<li>Home
</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Model Shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A classy family shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A father and his boys</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Timeless Wedding Shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A mother and her children</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Imaginative Kid</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="companyname">Shutter Up Photography</div>
</div>
Its because your images are being floated which takes them out of the flow of the page.
Try this
div div div.img {
margin: 5px;
border: 2px solid blue;
display: inline-block;
width: 400px;
}
By removing the float and replacing with inline block you keep the elements within the flow of the page.
EDIT -
HTML -
<div class="img">
<img/>
</div><div class="img">
<img/>
</div><div class="img">
<img/>
</div>
If you choose to use inline-block, layer your html like this, as inline-block elements take into consideration the white space between elements.
**/ EDIT **
Or if you wish to keep the float, create a clearfix class and attach it to the parent
.clearfix:after {
content: "";
display: table;
clear: both;
}
EDIT -
<div id="content" class="clearfix">
<!-- your floated divs here -->
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
How to put these two divs side by side. I used inline-block but the right one is lower than the left one. I used this same twice and in both cases this produced the same error.
Here is my html:
<div class="MainHeader">
<div class="logo">
<img class="Logo" src="/assets/img/Logo/Logo.png"/>
</div>
<div class="SPortal_header">
<div class="menu">
<ul>
<li><a>| Sign Out</a></li>
<li>| Academic Calendar</li>
<li>Master Schedule</li>
</ul>
</div>
</div>
<div class="name_wrapper">
<div class="student_icon">
<i class="fa fa-user fa-2x"></i>
</div>
<div class="student_name">
<h2>User's Name</h2>
</div>
</div>
</div>
Here is my CSS:
.Logo{
width: 270px;
height: 50px;
}
.MainHeader{
background-color: #5D0C1D;
width: 100%;
}
.SPortal_header, .logo{
display: inline-block;
width: 48%;
padding: 10px;
height: 80px;
}
You need vertical-align: middle; to align both inline-block divs in middle, side-by-side. I also removed height: 80px; because both of divs have different content height
.Logo{
width: 270px;
height: 50px;
}
.MainHeader{
background-color: #5D0C1D;
width: 100%;
}
.SPortal_header, .logo{
display: inline-block;
vertical-align: middle;
width: 38%;
padding: 10px;
}
<div class="MainHeader">
<div class="logo">
<img class="Logo" src="https://i.picsum.photos/id/389/536/354.jpg?hmac=mw2HAbrZOUQP05D91hdDGU3_1rhX_Hl8a2At_atV3PA"/>
</div>
<div class="SPortal_header">
<div class="menu">
<ul>
<li><a>| Sign Out</a></li>
<li>| Academic Calendar</li>
<li>Master Schedule</li>
</ul>
</div>
</div>
<div class="name_wrapper">
<div class="student_icon">
<i class="fa fa-user fa-2x"></i>
</div>
<div class="student_name">
<h2>User's Name</h2>
</div>
</div>
</div>
See Umbrella image in images:
Full-size window:
.
Reduced (ideal placement):
I would like to have my umbrella image in the centre of the screen no matter the size of the window.
It works from the point where the window shrinks and works in mobile view too.
I've tried various methods but it doesn't seem to be working, any tips would be greatly appreciated.
Here is my code:
HTML
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
CSS
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
//cards
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
Use dispaly:flex to .wrap
See working code
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
.wrap{
margin: auto;
margin-top: 100px;
display: flex;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
End The page 2 div before starting page 3 div.
Change the page3 css to
.page3{
margin: 50vh 50vw;
}
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella Here">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
Use flex for .wrap like this :
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
display: flex;
justify-content: center;
}
this code make image in center horizontally.
I want text on right and image on left and vice-versa with vertically centered both.
It should look like as follows
Image
Structure
<section>
<div class="columns">
<div class="column is-7">
<!-- Image -->
</div>
<div class="column is-5">
<!-- My hero -->
</div>
</div>
</section>
<section>
<div class="columns">
<div class="column is-5">
<!-- My hero -->
</div>
<div class="column is-7">
<!-- Image -->
</div>
</div>
</section>
In total
(Change CSS according to your needs)
.myBg {
background-color: #273238;
color: white;
border: 1px solid white;
}
.myHero .hr {
display: inline-block;
width: 100px;
height: 15px;
background: white;
border-radius: 20px;
margin-bottom: 15px;
}
.myHero h1 {
font-size: 50px
}
.myHero.hero-right {
padding-right: 100px;
text-align: right;
}
.myHero.hero-left {
padding-left: 100px;
}
#media(max-width: 768px) {
.myHero {
padding: 100px 50px !important;
//text-align: left !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="myBg">
<div class="columns is-vcentered">
<div class="column is-7">
<figure class="image is-4by3">
<img src="https://i.stack.imgur.com/WpMdM.png" alt="">
</figure>
</div>
<div class="column is-5">
<div class="myHero hero-right">
<div class="hr"></div>
<h1>BOOST</h1>
<ul>
<li>This is the cooles thing.</li>
<li>I am gonna do in my entire life. Awesome!</li>
<li>Achievements are good as heaven. I want it soon.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="myBg">
<div class="columns is-vcentered">
<div class="column is-5">
<div class="myHero hero-left">
<div class="hr"></div>
<h1>BOOST</h1>
<ul>
<li>This is the cooles thing.</li>
<li>I am gonna do in my entire life. Awesome!</li>
<li>Achievements are good as heaven. I want it soon.</li>
</ul>
</div>
</div>
<div class="column is-7">
<figure class="image is-4by3">
<img src="https://i.stack.imgur.com/WpMdM.png" alt="">
</figure>
</div>
</div>
</section>
I'm trying to set up separate sections within the body that would show info in them like this
using float: left; doesn't help, it only messes up the page layout.
here's my html...
#a,
#g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
<section>
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
</div>
Why are you using the same name for multiple instances of the same id for your images? ID's are supposed to be unique, you're better of using a class if you're going to group. Check my solution out for your question:
#a, #g {
color: #bdc3c7;
list-style: none;
}
.pic {
margin:+5% 0 0;
border: 3px solid black;
float:left;
}
.sections {
height:100px;
background-color: #6d6d6d;
}
.info {
margin:+5% 10px;
float:left;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section class="sections">
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
<section class="sections">
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
</div>
I classed the section tags as that's what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID's to classes.
If you have any questions, let me know.
change id="pic" to class="pic". because ID should be used 1 time in a page..
then write in css:
.pic {
float: left;
}
Try using float:right
#wrapper ul {
padding: 0;
margin: auto;
width: 80%;
list-style-type: none;
}
#wrapper ul li {
background-color: #6d6d6d;
padding: 30px;
margin-bottom: 20px;
display: table;
width: 100%;
}
#wrapper ul li img {
float: left;
}
#wrapper ul li .details {float: right;width: 75%;}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
</ul>
</section>
</div>
I changed your code and list things a bit.. Tell me if i misinterpreted your question..
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<style>
#a, #g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
width: 100%;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
display:table-cell; width:100px;height:100px;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
section{
width: 100%;
}
</style>
</head>
<body>
<div Id="wrapper">
<section>
<a href="img/appstore.jpg" id="a">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/appstore.jpg" width=180px alt="">
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
<section>
<a href="img/googleplay.jpg">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/googleplay.jpg" alt="" width=180px>
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
</div>
</body>
</html>
I am creating a table-like by using html unordered nested list, style-up with css to make it look like table. Now it looks exactly how I want in Firefox, but looks horrible in IE8.
(Sorry that I don't have enough reputation to post the image to show you the differences, kindly refer to code below).
HTML code as below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
TODO write content
</div>
<ul>
<li>
<div class="box">
<div class="title">
My Categories
</div>
<div class="description">
My Categories
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Fun
</div>
<div class="description">
Fun
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Sport
</div>
<div class="description">
Sport
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Surfing
</div>
<div class="description">
Surfing
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Extreme knitting
</div>
<div class="description">
Extreme knitting
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Friends
</div>
<div class="description">
Friends
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Gerald
</div>
<div class="description">
Gerald
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Gwendolyn
</div>
<div class="description">
Gwendolyn
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Work
</div>
<div class="description">
Work
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Reports
</div>
<div class="description">
Reports
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Annual
</div>
<div class="description">
Annual
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Status
</div>
<div class="description">
Status
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Trips
</div>
<div class="description">
Trips
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
National
</div>
<div class="description">
National
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
International
</div>
<div class="description">
International
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
CSS:
.box {
border: 1px solid #BBBBBB;
border-radius: 4px 4px 4px 4px;
margin: 10px;
width: 200px;
position: relative;
padding: 10px;
color: #333333;
font-weight: normal;
min-width: 0;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
background: #e6e49f;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
}
.title {
width: 100%;
font-weight: bolder;
}
.description {
width: 100%;
font-size: medium;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul {
line-height: 38em;
position: relative;
}
ul ul {
line-height: 18em;
position: absolute;
left: 200px;
top: 0;
}
ul ul ul { line-height: 8em }
ul ul ul ul { line-height: 3em }
ul li { position: relative }
I tried to research a lot about CSS for week on this issue and thinking that "line-Height" is the issue because it looked awkward in IE8. I studied that IE8 version should be able to cater the unordered List issue.
Anyone can provide me some idea how to solve this? Or any thing I can used to replace the "line-height"?
I still want to remind unordered listed(<ul>) with css only, no <div> because I don't want to change the core file of cakephp.
Thanks to #ZippyV reminded me to declare the <!DOCTYPE> on it by simply add a line of code
before the <html> tag, so that the browser goes into standards mode and the html is valid.
Now IE8 display it exactly the same as firefox.