URL: http://vixenology.com/
At the standard zoom level the entire blog is aligned left and there is this huge no mans land to the right. How can I cut the size of the page down so the blog is centered at all zoom levels?
Ive tried some simple css and cant seem to figure it out.
Thanks!
Hmm. How about putting your main content in a div and centering that with:
margin: 0 auto;
width: /* the width of your content */
You'd have to rearrange your html markup though; I tried doing this, but it cut off your background. You'll have to take your background-image out of the div you want to center and put it around that div. If that makes sense.. Something like:
<body>
<div id="bg"><!-- give this id the background-image in css -->
<div id="maincontent">
<!-- this div contains all your content, everything that needs centering -->
</div>
</div
</body>
Then in your css:
#bg { background-image: /* blabla */ }
#maincontent { margin: 0 auto; width: /* width, as stated above */ }
Something like that.
Is this what you're looking for:
.main-width { margin: 0px auto; }
give the wrapping div a fixed width and give it a margin: 0 auto
Related
second try as I was unluck to explain the issue yesterday. I am trying to achieve the following layout in html/CSS:
The grey box is the 1040px wide centered site container. Above is a header with a much wider picture which shall grow to the right side in case of a larger screen resolution. How could I do this with CSS?
I know that I could calculate the left margin of the site container with javscript and dynamically set the left margin of the header, but I want a css solution.
Regards,
Martin
It's me again, I now finally understand what you mean.
The closest I've been able to get to what you want, is trying things out with percentages.
<div id = "header">
</div>
<div id = "sitecontainer">
</div>
CSS:
#header{
height: 200px;
width: 100%px;
background-color: black;
margin-left: 25%;
}
Try fiddeling around with those percentages until you hit a sweetspot that works for you.
To add; making 2 divs might even be better, something like this: http://puu.sh/3thxc/085a639816.png. But I can't seem to be able to place the second div (headerright) right next to header div.
I came up with a solution which is working but not the sweetest, so if you have a better approach, let me know:
body {
overflow-x: hidden;
}
#growing-header {
position: absolute;
left: 0;
width: 2400px;
background-color: #edf034;
}
#main {
position: relative;
background-color: #00aaff;
}
and the containers:
<body>
<div id="main">
<div id="growing-header">my header...</div>
<!-- some more divs, site-content,...</div>
</div>
</body>
Cheers,
Martin
I’ve got an online photo gallery. The thumbnail page is a grid of 150px x 150px divs, the thumbnail images are set inside them.
Since the thumbnail images are rectangular, the ideal thing would be to auto-center them inside the divs.
Reading here, I’ve figured out how to center them horizontally. I’ve also been reading that auto-centering vertically isn’t possible until CSS3 takes off. Is this true?
I've gotten the horizontal images to auto center with this:
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
But, the vertical centering doesn't work with this:
.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}
If there's just no way to do this until CSS3 then I'll have to come up with a workaround, but if I'm missing something, please let me know.
Thank you all in advance for your help!
You have an inline element (the <img>) that is inside a sized parent <div> element:
<div>
<img />
</div>
All you need to do is to make it center and middle aligned. You center it with text-align:center; in the parent <div> and you middle align it by giving the <div> the line-height of it's full height. Additionally, as it's an <img> tag you give that image tag the vertical-align:middle; that done it's in there, regardless of it's own size:
Example/Demo:
<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}
</style>
<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>
i have a few problems setting up a layout with horizontal sections that should have an automatic height depending on it's content.
This is my page structure.
<div id="#page-wrap">
<header>
<div class="inner">
#navigation
#logo floated right
</div>
</header>
<section id="services">
<div class="inner">
#some floated boxes
</div>
</section>
<section id="main">
<div class="inner">
#secteion content
#aside sidebar
</div>
</section>
<footer>
<div class="inner">
#footer stuff
</div>
</footer>
</div>
header, sections and footer are always 100% wide.
each section has a .inner div which is centered with margin: 0 auto.
.inner {
margin: 0 auto;
padding: 96px 72px 0;
width: 1068px;
color: #3C3C3C;
}
and as example this is my header:
header .inner {
background: #fff url('images/years.png') no-repeat top right;
position:relative;
/*height:100px;*/
}
#logo {
position:absolute;
right:70px;
top:15px;
float:right;
}
THE PROBLEM: if i don't set the header to a specific height the background image get's cut off. If i inspect the header with a develper tool like firebug the navigation inside of it is kind of outside the the header-box. So if i don't set the height of 100px the horizontal navigation cuts off the the background image - even though it's in the same header.
any idea what i have to consider here.
you state that it should have an automatic height depending on its content and then later state the problem is the background gets cut off. so, what exactly are you looking for? a min-height of 100px which expands if the content is larger? or did you expect the nav to be 100px in height (thus forcing the header to 100px)? its a bit confusing... at any rate, the header will have a height of zero if the height is not set and it's children are floats. it sounds to me as if you want the header to be 100px for the purpose of showing the entire background - if so, just set the headers height to 100px (as you've done)
edit// you've also stated that the logo is floated, but then show that its positioned absolutely - which is it? and how is the nav positioned? more information is needed
header, section and footer elements are not container elements - if you want them to behave as if they were you have to set them display: block - this will make them to behave as normal div would
I think this may be a clearfix issue--
you could try adding <div style="clear: both;"></div> before you close your header, or add the following properties to your header
.header {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
however if your navigation will have things that hang out of its container sometimes (like a dropdown), it's best to use something like the method at http://www.positioniseverything.net/easyclearing.html.
finally, you can also try wrapping the whole thing (header, and content) in another div which will only have the background property. that way the bg image will not get cut off.
My problem is best outlined with this schematic/image which outlines how I want it to look:
!
I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.
My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.
I can't figure out how to make those 2 horizontal white stripes resize automatically.
Here's my HTML:
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </div>
<div id="intro-text">{intro_text}</div>
</div>
And here's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're just placeholders:
#masthead {
height: 260px;
}
div#headline-container {
width:960px;
padding:none;
}
div#left-stripe{
float: left;
background-color:#fff;
height: 3px;
width:500px;
display: inline;
}
div#right-stripe{
float: right;
background-color:#fff;
height: 3px;
width:100px;
display: inline;
}
div#headline {
text-align:right;
color: #fff;
font-size: 200%;
float: left;
display: inline;
}
div#intro-text {
text-align: left;
float: right;
width: 300px;
color: #fff;
}
Ideas? Please let me know if I can provide more detail.
I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).
Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.
This CSS solution MIGHT work... no promises.
markup
<div class="container">
<div class="headline-container">
<div class="left-stripe"></div>
<div class="headline">Headline goes here</div>
<div class="right-stripe></div>
</div>
<div class="content"></div>
</div>
CSS
//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }
Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.
(same markup...)
..
js
var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
You can do this dynamically, with jQuery, for example. You take the full width of the 3 div's, drop the size of the inner div and assign dynamically the widths of the 2 outer div's in which the bar should repeat horizontally.
Basically, you will need:
$("#whole-div").width() - $("#inner-div").width() for the outer div's total width. Then, depending on your positioning of the inner-div, you assign values for the outer div's.
For example: whole div has 1000px, inner div has 200px and inner div is positioned 600px left. You will then assign 600px to the left div ($("#whole-div").width() - $("#inner-div").css('left')) and 200px for the right div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). Of course, you will then set a background-repeat property on the outer div so that the image repeats.
Hope that helps!
UPDATE CSS only fluid solution: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/
it uses the same background image twice, on #masthead and on #headline-container. except ton headline container the background is offset to match its left position relative to its parent element. then we only need one div.line behind it, which gets covered by the background image under the headline and copy, giving the illusion of a seamless image.
do you mean like this?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.