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.
Related
Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
Apologies if this is a simple solution, but my brain doesnt seem to be working today and I just can't seem to get this to work properly.
Issue: I'm trying a new design with a 2000px header that allows for a landscape feel across the larger monitors.
However when I view the design on a smaller monitor the entire header div is moved off centre, and therefore some menus aren't available to be seen.
The content div is obviously staying at the centre of the monitor, however I cant seem to find a solution to make sure it's aligned with the centre of the header div.
I've attached an image to help explain the situation.
Just Try,
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
CSS
#container{
width:1920px; //any other value.
margin:0 auto;
}
I would assume your css for the image is placing it top left just move that to top middle[or is it center] and you should be ok.
so background: url(...) no-repeat top center
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
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>
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481