I'm trying to float two 'navigation' elements on either side of some content. These elements should stay in place (and visible) as a user scrolls down a page.
Example: (see less than and greater than signs): http://jsfiddle.net/dbough/tASs2/
I've tried to 'fix' both elements in place with position:fixed, but it causes the elements to collapse together
Example: http://jsfiddle.net/dbough/tASs2/1/
Looking for direction on how to make this work.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="nav">
<span id="nav_left"> <</span>
<span id="nav_right"> ></span>
</div>
<div id="content">
SOME CONTENT
</div>
</div>
</body>
</html>
CSS (without fixed positioning)
#container{
width:100%;
height:100%;
margin:auto;
padding:auto;
max-width: 400px;
}
#content{
margin:auto;
padding:auto;
}
#nav_left, #nav_right{
max-width: 10px;
font-size: 200%;
}
#nav_left {
margin-left:-10%;
}
#nav_right {
float:right;
margin-right:-10%;
}
Give position:absolute to arrow classes and relative to the parent div #container
#nav_left {
left:0; position:absolute
}
#nav_right {
right:0; position:absolute
}
DEMO
For Fixed Arrows
Use a relative div inside the fixed div and align the child div by position:absolute
HTML
<div id="nav">
<div id="wrap">
<div id="nav_left">< </div> <div id="nav_right"> ></div>
</div>
</div>
CSS
#nav{position:fixed;
width:100%;
height:40px;
}
#wrap{
position:relative;
width:100%;
height:40px;
}
#nav_left {
left:15%;
position:absolute
}
#nav_right {
right:15%;
position:absolute
}
DEMO 2
Or in simple method give direct position:fixed to the child divs and remove the outer divs
HTML
<div id="nav_left">< </div> <div id="nav_right"> ></div>
CSS
#nav_left {
left:15%;
position:fixed
}
#nav_right {
right:15%;
position:fixed
}
DEMO 3
When using position: fixed you should be using the top/bottom/right/left attributes too and not use float or margins. See the W3C CSS spec about position.
See http://jsfiddle.net/pqbkN/
I this case you should change your arrow spans to:
#nav_left {
/*margin-left:-10%;*/
left: 2em;
top: 1em;
}
#nav_right {
/*float:right;*/
right: 4em;
top: 1em;
/*margin-right:-10%;*/
}
Use for fixed version at #nav-right not margin-right:10% but right:10%.
Related
I'm trying the achieve the following setup for a page, where there is a left and right div and a 'floating' image in the center above the two divs:
I've tried giving the img1 a z-index and a position: relative (or position: absolute for that matter) but that didn't help achieve my goal. Any takes on how to float an image above these two divs, centered?
I'm using the following pieces of code currently:
CSS http://pastebin.com/4uLHwkXt
HTML http://pastebin.com/t6yCTR0r
Assign position: relative; to DIV1 and the following settings to .IMG1. .IMG1 has to be inside DIV1 (i.e. be a child of DIV1) for this to work.
.IMG1 {
position:absolute;
right: 0;
top: 30px; /* adjust as needed */
transform: translateX(+50%);
}
addition: You hadn't posted your code before, so I just described the basic necessary settings with the element names from your graphic description, but that should be clear enogh.
Try this code: You can adjust the div widths and margins according to your requirement. This code also adjust according to the desktop screen.
Thanks
CSS:
.floatedDiv{
float:left;
width:50%;
background:grey;
height:50px;
}
.imgDiv {
width: 20px;
height: 20px;
position: absolute;
background: green;
left: 50%;
margin-left: -10px; /*half of the length of the div*/
top:15px;
}
.red{
background:red;
}
HTML:
<body style='margin:0px;'>
<div class='floatedDiv red'></div>
<div class='floatedDiv'></div>
<div class='imgDiv'></div>
</body>
In my case I position:absolute the image and add position:relative to the parent div.
HTML (with bootstrap)
.col-6{ height:500px; }
img{
margin-left:33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative;">
<div class="col-6 bg-success"></div>
<div class="col-6 bg-warning"></div>
<img src="https://picsum.photos/200/150?grayscale" style="position:absolute;">
</div>
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
I want that my image(near-logo.png) be in header-content div, which is in header div. Image at the moment is in the left side, but it has to be in the left side of header-content div.
header div is 100% width, header-content div is 946px width.
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="header">
<div class="header_content">
<img src="img/near-logo.png"/>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header-content {
width:946px;
position:absolute;
margin:0 auto;
}
I see two problems:
First thing, you have a mistake in your CSS, your class in your div is <div class="header_content">but in your CSS it's .header-content.
Second thing, delete the position: absolute attribute if you want your header content centered.
The image is aligned to the left of the div header_content. The problem is the div class name in your html is header_content and the name you have used is header-content in your css.
The other thing is you have used position:absolute for header_content, so that the margin:0 auto won't get applied, so remove the absolute position. Use the below code
.header_content {
width:946px;
position:absolute; // Remove this line
margin:0 auto;
}
add
.header_content {
position:absolute;
left: 0; top: 0;
}
I positioned divs relative and stacked them one below the other with fixed height. Next i am moving a div 20px up like top:-20px. the problem is for all the following divs i have to do top:-20, otherwise there is a gap of 20px. Is there a work around for this.
I have added a fiddle. http://jsfiddle.net/xS3Kt/
html
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
css
div{
hieght:50px;
position:relative;
width:100%;
}
.class1{background:#bbb;}
.class2{top:-5px;background:#999;}
.class3{background:#777;}
.class4{background:#555;}
here you can see there is a gap between 3rd div and fourth div. to correct it i have to position all the following divs. is there a work around
I think this jsfiddle answers the question. You need to add a wrapper that groups the divs you want to shift upward.
Html:
<div class="wrapper">
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
</div>
<div>hello</div>
Css:
div {
border: .1em solid rgb(0,0,0);
height:50px;
position:relative;
width:100%;
}
.wrapper {
height : auto;
margin-bottom: -5px;
top:-5px;
}
.class1 {
background:#bbb;
}
.class2 {
background:#999;
}
.class3 {
background:#777;
}
.class4 {
background:#555;
}
I would like to use height:50%, but the container's height is not defined, what's the correct solution?
<div id="container">
<div id="left-50">
<div id="left-50-1">1</div>
<div id="left-50-2">2</div>
</div>
<div id="image">
<img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg">
</div>
</div>
#container {
overflow:hidden;
}
#left-50 {
float:left;
}
#left-50-1 {
height:50%;
width:50px;
background:yellow;
}
#left-50-2 {
height:50%;
width:50px;
background:purple;
}
#image {
float:left;
}
Jsfiddle url: http://jsfiddle.net/XqMDF/
the correct solution is to define container height.
or refer to the body or other defined element.
make container display:inline-block; to adjust to image height ... or define a fixed height.
DEMO: http://jsfiddle.net/XqMDF/2/
Point is: add position: relative; to #container, and position: absolute; to elements with height: 50%;. Also, apply display: block; to image. Then add left margin on #image. Value of that margin is width of elements with height: 50%; (50px in your example).
Here is demo with all properties.
http://jsfiddle.net/XqMDF/1/