I am trying to position text using div, but its not working well!
.background
{
background-image:url(bg.png);
width:600px;
height:500px;
margin-top:0px;
margin-left:0px;
}
.head1{
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
.background is the background image of the div whereas .head1 is a text within .background div.
You can see it in the html part!
<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>
The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it!
It seems quiet confusing so I took a screenshot! please check it out!
Maybe my css is poorly coded. please help me out.
Add overflow: auto to parent div.
.background {
background: red;
width:600px;
height:500px;
overflow: auto;
}
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
http://jsfiddle.net/L7q5g6yu/2/
Zero margins on .background can be removed, zero margin is default value for divs.
OR
you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.
<div class="background">
There are 3 CRUCIAL things that you need to remember...
</div>
<style>
.background {
background: green;
width:500px;
height:400px;
overflow: auto;
padding: 100px 0 0 100px;
color:#d45151;
font-style: italic;
}
</style>
http://jsfiddle.net/L7q5g6yu/3/
Use the following style
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}
Related
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
I have a div containing only an image with a height of 400px. The div has no padding but it's height is 406px causing an ugly grey 6px horizontal stripe below its img.
The reason for the grey background is that comparable divs may contain a caption beneath their img.
What causes the extra 6px and how can I get rid of it?
P.s. I'm aware the HTML markup is not semantic/HTML5 but I'd rather not change it.
The basic markup is
<body>
<div>
<div class='img w960'>
<img src='timg-960-480.png' alt=''>
</div>
</div>
</body>
The CSS for this example is
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
Set line-height: 0 on your div.img. This will affect the image caption h3 but you can correct that with an extra CSS line. The image is set inline and sits on the text baseline.
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
line-height: 0;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
I always solve this problem by setting the image's display property to block (display: block;).
I have a small image and i have to show some text beside that image. for that i have used the below html and css.
<div class="main">
<img alt="image"/>
<h2>this is heading text. This is heading text. This is heading text</h2>
</div>
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display:inline;
}
it is showing like this
The second line is wrapping below the image. I have to get the second line just below the first line not below the image.
I tried using float also. but not working. please help.
I created a fiddle so you can edit it easily: http://jsfiddle.net/codingsolver/MtqHh/1/
You could simply float the image, and push the h2 across with a left margin.
http://jsfiddle.net/MtqHh/8/
img { float: left; }
h2{ margin: 0 0 0 50px; }
hope it will help you
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display: flex;
}
img{
float:left;
margin-right:10px;
}
Working demo http://jsfiddle.net/MtqHh/13/
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
display: inline-flex;
}
.main img{
float: left;
width: 50px;
height: 50px;
}
h2{
float:left;
margin-left: 50px;
text-align: left;
display: inline-block;
padding;0px;
margin:0px;
}
use this code usefull for you. and see this link http://jsfiddle.net/bipin_kumar/MtqHh/10/
A good way of achieving this is shown on an updated fiddle:
http://jsfiddle.net/y5ewr/1/
The advantage is highlighted in the use of overflow:hidden on the <h2>. This means that if the <img> is not in place the heading will flow full width and no margins are needed on the heading element.
This is probably an easy question. I have header text that has a background color. The background color stops when the text stops. I want the background to fill the entire length of the container.
<body>
<div class="container">
<p><span style="color:#ffffff; font-size:30px; background-color:#e12025;">I want the background- color stretched across the container</span>
</div>
</body>
css:
body {
background-color:#e12025;
align:center;
font-family:sans-serif;
color:#000000;
font-size:28px;
}
.container {
background-color:#ffffff;
position:relative;
margin-left:auto;
margin-right:auto;
height:1785px;
width:900px;
border-style:none;
padding:10px;
}
Here's an example: http://mm2.co/background-color
If you want everything in the container to 'stretch' across the container, remove the padding in the container:
.container {
padding:10px; /* remove this */
}
If you still want to keep the top/bottom padding in the container, do this instead:
.container {
padding:10px 0px; /* add the 0px */
}
Also, you are going to want to make the display of the span paragraph - block.
Add/change to this:
<span style="display:block;">text here..</span>
um...
.container {
display: block;
}
?
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}