Is there a way to position an element relative to another element whithout the posibility of editing the html to make one element parent? This is my div order in html which i can't edit. I want "element3" to be positioned relative to "element1", to feet at the half height over "element1". I want my adsense block to be position relative to author position in that empty space on this site: http://www.musicep.com/2013/08/sunlounger-feat-alexandra-badoi-ill-be.html I've tried something like this:
#element1 {
width: 300px;
height: 200px;
background: yellow;
position: relative;
}
#element2 {
width: 300px;
height: 100px; }
#element3 {
width: 300px;
height: 100px;
background: red;
position: absolute;
top:-200px; }
U can use property "float" this way:
#element1 {
width: 300px;
height: 200px;
background: yellow;
float: left;
}
#element2 {
background: blue;
width: 300px;
height: 100px;
float: left;
}
#element3 {
width: 300px;
height: 100px;
background: red;
float: left;
}
If you really need it to actually become a child element, and cannot edit the html, you can move things around with jQuery:
$('#element1').append($('#element3'));
Though keep in mind that moving elements with javascript should usually be a last resort.
Related
According to this statement:
When position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)
I put a fixed element inside a relative element, and set its 'left' property to some value.This value should relative to its parent div. But it doesn't work as expected. see my codepen: https://codepen.io/iamnotstone/pen/PgdPrJ?&editable=true
The text should inside the red box.
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test {
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
According to the doc: Fixed positioning
Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
Instead of left you can use margin-left property:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
margin-left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
If you use position: fixed; you are defining the position of an element in the viewport. If you use position: absolute; then you are defining the position of an element in its parent's box. Also CSS prioritises code lower down, so for example in your code h1 is the most prioritised element (does not apply for classes and ID's, Classes take priority over elements and ID's take priority over classes).
You need to use position: fixed for the document's body and use position: absolute for the elements with the parent which has position: relative, so change h1's position to absolute :
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: absolute; //
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
It's very strange. When I set a transform property inside its parent, everything just works as expected!
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
finally , I found the answer.
There is also a statement here:
If the position property is fixed, the containing block is established
by the viewport (in the case of continuous media) or the page area (in
the case of paged media).
If the position property is absolute or
fixed, the containing block may also be formed by the edge of the
padding box of the nearest ancestor element that has the following:
A transform or perspective value other than none
A will-change value of transform or perspective
A filter value other than none or a will-change value of filter (only works on Firefox).
A contain value of paint (e.g. contain: paint;)
I don't know how to explain this, but maybe in this case picture tells story instead of me:
Shortly if you cannot see it. I'm trying to place logo inside multiple areas (header, body, content) like a global image.
Is that possible with CSS, JavaScript, HTML, PHP?
And if it is, any guides or tips?
You can place your logo inside of the nav (in this case) section. The logo must be absolutely positioned, so that it doesn't mess up with other element's alignment, and your nav section must be relatively positioned, so the logo gets placed in relation to the nav container (even if it's absolute!).
You didn't provide any HTML/dimensions, so we're pretty much left to guess, but here's how it would look, picking arbitrary dimensions.
.nav {
position: relative;
height: 100px;
}
/* .logo is a child of .nav */
.logo {
position: absolute;
top: -50px;
height: 200px;
width: 200px;
left: 0;
}
Take a look:
body {
color: #fff;
text-align: center;
}
.header {
height: 100px;
background: red;
}
.nav {
position: relative;
height: 70px;
background: blue;
}
.logo {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: -50px;
}
.body {
height: 250px;
background: purple;
}
.footer {
height: 100px;
background: lightblue;
}
<div class="header"> Header </div>
<div class="nav">
<img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>
Nav
</div>
<div class="body"> Body </div>
<div class="footer"> My Feet </div>
Alternatively, you may also place your logo outside of everything but inside of the body tag, and just use position: absolute, and tweak it's position (top, left, etc..), according to the dimensions of the relevant elements.
You can put your logo in header and position with :
.your-logo-class {
position: relative;
top: 100px; // Adjust this value
}
You could do it like this:
body { margin: 0; padding: 0; background-color: black;}
#top { background-color: red; width: 100%; height: 100px; }
#nav { background-color: blue; width: 100%; height: 50px; }
#content { background-color: green; width: 400px; height: 500px; margin: 0 auto;}
#footer { background-color: purple; width: 100%; height: 50px; }
<body>
<div id="top">
</div>
<div id="nav">
<img src="images/logo.png" style="padding: 10px;">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
Or you could add position: absolute; to the img style="" and then play around with the margin/padding.
Hmm, a logo is basically an <img> tag, you can place them where ever you like, just give all those <img> tags a class and style it the way you want.
What's happening is that with this code:
HTML
<div class="one">
<div class="will-overflow">
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
.one {
height: 100%;
background: red;
}
.one .will-overflow {
width: 20%;
height: 2000px;
background: blue;
}
I get a result like this:
Demo
http://jsfiddle.net/kM46e/
Question
Is there anyway to expand the div.one height to fit the div.will-overflow. This is just an example, the content of that div is dynamic.
html, body {
width: 100%;
height: 100%;
}
.one {
min-height: 100%;
background: red;
}
.one .will-overflow {
width: 20%;
height: 1000px;
background: blue;
}
By changing .one's height into min-height, you make it stretchy. However, now height: 100% of .will-overflow doesn't work, since without anything to stretch it, .one will have height of 0; so I change the height to 1000px to simulate some arbitrary-length content. Change it to a small value like 10px to check that it will still allow .one to fill the entire viewport.
Height correct is 100%.
.one .will-overflow {
width: 20%;
height: 120%;
background: blue;
}
http://jsfiddle.net/kM46e/1/
trying to create a new layout but have run into an issue.
Currently, i have a fixed sidebar to the left and then the content floated right.
The side bar has a width of 18%, and then the other content 82% width.
This works fine, but it looks ugly and is unstable at larger screen sizes.
I wish to however to make a change, and make the sidebar a fixed width. This poses a problem then on the other content which i want to take up the rest of the room.
How can i have the content to the right, to still take up the rest of the room whilst keeping a fixed sidebar?
Hope this makes some sort of sense!
Here is a js fiddle of the problem i face:
http://jsfiddle.net/Uyv6w/
And what i current do:
http://jsfiddle.net/Uyv6w/1/
Layout is like so:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
I guess I'm not exactly sure what you're looking for - but I tried with this FIDDLE.
I floated the major divs left, then just gave a min-width and max-width to the container.
Could you provide some more details?
CSS
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
min-width: 600px;
max-width: 1200px;
}
#sidebar {
float: left;
height: 100%;
width: 100px;
background-color: #9b59b6;
}
#content {
float: left;
width: 82%;
background-color: red;
overflow: hidden;}
#inner {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: gray;
height: 1000px;
padding: 10px;
}
img {
display: block;
width: 300px;
margin: 20px auto;
}
I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.