I am using position:relative and top:-120px to move the header background image underneath the two header <div/>s, which works nicely. I then had to set the wrapper <div/> and footer <div/> to also be relative and move them both up 120 pixels to line up correctly. The problem is that the bottom of the page now has 120 pixels of extra space underneath the footer. Is there an easy way to remove that space? Or perhaps is there a different way of using CSS and the position property to achieve this result? Here's my site:
http://ledvideowall.net
Here's the fix:
.wrapper {
top: 0;
}
.site-header {
margin-bottom: -120px;
}
footer[role="contentinfo"]{
top:0;
}
I was going to say that #headerbg doesn't need to exist, but I see that you are using the image to maintain the height/width ratio of the header as the page sizes down.
When I need to do something like this, I don't position the "background-image" in this case at all, but make the wrapper position:relative and the #headertop & #menubar position:absolute. This takes the top and menu out of the flow and makes the background image the work.
.site-header {
position:relative;
...
}
#headertop {
position:absolute;
top:0;
left:0;
width:100%;
z-index:1;
...
}
#menubar {
position:absolute;
top:80px;
left:0;
width:100%;
z-index:1;
...
}
#headerbg {
display:block;
height:auto;
width:100%;
/*
position: relative;
top: -120px;
z-index: 0;
*/
}
#headerbg img {
display:block;
width:100%;
height:auto;
}
You could apply margin-bottom to revert the effect the relative position causes:
footer[role="contentinfo"]{
margin-bottom: -120px;
}
If you've intentionally moved the footer up 120px, you can do this to remove the white space below it.
footer[role="contentinfo"] {
margin-bottom: -120px;
}
Related
I am building a website with different sections with absolute positioning, one of the sections has a height: auto, I was trying to align them by setting up a top: x vh; but it didn't work since there is a height:auto value.
These are the sections:
#navbar{
position:fixed;
width:100%;
height:10vh;
top:0;
left:0;
}
#greeting{
position: absolute;
width:100%;
height:90vh;
top:10vh;
left:0;
}
#projects{
width:100%;
min-height:90vh;
height:auto;
position:absolute;
top:100vh;
left:0;
right:0;
}
I want to add a new section after projects but I couldn't set the top value.
https://codepen.io/Kairkan/pen/LYyoVRX?editors=1100
this is my full code on codepen
HTML
<section id="contact">
<h1 id="contact-h1">Let's work together</h1>
<h3 id="contact-h3">How do you take your coffee?</h3>
</section>
/////
CSS
#contact{
height:100vh;
width:100%;
position: absolute;
left:0;
right:0;
background-color: #393A42;
}
This is the subsequent section. But it stacks on the top of the page because I couldn't set the top: value
You have to reset the margin property in the body section as follows:
body {
margin: 0;
}
then you can remove position: absolute, top, and left.Then just position your sections one by one as follows:
#greeting {
margin-top: 10vh;
height:90vh;
// ... other styles
}
#projects{
min-height:90vh;
// ... other styles
}
#contact {
min-height: 90vh;
background: lightblue;
// ... other styles
}
ps. 1 You don't have to use width: 100% on div and other block elements because that makes no sense. see
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
ps. 2 Avoid styling with IDs. Use classes instead. see
I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
I need to place 2 <span> inside a <div>, the first span must be placed on top, the second one on bottom, like North-South.
<div>
<span class="north">N</span>
<span class="south">S</span>
</div>
To do this, I thought about using position:absolute; on the 2 <span>.
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
}
.north
{
position:absolute;
top:0;
}
.south
{
position:absolute;
bottom:0;
}
Now, the spans should be positioned to the left (default), to center them, I used:
div
{
text-align:center;
}
But I got this:
Check it out : http://jsfiddle.net/Zn4vB/
Why is this Happening?
Note: I cannot use margins, left, right, because the contents of those spans are different, I just need to align them properly in the center.
http://jsfiddle.net/Zn4vB/1/
The issue is that once absolutely positioned, it no longer follows the document flow. So the text is centered, but only inside the pink span. And since it's absolutely positioned, even if it were a div, the width would collapse.
The solution is to give the positioned spans a 100% width and then centering works.
span
{
background-color:pink;
left: 0;
width: 100%;
}
If you don't want the pink to extend the full width, then you must nest an element (e.g. span) inside the positioned spans and give that element the background color, as seen here: http://jsfiddle.net/Zn4vB/6/
please check if this one is the idea you want..
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
border-style:solid;
}
span
{
background-color:pink;
width:100%;
text-align:center;
}
.north
{
position:absolute;
top:0;
}
.south
{
position:absolute;
bottom:0;
}
You've got the positioning right. But <span> tags are inline elements, so you need to make them display as block-level elements with display: block; and then explicitly declare their width with width: 100%;.
They will inherit the text-align property from your style rules on the <div> so the text will be in the center.
I've updated your code here: http://jsfiddle.net/robknight/Zn4vB/5/
you can use transform to solve this problem
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
border-style:solid;
text-align:center;
}
span
{
background-color:pink;
}
.north
{
position:absolute;
top:0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.south
{
position:absolute;
bottom:0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
I have a layout with a middle aligned paging.
The paging is middle-aligned be this trick:
.pager_wrap
{
float: left;
position: relative;
left: 50%;
}
.pager
{
float: left;
position: relative;
left: -50%;
}
This seems to be working fine.
But there was a request to add a facebook like button the right side of the pager, but NOT affecting the position and middle alignment of the paging.
I was thinking about somehow putting the facebook like in a div right after the .pager-wrap div, and somehow modifying its vertical alignment to be over the .pager-wrap div.
I'm no mage in css and these kind of problems tend to take extremely long time to figure out. Can someone help me out on this one?
.button
{
float: right;
position: relative;
right: 10%;
}
Instead of float your can give display:inline-block to it's & text text-align:center to it's parent for center your paging DIV . May be you write like this:
.pager_wrap
{
background:red;
text-align:center;
}
.pager
{
background:yellow;
display:inline-block;
*display:inline /*IE*/
*zoom:1;
text-align:right;
padding:10px;
}
.facebook{
float:right;
width:30px;
height:40px;
background:blue;
}
Check this http://jsfiddle.net/DdPtv/
Place the facebook icon in a div, position it relatively, float to the right and if needed apply a z-index to bring it higher on the stack.