Check out this web page: http://dev.driz.co.uk/attachment.htmldead link
As you will see you get a sidebar fixed and a div that is positioned absolute and allows a user to scroll around a giant image. All works great, expect that if you scroll to the right you will see that the image is touching the edge of the screen and does not have the 40px padding like the rest of the content? Any ideas why?
Thanks
Float this div left
div#attachment div.padding {
float: left;
padding: 40px;
}
This would also work:
<div class="padding" style="position: inherit;">
<img src="http://dummyimage.com/1440x900/00aeff/fff">
</div>
Related
Trying to help a friend of mine with a Squarespace website and attempting to add an image in the header code.
I've tried aligning centrally but it doesn't seem to work. Only padding and margin pixels have any effect but then it's not consistent when using different sized monitors.
Any help is greatly appreciated!
Current code below:
<a href="https://wwwmisscurrentcom.squarespace.com/about-1/"><img class=
"thumb-image loaded" data-image-dimensions="960x41" data-image-resolution=
"1500w" data-src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
id="yui_3_17_2_1_1407515470914_1223" src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
style="top: 114px; position: relative;margin-left: 150px;"></a>
After re-reading your question a few times, I think I know what you are asking. You can centre your image with margin: 0 auto;. The auto left and right margin will keep the block element (in this case, a div) dead centre horizontally across all resolutions and screen sizes.
Have a jsBin example!
HTML
<div class="header">
<img src="http://www.placehold.it/200x100" alt="logo" />
</div>
CSS
.header {
width: 200px;
margin: 0 auto;
/*
shorthand margin =
top (0)
right (auto)
bottom (0 - inherited from top)
left (auto - inherited from right);
*/
}
If you want it properly centered you will have to access the custom css and use media queries. The problem with standard pixels and percentages in SquareSpace is that you may get it centered on your monitor but it will not always center on other hardware/devices.
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
Im trying to have a blueprint layout wich is 950px so I do something like the image below:
Like regular the 950px container ( right box ) is floating center page
Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.
How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.
anyone knows how to make this happen and have the divs stay on page even when screen resizes?
if i understood your question this will do what you want:
body, html
{
width: 100%;
}
<div style="margin: 0 auto; width: 1100px">
<div style="width: 150px; float:left;">
menu
</div>
<div style="width: 950px; float:left;">
right part
</div>
</div>
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)