I'm trying to make some header for my website and another div below it, to contain a colored rectangle. Is it possible? I tried it like this so far, but no luck:
.logo {
width: 100%;
left: 0%;
right: 0%;
position: absolute;
}
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>
The div that contains "123" should be below the header div. How can I do this?
First of all you should not use so much inline styles. rather use it within a css class (like you did for some code in .logo)
you could use something like this to achieve your positioning:
.header {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: grey;
background-image: url('');
background-position: center center;
background-size: 100% 100%;
}
.numbers {
margin-top: 50px;
height: 100px;
background-color: blue;
width: 100%;
}
and the html is simply this:
<div class="header"></div>
<div class="numbers">123</div>
you would simply place your relative container with a margin-top with the height of your absolute container
i don't really like those absolute px solutions with margins.
if this header should always look like this ( with the triangle and the numbers etc) i would suggest to wrap those two containers into one absolute container and position them both relative like you can find here:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header {
display: block;
height: 50px;
width: 100%;
background-color: grey;
}
.numbers {
height: 100px;
background-color: blue;
width: 100%;
}
<div class="wrapper">
<div class="header"></div>
<div class="numbers">123</div>
</div>
The div below, in this scenario, would need the have a margin-top value equal to the height of the absolute positioned div.
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
123
Not easy to fix... if you set something absolutely, like you logo there, you break it out of the document flow. Hence, the rest of the page won't care where it is and cannot place itself next to it. It will just be under or over it.
You could detect the position of the logo with javascript and place the other one next to it if it too is aboslute.
I THINK you want to set the logo to position: fixed instead, and add margin-top to the body, so that it always starts where the logo ends. That way the logo would always be on top and follow you when you scroll, and the body wont be covered by the logo.
Related
I would like to position the image inside the header. Currently, the top portion of the image is displayed and I want to display the middle part of the image. The top attribute makes the image clip over the parent's box. Please take a look at my code.
HTML:
<body>
<header class="header">
<div class="header-inner">
</div>
</header>
</body>
CSS:
.header {
position: relative;
width: 100%;
height: 20%;
background-color: grey;
}
.header-inner {
position: absolute;
background-image: url(../images/img.jpg);
width: 100%;
height: 100%;
}
If you want to display the middle part of the image you could use background-position on .header-inner. You can specify a custom percentage or simply center it.
background-position: center;
If you set position: absolute then block will be over the others. So just set z-index: -1; to .header-inner
I'm trying to create my first web page. But I have a problem, I searched a lot about it but I still cannot solve it. So, the problem is, that my div (which is something like a background for the left side of the page, it has no content, only coloured background) is not stretching to the bottom of the page, it just stretches to the bottom of the screen, so when I scroll down the div is missing from there.
It looks like this (http://postimg.org/image/aiiabtue1/)
HTML:
<body>
<div class="left_strip"></div>
</body>
CSS:
.left_strip {
position: absolute;
left: 50%;
width: 203px;
height: 100%;
top: 158px;
background: rgb(251, 236, 236);
margin-left: -500px;
}
Use position: relative on the body tag and bottom: 0 instead of height: 100% on the .left_strip.
With just position: relative on the body tag the element will be 100% height, but because of the 158px distance from the top the bottom will be 158px below the content.
bottom: 0 will fix the bottom of the element to the bottom of the closest "positioned" (relative, absolute, fixed) parent element.
body {
position: relative;
}
.left_strip {
position:absolute;
width:203px;
top: 158px;
bottom: 0;
background-color: blue;
}
.content {
height: 2000px;
background-color: red;
margin-left: 250px;
}
<div class="content"></div>
<div class="left_strip">Test content</div>
Instead of using % try using the exact pixel value of the body tag.
What also might help is using a % value that is higher than 100, this also seems to work in testing.
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>