I have this code
#wrapper {position: relative;}
#content {padding-top: 100px;}
#search {position: absolute; /*position: sticky; position: -webkit-sticky;*/ top: 0; left: 40%; height: 100px; background: red; width: 20%;}
<div id="wrapper">
<div id="content">
content<br>content<br>content<br>content<br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content
</div>
<div id="sibebar">...</div>
<div id="footer">...</div>
<div id="search"></div>
</div>
I need to have #search element in the code after #content element, positioned absolutely to the top. After scrolling I need to fix search element at the top of the page.
Any ideas?
I've tried to add #search_wrap with absolute position and #search with sticky position, it didn't work.
Thanks.
grid (again) can rescue you to avoid but simulate position:absolute; and use position:sticky;
Set both element in the same grid cell.
#wrapper {
position: relative;
display: grid;
}
#content,
#search {
grid-row: 1;
grid-column: 1;
}
#content {
padding-top: 100px;
}
#search {
position: sticky;
top: 0;
margin: 0 auto;
height: 100px;
background: red;
width: 20%;
}
<div id="wrapper">
<div id="content">
content<br>content<br>content<br>content<br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content
</div>
<div id="sibebar">...</div>
<div id="footer">...</div>
<div id="search"></div>
</div>
Have you considered doing it all in javascript instead of css only? that will give you more control about what you are trying to achieve:
you can attach / detach css elements to make sure your custom behaviour is achieved
if you are trying to mix some positions then you should absolutely investigate the javascript path.
I have written an article that wraps the javascript implementation in a hook that you might find useful. I could rewrite everything but it's easier that you check it our here.
hope my answer serves as a guidance :)
Related
I want to make a fixed header so I follow the steps listed in W3School, but the content becomes shorter... I don't know how to say, please see the pictures.
This is the picture that I follow the code
.header {
overflow: hidden;
width: 100%;
height: 46px;
background-color: #2f4779;
position: fixed;
top: 0;
z-index: 100;
}
<div class="header">
<div class="logo">
123
</div>
<div class="nav">
<ul>
<li>Discover and Explore</li>
</ul>
</div>
</div>
And here is the picture that I didn't write the fixed header.
Without fixed header
My plan is to make everything inside the viewport. How can I solve the problem?
Generally what I do in this situation is to add padding to the top of the body so it works for every page, and also use a css variable to keep the sizing consistant.
:root {
--headerHeight: 46px;
}
header {
height: var(--headerHeight);
background-color: #2f4779;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
body {
padding-top: var(--headerHeight);
}
section {
height: 200vh;
}
<header></header>
<section>
<h1>Test</h1>
</section>
Well, when you give an element a fixed (or absolute) position, it is removed from the normal flow, so you need to add a padding top of 46px (eaqual to header's height) to the section that follows the header.
You'd probably benefit from using CSS Grids or CSS Flexbox. grid-template-columns is a great property and it makes your life a lot easier.
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
Do give them a read :)
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
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.
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
I want the "blue" container to always be 70px high, while the previous "green" div always max out the height available when the div is resized with javascript.
I've played around with it for a while without finding a proper solution. Help will be appreciated.
As promised, here's my answer.
absolute inside relative positioning is the easiest way to do this.
Live Demo
HTML:
<div id="parent">
<div id="left">height: 100%</div>
<div id="right">Content</div>
<div id="rightFooter">height: 70px</div>
</div>
CSS:
#parent {
position: relative;
height: 200px
}
#left, #right, #rightFooter {
position: absolute
}
#left {
width: 200px;
top: 0;
bottom: 0;
left: 0
}
#right {
top: 0;
right: 0;
bottom: 70px;
left: 200px;
overflow-y: auto
}
#rightFooter {
height: 70px;
right: 0;
bottom: 0;
left: 200px
}
Would something like this work?
Live Demo
Added an animation of the height so you can see the content extending.
Markup
<div id="parent">
<div class="left">
Lefty
</div>
<div class="right">
<div id="rightContent">
right Content
</div>
<div id="rightFooter">
Right Footer
</div>
</div>
<div class="clear"></div>
</div>
CSS
#parent{
height:300px;
}
.left{
float: left;
width: 33%;
background: red;
height:100%;
}
.right{
float : left;
width: 66%;
height:100%;
}
#rightContent{
height: 100%;
background: blue;
}
#rightFooter{
background: yellow;
height: 70px;
float: right;
width: 100%;
margin-top: -70px;
}
.clear{
clear:both;
}
Bah, before the comments come this is a partial solution, the text for the content area will bleed into the footer... looking at a solution for this, or someone else might be able to modify my markup/css to account for that.
Made an example for you here :)
you need to have a left floated div for the left content and a wrapper for the two other right divs, also floated left.
Take a look :)