Somehow I can't figure out what I'm missing...
I try to position a number of absolute divs between two fixed bars (header and footer). Header contains some tabs and footer contains an copyright. I want to use the window's scrollbar and not an overflowed div and I know it should be possible!
Every absolute positioned div should carry an extra margin, so that the bottom of that div does not disappear behind the footer.
It should become something like this:
A snippet of my problem is available here on jsfiddle.
My HTML:
<ul class="cf tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
<div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>
<div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>
<div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright ©</div>
The stylesheet I'm using:
ul.tabs {
list-style-type: none;
list-style-position: outside;
padding:5px;
margin: 0;
position:fixed;
top:0;
z-index: 999;
background-color: white;
left:0;
right:0;
border-bottom: 1px solid green;
opacity: 0.7;
}
ul.tabs li {
float: left;
margin:1px;
padding: 4px 10px 2px 10px;
border: 1px solid black;
}
div.footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
background-color:#DEDEE9;
border-top: 3px outset #BBBBBB;
padding: 5px;
opacity: 0.6;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
Do you guys have any hints?
Extra info
As you can see in the attached image the purple border of squared div at bottom right is overlapping the fixed footer. I do not want this. There should be given a bottom margin somewhere, so that every div carries an extra margin so it should match the top of the footer
Here's the solution I've come up with. Wrap the bottommost absolutely positioned div inside with another div, on which put bottom margin equal to footer height and the border. I gave it class .inner.
See my fiddle.
Add bottom padding to the document body equivalent to the height of the footer:
body {
padding-bottom: 31px;
}
(JSFiddle doesn't seem to let you modify styling of the body element, so I can't post a fiddle. It should work, though.)
Instead of using absolute positioning, do something like:
margin - left : 800px
Margin - top: 500px
Related
I need a vertical line on the middle of the page, here above i've got horizontal. What i really want is a vertical line with same style of this horizontal line.
hr.style-six {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
How could that be done?
EDIT:
the below codes work but i cannot add anything until the vertical line ends, from the point it ends i can add stuffs but not before that.
I'm trying to add things on the right and left side of the vertical line.
How could i fix it?
This is example with fixed vertical line, always presented, on the middle of page. None other element will move it up or down.
.vline
{
position:fixed;
top:0;
left:50%;
bottom:0; margin:0;
border:none;
border-right:solid 1px black;
z-index:10;
}
<hr class="vline" />
Update : There is example, based on Your edit. If that's what You need. Two divs floated left and right, with some padding and vertical divider line (hr)
body, html {margin:0;padding:0;}
.dleft, .dright
{
display:inline;
width:calc(50% - 20px); /*50% width minus 2xpadding = 20px*/
padding:10px;
}
.dleft
{
float:left;
background-color:yellow;
}
.dright
{
float:right;
background-color:lightblue;
}
.vline
{
position:fixed;
top:0; bottom:0;
left:50%;
border:none;
border-right:solid 1px black;
z-index:10;
margin:0;
}
<hr class="vline" />
<div class="dleft">
aslkjfklasdjfsadlkf
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
</div>
<div class="dright">
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
</div>
<div style="clear:both;"></div>
Here's a fast example I've made. This is one way of achieving this.
<div class="verticalLine"></div>
.verticalLine {
background-color: #000;
height: 100vh;
margin: 0 auto;
width: 1px;
}
Example 1
Another way is using absolute position like this:
.verticalLine {
background-color: #000;
height: 100%;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 2
And third way without the height property
.verticalLine {
background-color: #000;
bottom: 0;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 3
Since elements in HTML are rendered from top to bottom, there's no way of adding a vertical line as easily as using a <hr>. One way would be to split up the page in two <div>s and adding a border to one of the two <div>s like this:
.left-col {
width: 50%;
min-height: 200px;
border-right: 1px solid black;
float: left;
box-sizing: border-box;
}
.right-col {
width: 50%;
min-height: 200px;
float: right;
}
<div class='page'>
<div class='left-col'>
Content in the left column
</div>
<div class='right-col'>
Content in the right column
</div>
</div>
You could also use display: inline-block instead of float: right, but it will have some issues with spaces taking up a part of the 100% width (so you can't use 50% + 50% divs without using hacks). CSS-Tricks has some information on inline-block.
Depending on if you need content to the right of the vertical line, you may of course skip the .right-col entirely.
box-sizing: border-box makes the 1px border count as a part of the width, so that we can have 50% + 50% = 100%.
I have html code:
<div id="right">right</div>
<table>
<tr><td>row</td></tr>
</table>
with css:
#right
{
position: absolute;
right: 0px;
border: 2px solid #AAAAAA;
padding: 20px;
}
and as a result both table and div start at the top of the page but I want table to start below the div. What can I do about it?
jsFiddle: http://jsfiddle.net/jrkno49u/
You are using absolute positioning so it took the div out of the flow. Hence for table the div doesn't exist.
To achieve what you want : You can set position:relative; for div & move the box accordingly to the right by setting it's left property in css.
You could also do a float instead of absolute positioning, and then clear the float for the table:
#right
{
float:right;
border: 2px solid #ddd;
padding: 20px;
}
table {
clear: right;
}
http://jsfiddle.net/jrkno49u/2/
You need to do nothing more. Just remove position: absolute; right: 0px; from #right
#right
{
border: 2px solid #AAAAAA;
padding: 20px;
}
<div id="right">right</div>
<table>
<tr><td>row</td></tr>
</table>
Check Your updated fiddle.
There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
I'm trying to get this effect with CSS (that little grey side stripe thingy):
However, nothing of what I'm doing is working. My code looks like this:
<header class="entry-header">
<div class="entry-title">
<h1>Contact</h1>
</div>
<div class="entry-float"></div>
</header><!-- .entry-header -->
I've tried floating div.entry-title left and padding div.entry-float, changed div.entry-float to <span>, tried using backgrounds on one div only, all of it unsuccessfully.
This must be 100% flexible, as not all headings are the same width. I'd prefer avoiding Javascript/jQuery entirely.
Can anybody assist?
I would do this with a trick where you place the "line" as a CSS3 pseudo element aligned to the center of the container. Then give the title element a background color with padding and place it over the top of the line. This will allow for variable length titles.
body{
background:#FAFAFA;
}
.entry-title{
position:relative;
margin:0 110px;
}
.entry-title:before{
position:absolute;
content:"";
top:50%;
background:#f7f7f7; /* line color */
left:0;
right:0;
height:10px;
margin:-5px 0 0; /* = half the height value */
}
h1{
position: relative;
color: #d9d9d9;
padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
background:#fafafa; /* same as background color of container element */
display:inline-block;
}
JSFIDDLE DEMO
There are various ways to achieve this, one of them is to add pseudo element to header, absolutely position it as desired and hide extra with overflow: hidden:
<h1>Content</h1>
h1 {
text-transform: uppercase;
font-size: 1em;
color: grey;
position: relative;
overflow: hidden;
}
h1:after {
content: "";
display: inline-block;
height: 4px;
width: 100%;
background: grey;
position: absolute;
top: 8px;
margin-left: 10px;
}
JSBin.
I have following code
div {
width: 200px;
border-bottom: 1px solid magenta;
height: 50px;
}
<div></div>
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
You can use pseudoelements. E.g.
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
No need to use extra markup for presentational purpose. :after is also supported from IE8.
edit:
if you need a right-aligned border, just change left: 0 with right: 0
if you need a center-aligned border just simply set left: 50px;
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
I added line under under h3 tag like this
<h3 class="home_title">Your title here</h3>
.home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left : 0;
bottom : 0;
max-width:250px;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}
You can use a linear gradient:
div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}
<div></div>
You cannot have a different sized border than the div itself.
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
http://jsfiddle.net/WuZat/3/
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so:
http://jsfiddle.net/oeaL9fsm/
div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right : 0;
bottom : 25%;
height : 50%;
width : 1px;
border-right:1px solid magenta;
}
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
HTML code:
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
This will help:
http://www.w3schools.com/tags/att_hr_width.asp
<hr width="50%">
This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}
div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
HTML code:
<div> <span>content here </span></div>
CSS as below:
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:
My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
Border right length smaller than parent div
with pseudo-elements
#import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
}
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}
div:before {
content : "";
position: absolute;
right : 0;
top : 25%;
height : 50px;
width : 50%;
border-right:5px solid #726E97;
}
<div>BOX 1</div>