I have this:
I want to achieve this:
I have a big outer div (with red background) and a smaller-inner div (with green background). The small div has a border, I want the border to appear as transparent to show the behind background. Is this achievable with HTML/CSS?
You can achieve the transparent border showing background image using a pseudo element.
The red background is the border of the pseudo element and the transparent border is created by the gap between the element's background and the pseudo element's border:
DEMO :
body{
background:url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');
background-size:cover;
}
.big{
margin:50px;
padding:50px;
min-height:500px;
overflow:hidden;
}
.big p{
position:relative;
z-index:1;
}
.small{
position:relative;
background:teal;
width:150px;height:150px;
margin:25px;
z-index:0;
}
.small:before{
content:'';
position:absolute;
top:-5025px; left:-5025px;
width:200px; height:200px;
border:5000px solid rgba(255,255,255,0.8);
background:none;
}
<div class="big">
<p>content here</p>
<div class="small"></div>
<p>content here</p>
</div>
output:
You can also use box-shadow instead of border so you don't have to use negative values for the top/left positioning of the pseudo element. Browser support isn't as good as border though :
body{
background:url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');
background-size:cover;
}
.big{
margin:50px;
padding:50px;
min-height:500px;
overflow:hidden;
}
.big p{
position:relative;
z-index:1;
}
.small{
position:relative;
background:teal;
width:150px;height:150px;
margin:25px;
z-index:0;
}
.small:before{
content:'';
position:absolute;
top:-25px; left:-25px;
width:200px; height:200px;
box-shadow: 0px 0px 0px 5000px rgba(255,255,255,0.8);
background:none;
}
<div class="big">
<p>content here</p>
<div class="small"></div>
<p>content here</p>
</div>
You can fake it with a fixed background image:
http://codepen.io/pageaffairs/pen/LENMgZ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {background: url(http://pageaffairs.com/sp/bg.jpg);}
.cont {background: rgba(256,0,0,0.4); width: 400px; height: 400px; margin: 40px; padding: 40px;}
.box {width: 100px; height: 100px; padding: 10px; background: url(http://pageaffairs.com/sp/bg.jpg) fixed;}
.box-inner {width: 100px; height: 100px; background: green;}
</style>
</head>
<body>
<div class="cont">
<p>This is content inside the big div.</p>
<div class="box">
<div class="box-inner"></div>
</div>
<p>More content inside the big div.</p>
</div>
</body>
</html>
Related
In IE8, I am trying to display 4 child div's side by side withing a parent div. I would like the parent div to overflow and scroll horizontally and for the child div's to be next to each other horizontally as well. Thanks
HTML:
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
and CSS:
#a{
position:relative;
height:130px;
width:800px;
background:purple;
overflow:auto;
}
.b{
position:relative;
display:inline-block;
height:100px;
width:400px;
background:red;
border:1px solid #000000;
float:left;
}
Here are my suggestions:
Use classes for repeated elements. ids are unique, but classes can be used multiple times.
Use inline-block instead of float, not in addition.
Set white-space:nowrap on the container to prevent the children
from wrapping.
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
#a{
height:130px;
width:800px;
background:purple;
overflow:auto;
white-space:nowrap;
}
.b{
height:100px;
width:400px;
background:red;
border:1px solid #000000;
display:inline-block;
}
http://jsfiddle.net/X2Rjn/2/
http://cssdesk.com/exMH4 (for those who cannot see jsfiddle)
Here's a floated variant:
<div class="a">
<div class="wrapper">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
.a{
height: 130px;
width: 800px;
overflow: scroll;
background: purple;
}
.wrapper{
width: 1608px;
}
.b{
height: 100px;
width: 400px;
background: red;
border: 1px solid #000000;
float: left;
}
http://jsfiddle.net/BYLFn/3/
I am trying to add a title which will show much like a banner for that dive with text in. like the below image.
The problem is I need to set the title text in css.
I have a single div with the content in thats it. I cannot change the HTML code to add things.
Any ideas?
You could do that with before pseudo-element, something like this :
.your_div:before {
content: "Your DIV title";
display: block;
color: #000;
background: #CCC;
text-align: center;
}
But it won't be compatible with old browsers.
div div{
background-color:brown;
border:1px solid white;
text-align:center;
}
.title{
height:40px;
padding-bottom:30px;
background-color:whitesmoke !important;
text-align:center;
}
.main{
border-radius:10px;
border:2px solid red;
box-shadow:0px 1px 5px 2px black;
height:content-width;
}
<!Doctype html>
<html>
<body>
<div class="main">
<div class="title">
<h2>my title</h2>
</div>
<div><p>first div</p>
</div>
<div><p>second div</p>
</div>
</div>
</body>
</html>
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
I am finding it bit confusing working around this problem.
I have parent DIV and 3/more Child DIV.
Parent DIV is center aligned and child DIV should be floating left but should be aligned center.
CSS contains,
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
I have a sample of the code link here...
If you want to horizontally align your elements centrally, then don't float them.
Change the way they are displayed to inline-block and align them in the center by changing the text-align style of their parent:
#parent {
text-align:center;
height:450px;
width:75%;
border:1px solid blue;
}
.center {
display:inline-block;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
<div id="parent">
<div id="child1" class="center"></div><!--
--><div id="child2" class="center"></div><!--
--><div id="child3" class="center"></div>
</div>
Be sure to have no white-space or newlines between your children <div>s (in your HTML, that is) or comment it out. Now that these are inline elements, this white-space will be interpreted as a space.
#parent{
display: flex;
justify-content:center;
flex-direction:row; /*default value is row*/
height:350px;
width:75%;
border:1px solid blue;
padding: 10px 0;/* not mandatory */
}
.center {
height:250px;
width:15%;
margin:5px;
border: 1px solid black;
}
<div id="parent">
<div id="child1" class="center">
</div>
<div id="child2" class="center">
</div>
<div id="child3" class="center">
</div>
</div>
Flex helps us achieve certain things with ease.
Automatic margins will not apply to an element which has a float applied. Removing the float should get you started...
Center horizontally & vertically
Use top for vertically center and calc is calculating dynamically top value.
the top will work with position - relative.
Using text-align:center in parent & display:inline-block in child for Horizontally center.
.parent {
height:400px;
width:400px;
position:absolute;
border:1px solid black;
text-align:center;
}
.child {
position:relative;
height:70px;
width:70px;
border:1px solid red;
top:calc(50% - 70px/2);
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</body>
</html>
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.
Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.
Try this:
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
#page_container { width:743px; margin:0 auto; }
#header { height:87px; border:1px solid #000; }
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
#nav { height:29px; border:1px solid #000;}
#left_column { width:230px; float:left; border:1px solid #000;}
#right_column { width:490px; float:left; border:1px solid #000;}
#page { min-height:100%; position:relative; }
#main_content { padding-bottom:133px; }
.clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
HTML (note - you must put #footer inside #page for this method to work):
<div id="page">
<div id="page_container">
<div id="header">hhhh</div>
<div id="nav">nav</div>
<div id="main_content">
<div id="left_column">lll</div>
<div id="right_column">rrr</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer_container">fffff</div>
</div>
</div>
You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm
Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.