The title isn't very descriptive, but basically I want to create something like this with HTML and CSS:
I can do the horizontal line by wrapping the first row of boxes in a div and setting the background image for that to the line, but I'm not sure how I can group the column of boxes and add a vertical line behind them.
Any help is appreciated!
Here you go DEMO
<div id="container">
<div id ="horizontal">
<div id="border2"></div>
</div>
<div id="vertical">
<div id="border"></div>
</div>
</div>
#container {background: black;
width: 300px;
height: 300px;
margin: 0 auto;
position:relative
}
#vertical {background: white;
position: absolute;
width: 70px;
left: 40% ;
height: 300px;
top:0;
}
#horizontal {background: white;
position: absolute;
height: 60px;
top:40%;
left:0;
width: 100%;
}
#border {
width: 100%;
height: 150px;
margin-top: 60px;
border-top: 2px dashed black;
border-bottom: 2px dashed black;
}
#border2 {
width: 80%;
height: 60px;
border-right: 2px dashed black;
}
Related
I am gonna to copy paste all the code, so you can check everything and understand what it's the problem. Thank you.
I just wanted to make it appear under the previously div. Just like it shoud be, because this problems not only appears with this div, but with everything else.
.presentazione
{
position: relative;
top: 100px;
width:auto;
height:auto;
text-align: center;
font-size:30px;
border: 2px solid red;
}
.sottofondo
{
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio
{
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona
{
position: relative;
width: auto;
height: auto;
border:1px solid pink;
}
.preview
{
position: relative;
width: auto;
height: auto;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your problem if I understood correctly is that you have on your presentazione element the top property which this makes the element to move 100px from the top of the page without pushing the other elements.
If you want it to have a 100px distance from top better use margin-top: 100px.
I removed the top property from that class and it seems to be correct. Check it out below:
.presentazione {
position: relative;
width: auto;
height: auto;
margin-top: 100px; /* changed from top to margin-top */
text-align: center;
font-size: 30px;
border: 2px solid red;
}
.sottofondo {
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio {
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona {
position: relative;
width: auto;
height: auto;
border: 1px solid pink;
}
.preview {
position: relative;
width: 200px;
height: 200px;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your .presentazione div's position is set to relative and its top:100px, so other elements are behaving like its still in its original position, therefore you see that overlap, you can try margin-top:100px instead of top:100px and it will work.
more info on relative positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}
Consider following:
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
It will set the bottom border of full width of the box (500px).
But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..
You can Use ::after or ::before pseudo-selectors.
Like:
<div> something here </div>
CSS:
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
Here is the jsfiddle
Can you throw an <hr> at the bottom of your box?
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
http://jsfiddle.net/MuAKF/
.box {
padding-bottom: 10px;
background-image: linear-gradient(#ccc,#ccc);
background-size: 50% 2px;
background-position: bottom left;
background-repeat: no-repeat;
}
You could use a background-image:
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
You could do this:
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
}
<div class="box">
<div class="border">
</div>
</div>
But there are infinite possibilities. Some are more semantically correct than others; this solution is simply a quick fix.
I would suggest doing something like this, works well in Firefox
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
css:
display: block;
margin: 0 auto;
width: 50%;
padding-top: 20px;
border-bottom: 1px solid #000;