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.
Related
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
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/
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?
I have a centered wrapper with following CSS:
div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;
background-color:black; }
inside i have a div with following css:
position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;
inside of this div is an image which has 759px width, that makes the wrapper grow larger and makes the browser show a v-scrollbar on lower display resolutions.
what i want is to make the image go outside the wrapper but prevent the browser from showing the scrollbar, so that the right side of the image is only shown if your browser window is large enough and the wrapper keeps its 1200px width. i can't make it a background image because it goes over some of the other content.
something that is compatible with >= IE7 would be nice.
i uploaded a pic of the page to show what i mean:
http://img153.imageshack.us/img153/6070/hpx.jpg
the blue box is the wrapper, it has 1200px width and is ALWAYS centered in the window (unless then window is smaller than 1200px, then it scrolls)
the red box is the image (the green bar is not part of it)
You can set overflow: hidden to the wrapper so that content that exceeds the dimensions of wrapper will not be shown.
see overflow
You are looking for #your_div { overflow: hidden; }, if you want your content to be hidden. Or #your_div { overflow: visible; } if you want your content visible outside the div.
The only method that springs to mind given your requirements is to move the inner element out of that wrapper div and position it in relation to the entire window:
<body>
<div class="abs">the div with the image</div>
<div class="wrapper">the wrapper div</div>
</body>
Unfortunately, this probably means you can't position it very well. You may need to use Javascript to get the width/height of the page and/or the position of the wrapper div, and calculate the offset accordingly. (You'll find questions on Stack Overflow for these bits.)
The problem lies with the img being inline. Not tested but you should 'display:block' the image and then float it or absolutely position it.