I am trying to get a banner image to sit over a white box with text in it. I want the banner image to float over and hang off each edge, not be constrained to the size of the box div.
I have tried making the banner an image and positioning it absolutely, but that did't provide a good result. The page is designed to be responsive, and while the other elements shrunk in side accordingly, the image remained large.
Attached is an image of what I am trying to achieve with the banner. Everything is coded, it's just the banner that I cannot get right.
Any help is greatly appreciated!
Thank you, Nick
You can:
Apply a position:relative to the banner and the whitebox
Move the top of the banner downwards (using a positive px value)...
(Optionally) move the top of the whitebox upwards (using a negative px value)
See example:
.whitebox, .banner {
position: relative;
margin: 0 auto;
}
.banner {
width: 360px;
height: 45px;
border: 1px solid rgba(191,191,191,1);
}
.whitebox {
width: 300px;
height: 200px;
border: 1px solid rgba(127,127,127,1);
}
.banner {
top: 80px;
}
<div class="banner">
</div>
<div class="whitebox">
</div>
Related
I'm trying to make the below image.
The blue box is a div, the red square is a centrally-aligned image. The image overlaps the border of the div, but lies under the text in the div.
How would I go about this?
Explanation
Overlap
z-index is nice if you need div in different layer.
A div with smaller z-index will stay at back, so you can label border.
(Although I think it is not necessary in this case)
Center Align
To Align image in the center, add auto margin to image.
Image Position
If you want 30% of image to be inside the border, move top of the image by -70% of the height. So if the height of image is 100px, set top: -70px;
Text Position
Because the original image cover the space above the text, you will have to move text up to cover the blank space. To do this, move top of the text by the height of the image. So in this case, set top: -100px; After moving up the text, the space appear in the bottom of the devision. So to shrink the border, you will need to set margin-bottom: -100px; This will shrink the div to remove the blank taken by
Whole Div Position
Because you moved the image 70px above the whole div, you will need to set margin-top: 70px; to move the whole div down to prevent it being cropped out.
.border-div{
border: 3px solid blue;
margin-top: 70px;
z-index: -1;
}
.redsquare{
height: 100px;
width: 100px;
background-color: red;
z-index: 0;
margin: 0 auto;
position: relative;
top: -50px;
}
.text{
position: relative;
top: -100px;
z-index: 1;
margin-bottom: -100px;
}
<div class="border-div">
<div class="redsquare"></div>
<div class="text">Lorem ipsum has become the industry standard for design mockups and prototypes. By adding a little bit of Latin to a mockup, you’re able to show clients a more complete version of your design without actually having to invest time and effort drafting copy.
But despite all its benefits, seeing the same random Latin text in every design can get a little boring for you and your clients. So if you have a client who’s got a sense of humour or if you’re just tired of going the traditional route in your mockups, here are 15 creative and funny lorem ipsum text generators that are sure to lighten the mood at any client meeting.
</div>
My best suggestion is using position absolute in the children and use position relative in its border then set position to the children. Some thing like: https://jsfiddle.net/c39xej68/4/
.redsqr {
background-color: red;
height: 50px;
width: 50px;
position: absolute;
top: -30px;
margin: auto;
}
.bounder {
position: relative;
}
.text {
border: 1px solid blue;
}
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
I have seen the layout similar to the image below used on some sites before and I really like the design but don't exactly know how to implement the overlapping image (Profile Image). I am using bootstrap if that helps. Any ideas?
Thanks!
I can see three ways to do this generally.
position: absolute
You could give the image or the image's wrapper the attribute of position:absolute and giving its container (in your example the green box) position:relative. Then you would apply top: -100px or whatever and a left attribute of left: 100px or whatever. This gives the effect of the image being out of flow, aligned to the left and offset by 100px, and 100px offset from the top of the green container. The disadvantage of this approach would be that any body content in your green container could appear under the image.
position: relative
This is the same approach as the first one with the exception of how the image flows in the document. Instead of giving the image position:absolute, you would give it position:relative. Relative works differently from absolute. instead of being x and y coordinates of the parent container, it's just shifted by however much you give as a value for top and left. So in this case, you would apply top:-100px and just leave the other directional values as default. this would shift your element by that amount but also leave its original spot in the document flow. As such you end up with a gap below the image that other content will flow around.
negative margin
I honestly would prefer this method in your case. In this method, you can give the image a negative margin (e.g. margin-top:-100px). This will offset the image, collapse the area below the image, and it will still retain some of its flow in the document. This means that the content of the green container will flow around the image but only around the part that is still inside the container. It won't have a ghost area that content flows around like with relative positioning, but it also doesn't entirely take the image out of flow like absolute positioning. One thing to keep in mind, however, is that if you try to use overflow of any kind other than the initial value, it will cause undesirable effects to your image.
Demo
Here's a quick little demo demonstrating all three methods in a simple use case: http://jsfiddle.net/jmarikle/2w4wqfxs/1
The profile image can be set with position: absolute; top: 20px; left: 20px, or something like that to keep in from taking up space in the flow of the page.
make the html element that holds the header image "position:relative". Then put the header image and the profile image in that element. then make the profile image "position:absolute" and utilize "top: XXpx" depending on how far you want it from the top of the header element. Same for "left".
see fiddle here
<div class="header">
<img src="" alt="my image" class="floatdown">
this is my header, image could go here too
</div>
<div class="body">
this is my body content
</div>
.header {
position: relative;
width: 100%;
height: 150px;
border: 2px solid #000;
text-align: right;
}
.body {
position: relative;
width: 100%;
border: 2px solid #000;
height: 500px;
text-align: right;
}
img {
width: 90px;
height: 90px;
border: 2px solid #ddd;
}
.floatdown {
position: absolute;
top: 100px;
left: 20px;
}
You can use the float property on your profile image to take it out of the "flow" of the document, and play with the margins to place it properly.
CSS :
#profile-image{
width: 100px;
height: 100px;
float: left;
margin: 100px;
}
The marginis used to push it down and place it properly.
You can see an example of this in a Fiddle : http://jsfiddle.net/y706d77a/
I wouldn't recommand using position: absolute as you can get very strange results with different resolutions. I would only use that as a last resort.
This can be done many ways.
Anytime you see something like that on the web you can just use your inspector or firebug and see how they are doing it to get some ideas.
It wouldn't hurt to do some research on the web about CSS positioning.
http://www.w3schools.com/css/css_positioning.asp
Another great site.
http://css-tricks.com/
I just finished it.
Here is a codepen link:
http://codepen.io/anon/pen/zxYrxE
HTML:
<div class="main-container">
<div class="header">
<p>This is the header div</p>
</div>
<div class="profile">
<p>Profile</p>
</div>
<div class="content">
<p>Some dummy content div</p>
</div>
</div>
CSS is to big to be pasted here, so just open the link.
Put the profile image in the header, make the position: absolute; and the image position: relative;, and give it a negative bottom value that's half the height of the image, and set left to position it horizontally to taste.
HTML
<header>
<img class="profile">
</header>
<div>Content</div>
CSS
header, div{
min-height: 110px;
background: darkgray;
}
header{
position: relative;
background: gray;
}
img{
position: absolute;
bottom: -50px;
left: 100px;
}
http://jsfiddle.net/dekqn84c/
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
I'm trying to make a website with a header that repeats along the entire page width, with the website's name centered in the header, and a logo slightly offset from the website name. If the screen width is too small to display the entirety of the logo, I just want it to cut off the logo to the right, otherwise the entire logo will be displayed (i.e. the monitor/window is big enough. What I don't want is to float the image to the right. I want it to, more or less, be absolutely positioned near the title.
However, I can't figure out a way to do this. I can't use overflow-x or overflow-y (because of browser support) and the mark-up i currently have just widens the window with a scroll bar to accomodate the entire image (see screenshot).
Here is the screen shot
http://img691.imageshack.us/img691/3188/screenshot03062011.jpg
Here is the mark up and CSS:
<div id="header-wrap">
<div id="header">
<img src="title-card.png" />
<img id="this-chick-logo" src="this-chick-logo.png" />
</div>
</div>
--
body
{
background: #dfb1e4;
padding: 0px;
margin: 0px;
}
#header-wrap
{
background: url('header-bg.png') repeat-x;
width: 100%;
height: 291px;
}
#header
{
margin: 0 auto;
width: 1000px;
text-align: center;
}
#header img
{
margin-top: 105px;
}
#header img#this-chick-logo
{
margin-top: -75px;
margin-left: 680px;
overflow: hidden;
}
Thanks.
Add
overflow: hidden; to #header-wrap
Dont put it on the image.
overflow: hidden; either needs to be added to #header-wrap and possible removed from the img#this-check-logo. Also if the girl likes to push off to the right and some of it gets cut off in the overflow and you don't want that I'd move her a few pixels at a time back towards the left until you get it a way you like it. If you don't mind a little cut off just leave it and only add the overflow: hidden.