I've made a codepen at http://codepen.io/anon/pen/vNVMRE
I know how to make a sticky footer.
However, in my case my content (.moveDown) needs to be positioned absolute, because of that the footer doesn't stick at the bottom.
You can check that in the codepen. If you make the window smaller until you have scroll bars, the footer moves over the content and stays in the new position;
Of course I could make the .movedown div relative by changing the code on line 40 & 41 to
position: relative;
top: 0;
But then my mobile version gets problems.
I have made a simplified version # http://lettherobots.be/test2/
As you can see, the footer works until there's a scroll bar.
If you scale the window to max-size 460 there's a vertical menu which can be accessed through the hamburger.
If I make the position of the content wrapper (.moveDown) relative, then the links in my vertical navigation become inactive. I have tried fixing that with z-index, but that didn't solve the problem.
Any idea how I can get this fixed? How I can get a footer at the end of my documents even if the content of the page
Some of the code:
Html:
<body>
<div class="container">
<div class="navContainer">
<nav class="horizontalNav">
....
</nav>
<nav class="verticalNav" id="verticalMenu">
...
</nav>
</div>
<div class="content moveDown clearfix">
<header>
<img src="images/headerPic.jpg" alt="Header picture">
</header>
<div class="htmlWrapper">
{$importedContent}
</div>
</div>
<footer>bla bla</footer>
</div>
CSS
.moveDown {
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
top: 60px;
width: 100%;
z-index: -2;
-webkit-transition: top 300ms ease;
-moz-transition: top 300ms ease;
-o-transition: top 300ms ease;
-ms-transition: top 300ms ease;
transition: top 300ms ease;
}
You can't stick only with position:absolute, because absolute elements is positioned according to first parent relative element. You can fix at the bottom of some div, but it is static, so it can't move according to scroll. There is an excelent explanation at CSS-tricks where you can see this differentes.
See this example below:
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html {
height: 100%;
}
.clearfix::after,
section::after,
header::after,
footer::after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.container {
min-height: 100%;
position: relative;
}
.navHorizontal {
height: 60px;
text-align: right;
background-color: #eee;
}
nav.navHorizontal a {
display: inline-block;
}
.content {
padding-bottom: 100px;
position: absolute;
top:60px;
width: 100%;
}
header img {
width: 100%;
height: 100px;
}
footer {
background-color: #ddd;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
<div class="container">
<div class="navContainer">
<nav class="navHorizontal">
<section>
<div class="linkSection">
Home
Portfolio
Tutorials
Contact
</div>
</section>
</nav>
</div>
<div class="content clearfix">
<header>
<img src="http://placehold.it/200x100">
</header>
<div>
<h1>Some text here</h1>
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<footer>Footer Content</footer>
</div>
</div>
Related
I have an image with some text below it, however, I am trying to get them to align vertically and horizontally in the middle. It must also be responsive to both mobile and web view, is it possible?
Here's what I have tried
<style>
.img-responsive {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
<div class="container">
<img src="..." class="img-responsive"/>
<h4 style="text-align: center;">Sample Text 1</h4>
<p style="text-align: center;">Sample Text 2</p>
</div>
Try this
Html
<div class="container">
<img src="https://s33.postimg.cc/ud7gljfb3/ripple_Bg.jpg" class="img-responsive"/>
<div class="textblock">
<h4 style="text-align: center;">Sample Text 1</h4>
<p style="text-align: center;">Sample Text 2</p>
</div>
</div>
Css ( 2 ways to make center )
1. modern browser supported
.container {
width: 500px;
height: 500px;
position: relative;
}
.img-responsive {
z-index: -1;
position: absolute;
display: block;
width: 100%;
}
.textblock {
width: 109px; /*need to give width*/
display: inline-table; /*ie not supported*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
1. IE not supported
.container {
width: 500px;
height: 500px;
position: relative;
}
.img-responsive {
z-index: -1;
position: absolute;
display: block;
width: 100%;
}
.textblock {
width: 109px; /*need to give width*/
height: 100px; /*need to give height*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
Hope it helps:)
You can use the media object in bootstrap
<div class="media">
<img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
The documentation link above show you how to align images in different positions. The grid in Bootstrap4 is based on Flex, which allow you to do many advanced layouts. Check it out.
I hope, this question wasn't asked before, but I searched the net and didn't find an answer.
I'm trying to do a slide over over an image. There are lot's of examples in the internet, but they don't seem to work for me.
The slide works, but the sliding div shows before and out of the target image.
Here is my code:
div.details {
position: absolute;
left: -250px;
top: 0px;
width: 240px;
height: 170px;
overflow: hidden;
margin: 0px;
padding: 5px;
opacity: 0.7;
background-color: grey;
color: white;
transition: all .5s;
display: block;
transition: all 0.5s;
-webkit-transition: all .5s;
}
div.project:hover div.details,
div.project-nl:hover div.details {
left: 0px;
}
<div class="project">
<a class="fancybox" href="/index.php/assets/Uploads/th2.jpeg">
<img src="/index.php/assets/Uploads/_resampled/SetSize250180-th2.jpeg" alt="Project2" />
<div class="details">
<h2 class="ptitle">Project2</h2>
<p>Nullam suscipit diam et leo malesuada finibus. Pellentesque hendrerit porta sodales. Suspendisse volutpat eros sapien, et ullamcorper orci condimentum vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Maecenas auctor auctor.
</p>
</div>
</a>
</div>
This is how I found it in the net, and there it works fine, just, that when I try it, the sliding div is visible all the time.
Is there a way to hide the div, and just show it when it enters the image?
I tried display:none, but then the div just appears, without a slide effect.
Any help would be apreciated.
Just posted it, an now I got the answer.
I have to set overflow:hidden; on the containing (div class=project) div.
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle
I know this has been asked before but im curious to see if things have changed.
I'm looking for a html/css fixed 3 column layout with the main content (middle) area located first (of the 3 columns) in the DOM - for SEO.
Any ideas?
It requires a bit extra markup, but to get the content to be first, you can try something like this:
<div id="wrapper">
<div id="content-wrapper">
<div id="content">I'm first</div>
<div id="side_a">I'm second</div>
</div>
<div id="side_b">I'm third</div>
</div>
And in CSS:
#wrapper {
width: 800px; /* Total width of all columns */
margin: 0 auto;
}
#content-wrapper {
float: left;
}
#content {
width: 400px;
float: right;
}
#side_a {
width: 200px;
float: left;
}
#side_b {
float: left;
width: 200px;
}
#wrapper contstraints the columns to the width of 800px and makes the page centered. The #content and #side_a columns are arranged inside #content_wrapper in reverse order using different floats. #side_b is then floated alongside #content_wrapper.
A working example can be found here:
http://www.ulmanen.fi/stuff/columns.php
This is the same approach used Tatu, but with:
a header
a footer
a fluid width instead of fixed sizes
columns that have full height background colors
extra divs to pad the content in the columns
You can test it on jsfiddle: http://jsfiddle.net/BzaSL/
HTML:
<div id="header">First: Header</div>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<div id="contentpad">
<h2>Second: Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
</div>
</div>
<div id="leftcol">
<div id="leftcolpad">
Third: Left column
</div>
</div>
</div>
<div id="rightcol">
<div id="rightcolpad">
Fourth: Right column
</div>
</div>
</div>
<div id="footer">Fifth: Footer</div>
CSS:
/* wrapper has all three columns, it is 100% of page width.
* background applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* clear floating elements before footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* content-wrapper is left two columns; 80% of wrapper width.
* background applies to left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* content is 75% of the content-wrapper width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* leftcol is the other 25% of the content-wrapper width */
#leftcol { width: 25%; float: left; }
/* rightcol is 20% of thet wrapper width */
#rightcol { float: left; width: 20%; }
/* Adding padding or margin directly to the columns messes up the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }