I have this sample code
h2.pos_left {
position: relative;
top: 50%;
}
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
I am trying to make relative work with top %. Is there a way to make this work?
Other option is to force absolute to go with the flow.
My idea is to have few div that will take some % of the page, so they are responsive when window is smaller. If it's absolute and I make the window smaller that effect that doesn't go with the flow is irritating, since elements go on top of each other.
Any idea would be extremely useful.Perhaps some out of box idea
and to make your divs responsive use this
h2.pos_left {
position: relative;
top: 50%;
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
height: 300px;
}
html, body {
height: 100%;
}
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
You need to set your <html> and <body> tag 100% height:
h2.pos_left {
position: relative;
top: 50%;
}
html, body {
height: 100%;
}
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
Related
I am trying to add a fixed division to the left of the webpage that will keep the navbar information and on the right I am trying to add another division. It is currently not allowing me to put them side by side (the one I wanted to add to the right is overlapping with fixed). How can I align them side by side?
Here is my CSS:
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #041230;
z-index: 100;
min-width: 170px;
}
.right_side {
position: relative;
width: 100%;
height: 100vh;
}
since you set a width:16% for the fixed element you should set the rest 84% width:84% to the right element.
Next set a max-width to the right element since the left element has a min-width I have set this to max-width: calc(100% - 170px)
Align the right element to the right by adding float: right.
I have made the left element translucent so you can see that there is no overlap.
Read and run the snippet below to understand it in detail.
P.S : I have made the left element translucent so you can see that there is no overlap.
Hope it helps
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #0412303f;
z-index: 100;
min-width: 170px;
}
.right_side {
width: 84%;
background-color: green;
height: 100vh;
float: right;
max-width: calc(100% - 170px);
}
body {
margin: 0px;
}
<div class="left_fixed">
<h1>LEFT SIDE</h1>
</div>
<div class="right_side">
<h1>RIGHT SIDE</h1>
</div>
The reason that your styling fails is that the "Position: Relative" will not be relative to the "Position: fixed".
In order to accomplish the effect you are looking for I'd suggest you to use float:left on both elements instead.
You can wrap the two divs inside a parent div, and then add display flex to the parent div. This will make the two divs next to each other, and then you can add custom width to .left_fixed.
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
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.
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 get a image to fill up the viewport and auto resize when the browser gets resized, which is working, the only problem is that for some reason I can't get the image to NOT extend outside of the #wrapper element, even though it has overflow set to hidden, I am assuming it is because I am using percentages instead of a fixed width and height?
Now when I put overflow: hidden; on the body element it works, but then when you select text anywhere on the page and drag down, it scrolls down to the bottom of the image, which is problematic as I have a footer menu that is absolutely positioned to the bottom of the screen, which then moves up with the image as it is dragged down, and ruins the whole effect.
So basically I just want to have a auto resizing background, that doesn't overflow the viewport and cause scrollbars, and that allows your positioned content to stay where it is and not scroll up when you drag down on selected text.
HTML:
<html>
<head>
<title>project</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<img src="image.jpg" width="1400" height="1200" />
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
width: 100%;
height: 100%;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I know this is an old post, but for the benefit of others, since position:fixed isn't the most compatible way either, changing your #wrapper element to have position:relative; solves the problem.
Thanks,
Scott
Ok, got it working, I changed this
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
to this
#wrapper img {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
so as you can see, all I changed was the position property, from absolute to fixed, and that did the trick. :)
Use CSS backgrounds instead of html img elements. You can use background-size to resize the image.