a. image (960x7)
b. div (width:960, padding:10)
I want to position (a) so that it's 50px from the top, centered.
I want to position (b) so that it's directly beneath (a) with no space.
My CSS follows:
#charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
My HTML follows:
<body>
<div class="pagetop" />
<div class="page">
<p>Warning sign, warning sign...I see it but I...pay it no mind.</p>
</div>
I'm trying to create a white container with rounded edges on a grey background. How can I do this simply and intelligently?
Check out this question for the rounded edges:
CSS Rounded corners
And for the positioning of the objects, I would go with something like this:
topimage {
position: absolute;
top: 50px;
text-algin: center;
}
To put the elements without a margin between them, you want the top image to have a zero bottom margin:
margin: 50px auto 0;
(Notice that you have to specify a unit (for example px) for any non-zero measurement.)
The background image will not give the top element it's size, you have to specify the width and height to match the size of the image. If the height is less than a regular character, you need to use something to keep Internet Explorer from expanding the element to the height of one character line, for example by using overflow: hidden; to keep the content from affecting the size of the element:
width: 960px; height: 10px; overflow: hidden;
The padding is added to the size of the element, so you have to make the page element 20 pixels narrower:
padding: 10px; width: 940px;
If your rounded corner image is 30px high, set .pagetop height to 30px, add 50px of padding to the top and set the top of the background image to 50px.
.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
Related
I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
Consider the following site.
I am trying to position a div that is approx 300px wide by about 400px high next to the picture of the woman. I have tried to display the div as inline but to no avail. I tried to float left but once again no luck. Any thoughts?
You can position it next to the image, by using the following CSS:
.emailForm {
width: 260px; /* anything above 260px will fall over to the next line */
/*float: right;*/ /* remove float */
display: inline-block; /* inline-block since you want specific width and height */
height: 434px;
border: 1px solid black;
}
NOTE: Pretty sure you are using it, but in case you aren't, do use Firebug or Chrome dev tools for making such tasks a breeze.
Try this,
<div id="wrap">
<div id="nextTo"></div>
<img id="woman" src="#" width="600px" height="400px" />
</div>
CSS
#wrap {width: 1000px; margin: 0 auto;}
#nextTo {float: right; max-height: 400px;}
This will ensure that your image is fixed width. If you have a wrapper div that is 1000px wide for example, the #nextTo div will be the remainder of what the image takes up (in my example 400px).
Adding the max-height attribute to the #nextTo div ensures that the div will not fall below the image, but not sure if this is what you are after.
I'm trying to build a webpage with 3 columns. The one in the middle (centered) needs to have fixed width (1000px) and the other 2 with no specific width. When the user resizes the window only the left one and the right one should be resized. Is this possible?
Regards
Yes this is possible
You should create one maindiv in your css and set the background to repeat in your body like shown below and give it a background color/gradient/whatever you like. I usually use a 1px width gradient picture.
Setting the same background color and image in your div as in your body will help you keep an even background depending on your design (i.e. You have a design that has a margin at the bottom of 20px to create a clear space, then the background will follow through instead of showing white)
STYLESHEET.CSS
body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}
#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}
Now in your HTML after the body tag you start with your MainDiv and before the body end tag you close the MainDiv
INDEX.HTML
<body>
<div id="MainDiv">
Your HTML here
</div>
</body>
Now when you resize your browser, it resizes the background and your middle column stays centered
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.
I have a footer div with 100% width. It's about 50px high, depending on its content.
Is it possible to give that #footer a background image that kind of overflows this div?
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
overflow:visible doesn't do the job!
There is a very easy trick. Set padding of that div to a positive number and margin to negative
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
You can use a css3 psuedo element (:before and/or :after) as shown in this article
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
No, you can't.
But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial div.
Don't forget to add content to that new element. Here's some example:
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::after instead.
Using background-size cover worked for me.
#footer {
background-color: #eee;
background-image: url(images/bodybgbottomleft.png);
background-repeat: no-repeat;
background-size: cover;
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
<div class="home-hero">
<div class="home-hero__img"></div>
</div>
.home-hero__img{
position:relative;
top:-10px;
transform: scale(1.1);
background: {
size: contain;
image: url('image.svg');
}
}
You mention already having a background image on body.
You could set that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.