I have an image placed next to text, both inline-block elements, and am having difficulty centering them. I've tried including both in a div and applying text-align:center, but nothing changes. I've also thought about changing h1 to display:block and then applying text-align:center, but I'd like both the text and title to be centered relative to the content below it, instead of the whole thing being slightly off-centered from the placement of the image.
HTML:
<img src="logo.svg">
<h1 id="logo-text">TITLE</h1>
CSS:
header img {
display:inline-block;
margin:0 auto;
height:50px;
}
header h1#logo-text {
display:inline-block;
float:none;
margin:0 auto;
height:50px;
line-height:50px;
}
header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
header img {
height: 50px;
}
header h1#logo-text {
display: inline-block;
margin: 0;
height: 50px;
line-height: 50px;
}
<header>
<img src="https://unsplash.it/200">
<h1 id="logo-text">TITLE</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit eu diam et dapibus. Vestibulum mattis augue et gravida tincidunt. Etiam congue nisl id sem ornare, ac dignissim est aliquet. Aenean at venenatis est. Maecenas nunc tellus, imperdiet
nec eros eu, ultrices euismod turpis. Donec faucibus gravida lectus, sit amet maximus nulla posuere id. Aliquam pulvinar dui non arcu tincidunt, nec maximus sem pretium. Sed aliquet dolor ac lectus aliquam, sit amet aliquam tortor imperdiet. Proin vitae
diam tincidunt elit lobortis ultricies. Praesent tristique ex scelerisque posuere placerat.</p>
<p>Suspendisse potenti. Curabitur vel dictum odio. In congue egestas odio at lacinia. Aliquam vehicula felis nec faucibus vestibulum. Morbi sed augue accumsan, eleifend elit eget, luctus urna. Integer quis facilisis est. Ut at pretium erat. Mauris at neque
justo. Ut eu ligula pretium, volutpat justo quis, malesuada turpis. Integer id consectetur urna. Etiam mauris enim, mattis ac finibus id, volutpat eget sapien. Donec quis libero sapien.</p>
You can use flex to position it in the center, without any dirty hacks. No extra mark-up required.
header img {
display:inline-block;
margin:0 auto;
height:50px;
}
header h1#logo-text {
display:inline-block;
float:none;
margin:0 auto;
height:50px;
line-height:50px;
}
<header style="text-align:center;" >
<img src="http://www.lessons4living.com/images/penclchk.gif">
<div style="clear:both;display:block;" ></div>
<h1 id="logo-text">TITLE</h1>
</header>
Add the following css rule.
header{text-align: center;}
Related
I'm trying to float text around an image, but for some reason, the text won't go in the right place.
Here is what I want it to look like. I was able to create this in an editor by itself, but when I add it to my page, it breaks it and doesn't work.
I'm having trouble getting it to look like my other example. They have the same code for that part. Need help figuring out how to get it close to the first example.
Mine Now:
section{
display:flex;
border-style:solid;
background-color:azure;
}
img {
padding-top: 5em;
padding-right:2em;
}
p{
float:right;
}
h1{
text-align:center;
}
<section>
<img src="images/GM05.png" alt="headshot">
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
There are no floats involved. Put your image in another wrapper. Then apply flex property to that wrapper. Adjust the last value (flex-basis) to the width you want that "column" to be.
aside {
flex: 0 0 40%; /* flex-grow: 0; flex-shrink: 0; flex-basis: 40%; */
padding-top: 64px;
}
You can center the image in that space with margin.
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto; /* auto on the sides centers the item */
}
section {
display: flex;
border-style: solid;
background-color: azure;
}
aside {
flex: 0 0 40%;
padding-top: 64px;
}
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
h1 {
text-align: center;
}
<section>
<aside>
<img src="https://picsum.photos/200/300" alt="headshot">
</aside>
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
If i understand correctly, you just wanna to display this image on the center.
So, change padding-top: 5em; to margin: auto;
Best regards,
Brhaka
To start, I am aware that this question has been asked many times previously, and answered about as many times as it has been asked. Unfortunately I have not been able to get the solutions provided here, here and here to work for me.
I have only been using html and css for a few weeks, teaching myself through Codecademy. Sadly Codecademy's positioning tutorials are littered with bugs so the code I have here is the product of much trial and error and I'm not sure if any of it has been setup "correctly".
Without further ado, here's my current code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height:100%;
}
.footer {
width:100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: red;
}
This code makes me a header and footer with a content div between them. However, the content div is 0px tall. I would like the div to stretch from the bottom of the header to the top of the footer.
Here's a JSFiddle of my current code. Thanks in advance for any help.
The 'modern' way is to use flexbox
DEMO
.wrapper {
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex:1;
background:pink;
}
Edit: DEMO USING TABLE
Here is your solution.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: blue;
}
.footer {
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: orange;
}
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
I think you need this code:
.content {
height:100vh;
}
Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.[reference]
Your code is working actually. If <div class"content"> is empty then the height is 0px. Otherwise use fixed height value.
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.
Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.
Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.
Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.
Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
</div>
</div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar
I have two questions.
First, which css rule will make a div be highlighted in the Chrome Inspector? All I know is that float: left, and overflow: hidden will make a div show up/highlighted in the Inspector. For example, in the code in the link below, when you use Chrome Developer Tools, and click/hover on <div class="center">, the area that was supposed to be highlighted didn't show. If you click/hover on <div class="content"> or <div class"image"> you can see the area that are highlighted in light blue.
Secondly, How do I keep the image stick to the bottom of the responsive div with content inside?
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Suspendisse ac porttitor purus. Duis consequat condimentum tincidunt. Donec rhoncus maximus diam, ac bibendum neque mollis vitae. Vivamus vel mauris vel ex vulputate porta. Praesent convallis elit odio, et vehicula quam vulputate vitae. Aliquam porttitor porta justo sed semper. Nunc tristique tellus arcu, id vestibulum mi gravida id. Nulla a interdum dolor. Aenean mollis purus ac sagittis semper. Nulla ipsum neque, blandit eu tempus eget, condimentum id erat. Mauris vitae nibh in arcu ultrices porta ut id nisi. Donec dapibus eros vulputate magna ultrices bibendum. Fusce libero dui, malesuada eget gravida ut, semper vel mi.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
</div>
CSS
.center {width: 100%; position: relative; display: block; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; position: relative; height: 400px;}
.image img { position: absolute; bottom: 0; right: 0; vertical-align: bottom;}
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
Code in action: http://codepen.io/kikibres/pen/MwBxBK
As you can see, for the image to stick to the bottom of the div, I need to specific the height of the div for the image to work. Otherwise, it just sit out of div on top / outside of div. How do I make it stick to the bottom while making the height responsive?
Additionally, if you use Chrome Inspector / Developer Tools on this code at codepen, you can also see that <div class="center"> isn't highlighted.
Ok here's my answer.
Please take a look at this fiddle first.
Answer to Question 1:
I believe it happens because of the wrong css usage. if you use float left, It won't take space unless it is cleared by using clear: left;.
Or you can use overflow: hidden on the parent container of the element with float:left.
Answer to Question 2:
Sorry but I have to remove unnecessary css to make the image stick to bottom in smaller screen. You can also achieve this using other approach but this is the easiest way for me.
html,
body{
padding: 0;
margin: 0;
}
.center {
width: 100%;
margin: 50px 0;
padding: 15px;
background-color: #63103C;
color: #fff;
overflow: hidden;
}
.content,
.image {
width: 50%;
float: left;
}
#media (max-width: 768px) {
.content,
.image{
float: none;
width: 100%;
}
}
Position image at bottom of variable height div is a very good answer to my question. I just couldn't find it at first when I was searching for an answer before I post this question...
The key is .clear { clear: both; } in which you put <div class="clear"></div> after the first two divs inside the main div.
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
<div class="clear"></div> <!-- Where you should put it -->
</div>
CSS
.center {width: 100%; position: relative; background-color: #dd1a83; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; }
.image img { position: absolute; bottom: 0; right: 0; border: 3px solid #000;}
.clear { clear: both; } /* Don't forget to put it there too*/
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
I am trying to place the 'learn more' link at the bottom of the page, it is text alone with the image of a red dot.
1) the image of the red dot and text are not centered using the 'centered' class
2) the link is not placed at the bottom of the page when I use absolute positioning of the link inside a div that is position:relative
Can someone help explain this to me? Thank you very much.
http://jsfiddle.net/7Kgxz/
HTML
<div class="wrap">
<div class="page1">
<nav class="navigation">
<ul>
<li>Home</li>
<li>Support</li>
<li>Sign Up</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="page1-content centered">
<h1> Generic Header</h1>
<h2> Generic Content 1</h2>
<h2> Generic Content 2</h2>
<h2> Generic Content 3</h2>
</div>
<div class="learn-more centered">
learn more
</div>
</div>
<div class="page2-content" id="text">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p>
</div>
CSS
body {
background: blue;
color: white;
}
.centered {
margin: 0px auto;
position: relative;
vertical-align: middle;
text-align: center;
}
nav {
list-style: none;
}
.navigation ul li {
list-style: none;
float:left;
margin: 5px;
}
.page1-content {
clear:both;
}
div.wrap {
position:relative;
}
div.learn-more {
position:relative;
}
.learn-more a {
background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-dot.png) no-repeat;
height: 12px;
width: 12px;
color:red;
position:absolute;
bottom: 0;
left: 0;
right:0;
padding-bottom: 3%;
}
.page2-content {
margin: 200px 0 auto;
background-color: white;
color: black;
background-size: 100% 1000px;
margin-top: 200px;
}
Elements are positioned within the closest parent which is explicitly positioned.
You've added position: relative; to your .centered, which is the immediate parent of the link you're positioning absolutely. That link will be positioned absolutely within .centered, not within the page.
If you want to position the element within the page and not within .centered, remove position: relative; from all the elements you've applied it to. There is no reason to explicitly specify it except to force child elements to be positioned relative to a specific element.
your "learn-more" immediate after "centered" class. this "centered" class has position also. so removed "centered" class from this element otherwise take new class for that element.