I have an img and div i can't find why there is a gap. I have seen so question. But it is not working for me i have also tried using margin:0. here is my My fiddle. But i cant find why this gap is here. Thanks
<img src="http://www.kidsmathgamesonline.com/images/pictures/shapes/rectangle.jpg" class="header"/>
<div class="body-middle">
</div>
css is:-
.header
{
width:100%;
height:auto;
padding:0px;
margin:0px;
}
.body-middle
{
height:50px;
width:100%;
margin:0 auto;
background:url('http://www.clipartsfree.net/vector/large/simple_green_rectangle_Vector_Clipart.png') 0 0 repeat;
background-size:contain;
background-position:center top;
}
Give display:block to the image.
.header{
display:block;
}
Updated fiddle here.
.body-middle {
margin-top: -50px; //adjust number of pixels to what works best for you
}
Try This CSS..
*{
margin:0;
}
DEMO
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've made this code for navigation bar.
HTML :
<div class="header-nav">
<div class="header">
<img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
</div>
<div class="nav" align="center">
Home
Gallery
</div>
</div>
CSS :
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
}
a {
display:inline-block;
width:50%;
height:42px;
float:left;
}
but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?
Since you're using float rule vertical-align may not work in this case so You can provide margins to this like following:
a{
display:inline-block;
width:50%;
height:42px;
float:left;
margin: 10px 0; /* add this */
}
OR
If you want to use vertical-align then you need to adjust width accordingly
a{
display:inline-block;
width:20%; /* reduce width */
height:42px;
/*float:left; */ /* remove this */
margin: 10px 0; /* add this */
vertical-align:middle;/* add this */
}
Demo
Updated Demo
Do you mean to center "Home" in the block you've created?
Try in css with padding.
a{
display:inline-block;
width:50%;
height:42px;
float:left;
padding-top: 2px;
}
Play with that
Try vertical-align: middle;
More info. on vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Remove float and use vertical-align:
a{
display:inline-block;
width:50%;
height:42px;
vertical-align: middle;
}
Do it like this:
1) Keep your HTML as is.
2) Change your CSS as follows:
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
vertical-align:50%;
display:flex;
align-items:center
}
a {
width:50%;
float:left;
}
See fiddle here
You can try giving padding for the <a> tag
CSS:
a{
padding:10px 0;
display:inline-block;
width:50%;
height:42px;
float:left;
}
See the fiddle:
http://jsfiddle.net/xpfsyds2/
Add the following to your 'a' style:
line-height: 42px;
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I am making my own website, but for some reason I can't move the black box into the middle of the screen please could you guys help me out. I have to make it on JSFiddle because I don't have enough RP to show screenshots on here.
Please see this link to view my code:
http://jsfiddle.net/xiiJaMiiE/LfWBn/4/
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:0%;
background:black;
z-index:1;
width:80%;
}
Thanks in advance!
If the width is always 80% then just offset the left half of the restant width:
left:10%;
Check this Demo http://jsfiddle.net/LfWBn/7/
Hope it will work:
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:7%;
left:10%;
background:black;
z-index:1;
width:80%;
}
You have the margin on auto, try it out: margin: 20px;
On this site, you'll see that the footer is stuck on the left. This is the CSS:
#footer {
width: 800px;
clear:both;
float:right;
position:relative;
left:-50%;}
Please let me know why this might be.
Thanks,
Tara
You should keep it simple and use:
#footer {
width: 800px;
clear: both;
margin: 0 auto; /* center it */
}
This is exactly the same technique as you've already used successfully on .container, for instance.
#footer {
position:absolute;
bottom:0px;
width:100%;
}
Example demo : http://jsbin.com/ecolun/3
To center the footer:
#footer {
width:800px;
position:absolute;
padding-left:50%;
margin-left:-400px;
bottom:0px;
}