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>
Related
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>
I'm trying to align some text next to twitter's button, and have them all line up with borders. Unfortunately, the text div shrinks and floats to the upper left with its borders. The button seems fine because bootstrap properly aligns everything. But both the text and button divs suffer from padding (or margin) issues in that the borders won't line up to form a rectangle (with a border line in between the text and button div also).
This is what I'm aiming for:
The grey 1px borders are supposed to be equal all around, but I had trouble with my touchpad.
This is what I have so far:
<div class="mydiv">
<div class="row">
<div class="col-md-12">
<div class="col-sm-6">
<div class="textdiv">
Text!
</div>
</div>
<div class="col-sm-6">
<div class="btndiv">
<a class="btn" href="#">Button!</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.textdiv {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
margin: 0 auto;
}
.btndiv {
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.mydiv {
width:30%;
}
HTML
<div class="mydiv">
<div class="row">
<div class="col-md-12">
<div class="col-sm-6">
<div class="textdiv">Text!</div>
</div>
<div class="col-sm-6">
<div class="btndiv"> <a class="btn" href="#"> Button!</a>
</div>
</div>
</div>
</div>
</div>
CSS
.row {
width:250px;
margin:0px auto;
border:1px solid black;
height:75px;
background-color:#f2f2f2;
}
col-sm-6 {
width:200px;
margin:0px auto;
text-align:center;
}
div.textdiv {
border:1px solid #9a9a9a;
background-color:Aqua;
padding:5px;
color:black;
font: bold 16px arila;
width:100px;
float:left;
text-align:center;
margin-left:10px;
margin-top:25px;
margin-right:3px;
}
div.col-sm-6 a {
border:1px solid #9a9a9a;
margin:0px auto;
background-color:Aqua;
color:black;
text-decoration:none;
font: bold 16px arila;
width:100px;
padding:5px;
margin-left:3px;
margin-right:10px;
margin-top:25px;
float:right;
text-align:center;
}
Working Fiddle
Output:
I've just made some updates in the way things get their padding. Please take a looke at the followingo fiddle:
http://jsfiddle.net/WNPRA/1/
I created a new class to handle some problemns and updated the css to be more neat.
div.no-padding {
padding: 0;
}
div.textdiv {
padding: 7px 12px 7px 12px ;
text-align: center;
}
Please, do not consider the col-xs-6 classes I added. They are just to make things work on fiddle.
Here is one idea for you:
http://jsfiddle.net/panchroma/y79gm/
The html is almost exactly the same as yours except I wraped your textdiv block in .btndiv class ( to provide the border), added the class of btn to .textdiv so that it inherits the same bootstrap styling as the btn link, and I added
.textdiv{
cursor:default;
}
to force the cursor to stay as the default arrow when over the text block.
Good luck!
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.