What I am trying to accomplish is a navigation bar that is center-aligned, padded on both sides with a left and right padding div.
The actual navigation bar is currently an inline-block div containing my tags for links and a left and right transition image, which will lead into the background of the navigation bar to take up the remaining space.
Normally, I would center the navigation bar in a 100% width div and use that wide div as the background, but since I am using semi-transparent .png files, I can't overlap like that.
The layout I would like:
(Click image to view full size.)
I updated this question to include an actual image of what I am working with. Currently I set the three <div>s (Technically, the center is a <UL>) to fixed widths, but I would like to add the flexibility of adding/removing links, and it will expand and shrink the <div>s accordingly. As I said earlier, I cannot center-align the center links and overlap them on the background because I am using semitransparent .png files for the images.
Fact is, you do not need the padding <div>. All you need to do is specify an auto horizontal margin, which will automatically expand to grab all the space available (thus centering your content as a side-effect).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#header-nav {
width: 100%;
}
#header-nav-items {
margin: 0 auto; /* auto centers */
}
#header-nav-items a {
display: block;
width: 200px;
text-align: center;
background: #f00;
}
</style>
</head>
<body>
<div id="header-nav">
<div id="header-nav-items">
We are centered!
</div>
</div>
</body>
</html>
Ok, I completed the layout using a 3-column table instead. I did not specify a width for the left and right cells and I specified the center cell's width as 0. The center cell stretches to fill the content, and pushes the right two cells away.
Anybody know of any problems with this?
Related
I'm trying to extend the default Bootstrap image carousel to support dynamically sized images (500x400 max), centered both horizontally and vertically. Additionally, I'd like to maintain the original caption layout, which anchors the caption to the bottom of the image, with the caption div extending fully across the image (but no further.)
I've put together a fiddle, which is a fairly clean implementation of the default Bootstrap setup (there are only 4 additional styles at the end of the css section):
http://jsfiddle.net/rdugan/JFBFU/26/
I can fairly easily accomplish the horizontal centering and caption requirements by adding a surrounding 'inline' div around the image and caption, and using 'text-align: center' on the parent. However, the vertical centering remains a problem (as always.)
As an alternative, I've also tried using 'display: table-cell' (and the accompanying centering styles) on different divs with varying results - in some cases I mess up the carousel functionality, while in others I accomplish the image centering, but lose the caption anchoring.
Any hints would be greatly appreciated - been banging my head on this one for quite some time.
You can center horizontally with these rules:
.carousel-inner { text-align: center; }
.carousel .item > img { display: inline-block; }
For vertical aligning you should check out this:
http://www.student.oulu.fi/~laurirai/www/css/middle/
And for keeping the image aspect ratio on resizing you just have to change only the width or only the height of the image not both at a time and it will resize with its original ratio.
Use the CSS background property directly on the div containing the carousel item:
In the *.html:
<div class="item" style="background-image: url('[path-to-image].png')">
<!-- omit the <img> tag -->
<!-- the rest of the stuff that was in the <div> goes here -->
</div>
In the *.css:
.carousel .item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
However, this seems to break the carousel navigation arrows.
try to use this snippet
.carousel-inner > .item > img {
min-width: 100%;
}
I read this and wrote this code:
.wholePageDivForCentering
{
width: 80%;
white-space: nowrap;
display:inline-block;
margin: 0 auto;
border: 4px solid red;
/* other stuff I tried........*/
/*padding-left: 10%;*/
/*margin-left: 10%;*/
/*padding-right: 10%;*/
/*margin-right: 10%;*/
}
<body>
<div class="wholePageDivForCentering">
<h2>Hello from the page</h2>
<!-- stuff such as 2 nested divs contained text labels, and a small image -->
</div>
</body>
I put a solid-red, 4-pixel border around my outermost div for a reason.
I wanted to see if that thick red border rectangle around that outermost div would
horizontally center itself on the page.
IT DID NOT.
EDIT: My outermost div stays on the left when the browser is maximized.
You can see I tried more than one thing. In my opinion, I should be able to:
tell this outermost div, the one with the thick red border, to take up 80% of
the browser window
then using the advice from the above SO post (again, here) -- get this
outermost div always taking up 80% of the browser window but HORIZONTALLY CENTERED
on the browser window.
Me personally? I think my margin-left = 10%, margin-right=10% should do it but no.
To see what I want -- open Craigslist at http://sfbay.craigslist.org/
and maximize the browser window (the main page, not a nested page, of the CL site).
The horizontal width of the whitespace on either side of the Craiglist main
page is the same when you maximize the browser. The main page's columns are
horizontally centered.
Because (perhaps) that page has a centered div that surrounds everything
else on the main page.
How do I do it?
Take out display:inline-block and it should work.
Here is a Jsfiddle (click Run): http://jsfiddle.net/zKm6b/
I also recommend using an id instead of a class for that div. I hope that helps!
Why are you settings display: inline-block. It will work if display is block (which a div is by default, so you can solve the problem by removing display).
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.
I'm trying to make a horizontal navigation bar with x number of unknown width buttons on the left, a 150px wide image to cap on the right side, and the space in between the buttons and the cap flows to take up 100% of the width of the screen. I'm not real good at CSS and I've been playing around with different setting using divs, tables, unordered lists and combinations of the three and cannot get it working properly. I'll try to draw it in ascii now:
<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>
So, the Buttons, against the left side of the screen, will shrink to fit the text content, the cap will be up against the right-hand side of the screen, and the spacer will expand/contract to make the whole assembly fill 100% of the screen. The images are PNG's with some transparency so images cannot overlap.
Thanks for the help.
Simplest solution:
<div id="nav">
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>
<div id="cap">Cap</div>
</div>
with:
#nav { overflow: hidden; }
#nav button { float: left; }
#cap { float: right; width: 150px; }
No spacer is required because the div will be 100% width anyway (unless other CSS changes that). That is unless you need specific styling for the spacer or there's some other reason to have it. If it's just a style issue apply the style to the outer nav div and the content will appear above it, effectively doing the same thing.