I have an image with position:absolute;right-300px; inside a container with position:relative; as I want the image to come out of the div and off to the right.
You can see it working here. It's the first large image on the right.
The problem I have, is this is breaking the overall page layout and causing a vacant white space to the right of my page that can be side scrolled to.
If I put overflow:hidden; on the container div it will hide the rest of the image and I need the image to come out and be entirely visible.
Anyone have any suggestions for a way around this?
I tried writing up an example but I putting the whole page up seemed better
http://ciaranhanrahan.com/test/
Cheers!
I want the image to come out of the div and off to the right
Studying your page layout, it appears the image doesn't need to be in the <div> at all.
You could give the <img /> a position:absolute;.
Then, you can include the <img /> markup anywhere in your HTML source.
For instance, it's a 495kB image (ie. quite heavy) so you can include the absolutely positioned <img /> at the very end of your HTML source, which means for first-time visitors to your page, the page will appear to load more quickly.
You won't need to nest the absolutely positioned <img /> inside a parent element - which means you won't need to mess around with negative positioning, CSS inheritance, hiding overflow and so on.
Related
I currently have a iframe video and sitting on top of this are 4 clickable images. Below this, I want to have a contact Me page, however, the problem I am facing is How to get my Contact Me div blow the iframe video. Can someone Help me sort this problem out? Currently, on my codepen, you will see that i have applied a linear gradriend which is where the video is to be placed, and even though I have a Contact Me div in place, it is not placed in the top left hand corner, behind the iframe video, and I want it to be below the div, totally separated from it.
You can see my code on my Codepen, here
and this is what i currently have :
.
As you can see from the screen shot, this is the front page, but the "contact me" div is placed behind the video, in the top corner... can someone help me fix this issue?
You have too many elements with absolute positioning. You don't need all of that.
To position an element absolutely relative to its parent element all you have to do is add position: relative to the parent and position: absolute to the child.
And because you're positioning everything absolutely, elements are losing their height and it's why your contact div is moving to the top because the flow of the page is broken, and therefore, your contact div doesn't really see elements above it. Plus, you have color: white on the body and that applies to everything on your page including the contact div. change it and you'll find your contact on top of your header.
If you need more info I'm happy to help.
Your contact header is there. It is in the top left corner, but it is white (at least that is what I see on the code link)Give the <h1> a style color to help make it stand out, <h1 style="color:blue;"> etc. Also move the div to above the image in your code. That should also help.
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
How would I go about having a href image fixed at the top left of a page without stuffing up any content in the current webpage and act pretty much exactly the same regardless of browser and DTD.
The problem I have is I need to supply a block of code to various websites that puts the said image in the same place so someone can easily click through.
I assume I am going to have contain everything within a DIV.
<div style="position: absolute;left:0px;top:0px;">
<a href="some.link.com">
<img src="someimage.jpg" alt="someimage">
</a>
</div>
Or is that as good as it gets?
If you want to make it fixed, i suppose you should use "position:fixed" property.. no?
And maybe z-index will be useful for you too (to place div on the highest layer, then other content).
As i understand, you would like to provide some HTML to some users that will add it to their own websites (or to add it by yourself, like ADS). If i am right, you should also think about other css properties, that are not defined in your div, but that can be defined on different websites (i mean margins, paddings, etc) in css, and will be automatically applied to your div.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.