I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why.
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
What I want is to have the green block at the top (see fiddle).
Here is the fiddle
Please can anyone explain the behaviour and answer why the block is shifted from the top?
It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.
Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:
/* header block */
header {
height: 536px;
background-color: #ddd;
background-position: center;
background-size: 100% 536px;
background-repeat: no-repeat;
overflow: hidden;
}
header .header-wrapper {
position: relative;
overflow: auto;
z-index: 2;
}
.header-slogan-1 {
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-top: 88px;
}
.header-wrapper .header-info {
position: absolute;
top: 0;
z-index: 3;
background-color: #4caf50;
max-width: 600px;
padding: 25px 25px 25px 75px;
color: #fff;
}
.text-center {
text-align: center;
}
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
If I'm understanding this correctly, you want the header to have no space around it. If this is the case, then just add
body {
margin: 0;
padding: 0;
}
to the top of your css and you should be all set.
I changed margin-top: 88px; into padding-top: 88px; of header-slogan-1 as it does not change my layout. I have an image in wrapper class and it is centered and may exceed the container size, so I need position:relative and overflow:hidden.
Finally I decided to pick my solution. Sorry Adam for not choosing your answer.
Related
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
When I give a top-margin to .galeria element, why I get also the same top-margin in .sorial-grande element?
http://sorialconstrucciones.com/trabajos
.sorial-grande {
position: absolute;
right: 0;
left: 0;
background: url("/drawing.svg");
background-repeat: repeat-x;
height: 337px;
background-position: center center;
}
.galeria {
padding: 40px;
clear: both;
/*margin-top: 350px;*/
img {
width: 207px;
margin-right: 10px;
margin-bottom: 10px;
}
}
<div class="sorial-grande"></div>
<section class="galeria">
<img src="/images/00.jpg"></img>
<img src="/images/02.jpg"></img>
</section>
This is commonly known as margin collapse. Essentialy, as it goes on mdn, "Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing."
There are a few ways to get around it. In your case, easiest would be to add padding-top:1px to <main> tag
Change it from margin-top to padding-top
.galeria {
padding-top: 350px;
}
I think somewhere is repeating code because the watch file .css, I see more properties that you mention. If that is true, I think that commenting out these two lines, will fix your problem (if that's what you want).
main .sorial-grande {
/* position: absolute; this line */
}
and
main #galeria {
/* padding: 222px 40px 40px; */
}
Please forgive my lack of design knowledge but I am confused by a bit of div positioning. I have a header div. Within that header I want two divs, one for the logo, and below that another for some content. I have labeled them logo and card respectively. However, when I try to put them both into the html, calling them in proper order, the card div simply lays atop the logo div rather than beneath it. I have tried using pretty much every variation of "clear: xxx" both in the css and inline within the html but they have no effect whatsoever. Can someone explain why this isn't working? Posting relevant css and html below.
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
position:absolute;
top: 3px;
left: 50%;
margin-left: -198px;
}
#header .card {
position: absolute;
left: 50%;
margin-left: -500px;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: left;
}
And the HTML:
<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>
Any help is greatly appreciated.
Edit: So yes, clearly I am an idiot for trying to use "clear" with no floated elements. I understand that now. So how do I get one division below, rather than on top of, the other?
Get rid of all your absolute positioning. It's rubbish.
http://jsfiddle.net/2BpfF/1/
If you want the .logo DIV to be centered on the page and you know it's width you can do this:
#wrapper {
width: 999px;
margin: 0 auto;
}
#header {
height:416px;
margin-top: 0px;
}
#header .logo {
margin: 0 auto;
width: 333px;
}
#header .card {
background-image: url(http://lorempixel.com/999/367/);
background-repeat: no-repeat;
height: 367px;
}
HTML
<div id="wrapper">
<div id="header">
<div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
<div class="card">Some text here</div>
</div>
</div>
margin: 0 auto; adds 0px margins to the top and bottom of the DIV while calculating the left and right amount for you so it will center. This will only work with a known width.
It seems like you want to center everything. So I would start with a wrapper DIV and center that. I did this with #wrapper.
Remember that source order matters and that by default your .logo DIV will display before your .card DIV without any CSS.
You can also remove the width: 100%; from your #header DIV as all DIVs by default are block level elements. Block level elements always take up the full width of their containing element unless told otherwise.
As for the opacity of the background image I think the best solution would to do this for your image file and not with CSS as I don't think opacity is very versatile yet. What I mean my this is if you set opacity: 0.5; to a DIV, then everything in that div is 50% opaque. I'm not a guru on opacity so you'd have to dig into that a little deeper. But I would just set the opacity in your image editor to 50% and output a PNG file so the alpha(opacity) chanels will be there. JPG files do not have alpha channels for transparency.
You don't have any floated elements, so clear has absolutely no effect.
Absolute positioning removes the element from the document flow, so floating and clearing will have no effects on such positioned elements, since floating adjusts the element within its content flow.
Avoid absolute positioning. Same thing you can achieve using something like this :
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
padding: 5px;
text-align:center;
}
#header .card {
margin-left: auto;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: both;
padding: 5px;
}
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.