The image is going off to the right of the div, I am trying to align it to the left.
here you can see there is not background on the image
.title {
width: 500px;
height: 300px;
position: absolute;
display: block;
float: left;
padding: 0px;
margin-left: 0px;
background: transparent url(https://lorempixel.com/200/200) no-repeat top left;
}
<div class="title"></div>
Here it shows the sizing of the div, this is aligned to the left yet the image itself which has no excess background, it is just the text in the image
There may be unnecessary properties in CSS, this is just to show what i have tried
I took an image from google just for the test and its aligned to the left.
Maybe the issue in other selector.
By removing position:absolute; image will positioned on top.
.title {
width: 500px;
height: 300px;
/*position: absolute;*/
top: 300px;
display: block;
float: left;
padding: 0px;
margin-left: 0px;
background: transparent url(https://lorempixel.com/200/200) no-repeat top left;
}
<div class="title"></div>
Related
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
I have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}
I'm trying to position an image inside its container. Because the container has overflow:hidden, it is hiding half of the image — I would like to add bottom: 50%, so it shows the center of the image.
At the moment, if I do so, you see a gap between the image and its parent. Would anyone know how to position this, so you get to see the center of the image?
http://jsfiddle.net/tmyie/RGfdh/1/
<div class="img-ctnr-med">
<a href="#">
<img src="http://placehold.it/200x200" alt=""/>
</a>
</div>
img {
background-color:grey;
display: block;
position: absolute;
}
.img-ctnr-med {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}
It should be bottom: -50% instead, so it shifts the image 50% of the height of the container down towards the bottom edge of the container rather than up away from it.
When specifying values for top, right, bottom and left, positive values shift an element away from the respective side and negative values shift an element towards the respective side.
I think the best way to do this is to include the image as background image. It is cleaner then moving around elements. See this Fiddle as example.
html:
<div class="img-ctnr-med">
link text
</div>
css:
img {
background-color:grey;
display: block;
position: absolute;
bottom: 30px;
}
.img-ctnr-med a {
width: 100px;
height: 100px;
color: transparent;
text-indent: -9999px;
display: block;
border: 1px solid blue;
position: relative;
overflow: hidden;
background-image: ;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
Modify
img {
background-color:grey;
display: block;
position: absolute;
}
To
img {
background-color:grey;
display: block;
position: absolute;
left: -50%;
top:-50%;
}
I'm attempting to make a header with the div's centered with a logo in the middle. With the Logo div hanging over, which I've successfully done. I can not however figure out how to place the logo div in the middle of the link divs for the life of me.
Any help would be appreciated, google searching hasn't gotten me any luck, but I'm not sure I know what to search for. I'm not good at making things look pretty normally :(
Page Layout:
Header (overlay)
Content (z-index: -1)
Image of site without a float declared on .headerLogo
Image of site with float: left declared on .headerLogo
html:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
css:
*{
margin: 0;
}
body,html{
background-color: #000;
color: #FFF;
text-align: center;
font-family: calibri;
height: 100%;
overflow:auto;
}
.header{
top:0;
height: 100px;
line-height: 100px;
width: 100%;
display: inline-block;
border-bottom: lime 10px solid;
margin:0;
position: static;
background-color: #000;
font-size: 24px;
}
.headerLink{
display: inline-block;
float: center;
margin-left: 60px;
margin-right: 60px;
margin-top: 0px;
margin-bottom: 0px;
}
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: auto;
margin-right: auto;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
}
.content{
z-index: -1;
float: left;
text-align: center;
min-height: 100%;
width: 100%;
margin-top: -110px;
margin-bottom: -50px;
background-color: #333343;
}
You've got a couple ways to go about this. I think the easiest way is to use a fake placeholder to make the horizontal space between menu items in the middle, then have the logo be absolutely positioned on top.
HTML:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink headerLogoFake'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
CSS:
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
position:absolute;
top:0;
left:50%;
margin-left:-100px;
}
.headerLogoFake {
width:200px;
}
As you probably know, if you just leave it as you have, without the float, it'll be in the middle, but it'll push the green bottom border down. This will place a fake empty thing in the middle, but at the same height as the menu items, so won't push it down. It'll add the logo in on top.
Working Fiddle
.headerLogo{
position:absolute;
display: inline;
float: left;
left 50%
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: -50px;
margin-right: auto;
background-color: lime;
color: lime;
width: 100px;
height: 100px;
line-height: 100px;
}
Your mark-up provided did not produce the result you were looking for, so I applied the bare minimal styling to accomplish what you are asking for.
Most importantly float:center; does not exist.
If you give elements a property of display:inline-block;, then you can use text-align:center; around the container to center all of the elements.
.header {
text-align:center;
}
.headerLink {
display:inline-block;
padding:10px;
}
.headerLogo {
display:inline-block;
height:100px; width:100px;
background:red;
margin:0px 10px;
}
Then, to line them up with your logo, vertically, give them a vertical-align:top property and set the margin to near half the width of the logo
http://jsfiddle.net/5V29a/1/ - UPDATED DEMO
I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}