I cant seem to get this to work.
http://www.keironlowe.host56.com
What I need is the banner with the low opacity image on it to be centered no matter the resolution, Ive tried a wrapper but because the wrapper is a width of 800 it cuts of the image, i've tried margin:0 auto; and i've even tried using the tag but it still doesnt center in higher resolutions.
You shouldn't need the tags in #Logan's example. That tag is deprecated anyway. Setting a width (not auto) and setting margin-left and margin-right to 'auto' in your stylesheet should handle the centering just fine.
Try taking the centering and pic out of the CSS and into the HTML. the css would look like this:
#banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}
and your HTML would look like this:
<div id="banner">
<center>
<img src=".....">
</center>
</div>
That is what I would do.
First, get rid of that <center> tag you have around the <div id="banner"></div>. You don't need it and it's deprecated.
Then, swap out your current CSS of the following block:
#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}
For this:
#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}
Swapped out the many background attributes for the shorthand. Since you're showing the image as a background, added in the background-position property of center. This will now bullseye your image into the centre.
Related
I'm sure this is super simple, but I'm new to css. I'm essentially trying to position some rendered typography and make it stay centred no matter what the size of the browser is. I've tried using margins with percents, but that doesn't seem to work.
Here's my code.
html
<div class="weare">
<img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
<img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
<img src="image/textrenders/awebbasedstudio.png" />
</div>
css
.weare {}
.shaftesburytv {}
.awebbasedstudio {}
I want the result to look something like this
Any help would be appreciated.
Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto; to it to center. Finally put display:block on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Sample here.
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}
Sample of this approach here.
Since you're using images, you could
margin: 0 auto;
to them. For text, you could
text-align:center;
With divs, you could also center align them (in HTML).
You could also use center tags: http://jsfiddle.net/A33J2/
It can be verry simple.
If you do not split your image and gather all text of it into one.
html
<img id="my-whole-image" src="http://placekitten.com/300/250" />
css
#my-whole-image {
margin-left:-150px;
margin-top:-125px;
left:50%;
position:absolute;
top:50%;
display:block;
}
jsFiddled here
Just a tip, ence you're saying you are new to css, i presume you are new to html too : always use the minimum required to build your webpages. Those 3 images had to be merged into one for many reasons like server request, bandwidth, browser redraw, dom elements number.
Not sure if the title is the real issue, but my horizontally scrolled list of images is not playing nice. I want all the images to bunch up (effectively float) next to one another (which I've managed to achieve using display:inline thus far). But I want them to all be 100% height of the window/body, and it isn't playing nice.
Here's my HTML:
<body>
<div id="content">
<ul id="content-images">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
</div>
</body>
And the CSS:
html, body{
margin:0px;
border:0px;
padding:0px;
height:100%;
}
#content{
height:100%;
background-color:green;
}
#content-images{
height:100%;
white-space: nowrap;
}
#content-images li{
font-size:0;
display:inline;
height:100%;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
The problem is a small gap of about 2/3px that runs along the bottom of the li items. It is hard to tell if it is part of the body or part of the list items, but either way it is an annoying anomaly.
I'm viewing in Chrome. I've attached a screenshot. Note the bottom white line. To be clear, I'm happy for the images to run off the page on the x-axis, and for the client to scroll horizontally through the images, but I don't want any gaps on the vertical, between the images and the edge of the window.
Update:
I'm unable to replicate the issue in jsFiddle because the fiddle seems to have difficulty with styling the html, body and relatively-sized images. I haven't got the time or pateince to figure out why.
I've decided to go for a hack. A mixture of vertical-align:bottom on the img and an overflow-y:hidden on the html and body. This will make any whitespace after the list items redundant, as the viewable area will be restricted.
You can prevent this using vertical-align: bottom on your image tag, like so:
img {
vertical-align: bottom;
}
Hope this helped.
You're getting thing problem because of display: inline [Reason here]. Alqin is right, float:left will solve the problem, but you also have to remove display:inline. If you want horizontal slider, you can increase width of ul to sum of widths of images and use overflow-x:hidden or overflow-x:auto on its parent div.
PS: Its not a good idea to use height:100% on all elements. It will make your page look weird when the content overflows.
I changed the CSS to following, and also removed properties that I thought were unnecessary:
html, body{
margin:0px;
height:100%;
}
#content{
height:100%; /* a bad idea */
background-color:green; /* add this to body if you want whole body green */
overflow-x: auto;
}
#content-images{
height:100%; /* again, a bad idea*/
width: 3000px; /* sum of widths of images I used to test */
}
#content-images li{
font-size:0;
float: left;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
Have you tried removing the margin from the unordered list element?
#content-images{
height:100%;
white-space: nowrap;
margin: 0;
}
Use float left instead of inline:
#content-images li{
float:left;
}
That space is because inline elements have a space after them. Add an margin-bottom:-4px to images. Also give the images display:block. Play will all this, you should be able to fix your problem.
I have a image in a div having id container but it is messing the things up. It is not centering plus the box-shadow is not shown on image. I added margin:auto but It did not helped me. I think margin:auto centers all fixed-width elements but in my case, you know image is resized by CSS. Any other solution ? Maybe absolute positioning work but the container height will get zero. I don't want to use Javascript/jQuery.
I have this bin for ya!
Use margin:auto but also add display:block:
#container > img {
max-width:100%;
max-height:550px;
height:auto;
display: block;
margin:auto;
}
UPDATE:
If you don't want the image to overrun your shadow, do this:
#container > img {
max-width:100%;
max-height:542px;
height:auto;
display:block;
margin:4px auto 4px;
}
try margin-left:auto margin-right:auto
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched.
Instead of using max-width, max-height.
How do I do this?
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Here's the basic idea:
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Use the flex box solution
Here is the html,
<div><img /></div>
Add styles
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
simple way to do this....
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}