I need two divs to look a bit like this:
| |
---| LOGO |------------------------
| |_______________| LINKS |
| CONTENT |
What's the neatest/most elegant way of making them overlap neatly? The logo will have a fixed height and width and will be touching the top edge of the page.
Just use negative margins, in the second div say:
<div style="margin-top: -25px;">
And make sure to set the z-index property to get the layering you want.
I might approach it like so (CSS and HTML):
html,
body {
margin: 0px;
}
#logo {
position: absolute; /* Reposition logo from the natural layout */
left: 75px;
top: 0px;
width: 300px;
height: 200px;
z-index: 2;
}
#content {
margin-top: 100px; /* Provide buffer for logo */
}
#links {
height: 75px;
margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}
<div id="logo">
<img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
<div id="links">dssdfsdfsdfsdf</div>
</div>
With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such:
div#logo {
position: absolute;
left: 100px; // or whatever
}
Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.
Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div.
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:
#logo {
float: left;
margin: 0 10px 10px 20px;
}
#content {
margin: 10px 0 0 10px;
}
or whatever margin you want.
Related
I am not able to position an image within a div so that:
it's higher than the div and sticks out
starts at the very bottom of the div (there is a small gap that I can't close)
This is the relevant HTML:
<div class="teaser-image-wrapper">
<div class="wrap">
<img class="image2 more-height" src="images/svg/creativeyou.svg" alt="Creative You! Title Image">
</div>
</div>
And the CSS I have:
.teaser-image-wrapper {
background-color: #83ffcd;
width: 100% !important;
margin:
}
.wrap {
width: 80%;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: contain;
max-height: 75vh;
max-width: 100%;
line-height: 0;
}
Here is an image for reference: The greenish background of the wrapper (.teaser-image-wrapper) should be lower than the image (svg) that should stick out on the top. Also, notice the little gap at the bottom.
Thank you for any hints
The easiest way to achieve something like this could be to use position absolute and relative. Maybe try setting the class wrap to relative and the image absolute, with
left:0;
right:0;
bottom:0;
and then play around with the position of 'top', can then set a height of the wrap class to try and achieve the desired effect. May be better ways to do this but without playing about with it this is what is off the top of my head. hope this helps
OK, after some tinkering solved it.
I wanted to achieve this:
This is the CSS. I basically push the wrapper - div down while pulling the image inside up.
.teaser-image-wrapper {
max-width: 80%;
margin: 40vh 10% 0;
padding: 0;
line-height: 0;
}
.wrap {
width: 100%;
background-color: #83ffcd;
height: 50vh;
margin-top: 25vh;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: cover;
height: 75vh;
width: 100%;
line-height: 0;
position: relative;
margin-top: -25vh;
}
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
I have a website which is 960px wide and want to put a picture outside of that on the right side.
Vimeo have done it on there homepage: http://vimeo.com
you can see a drawing of an origami bird that sticks outside the website width
without causing the screen to get horizontal scrollbars
How do they do this?!
origami bird Floating outside of Vimeos layout
New answer:
After some further inquiry, it seems that a critical aspect was that the box/image would not cause horizontal scroll-bars, while the content would. This was an interesting trick applied by vimeo, and was quite sneaky.
It has to do with a combination of min-width on body, and overflow-x: hidden on a non-immediate parent of the box/image. When combined with position: absolute, and a negative right, this achieves the desired result.
HTML:
<div id="wrap">
<div id="width_wrap">
<div class="crane"></div>
</div>
</div>
CSS:
body
{
min-width: 960px;
}
#wrap
{
overflow-x: hidden;
}
#width_wrap {
position: relative;
width: 960px;
height: 400px;
}
.crane
{
position: absolute;
width: 200px;
height: 200px;
right: -40px;
}
Here is a minimal Fiddle, with outlines such that you can see what's going on: http://jsfiddle.net/rUj8s/2/
Original answer:
The position: absolute answers will most likely work, but will also take the image/div out of the normal flow of the document. This might not be what you want.
What you probably want is a negative margin-right:
.your_picture {
margin-right: -30px;
}
Or, perhaps position: relative, and a negative right
.your_picture {
position: relative;
right: -30px;
}
Or, lastly, position: relative, and a positive left
.your_picture {
position: relative;
left: 30px;
}
This is why negative margins and relative positioning exist. To move things relative to where they would normally lie.
.your_picture {
position:absolute;
/* this needs to be negative to have the image sticking outside of the width */
right:-30px;
}
#parentDiv{
position: relative;
}
#your_picture {
position:absolute;
right:-30px; /*change it to a number that you like */
top: 30px; /*change it to a number that you like */
}
html markup would go like:
<div id="parentDiv">
<div id="your_picture"></div>
</div>
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".