When I resize the browser (window) it shrinks the top background images (yellow squares) and causes a 1px break in the layout (the red squares show the area with the problem). I tried to force the size to always be the same for the top background images by setting width to 50px. The rest of the background is the repeated-x content_bg_sliver.gif image that I show by using a purple square. Any suggestions?
Thanks,
partizan
P.S: Please see attached images that shows the problem within the red squares.
<!-- HTML CODE Starts -->
<div id="top-navigation-container-inner">
<div id="top-nav-left-background"><!-- The left background appended to the top main navigation --></div>
<div id="top-nav-right-background"><!-- The right background appended to the top main navigation --></div>
</div>
<div id="main-body-container">
<div id="main-body-container-inner">
main content goes here....
</div>
</div>
<!-- HTML CODE Ends -->
/* CSS Code Starts */
#top-navigation-container-inner {
background: #FFF;
height: 160px;
float: none;
font: 14px Arial;
position: relative;
}
#top-nav-left-background, #top-nav-right-background {
height: 370px;
position: relative;
top: 0;
width: 50px;
}
#top-nav-left-background {
background: url('../images/top_nav_left_background.gif') left bottom no-repeat;
float: left;
margin-left: -50px;
}
#top-nav-right-background {
background: url('../images/top_nav_right_background.gif') right bottom no-repeat;
float: right;
margin-right: -50px;
}
#main-body-container{
background: aqua url('../images/content_bg_sliver.gif') center repeat-y;
float:none;
overflow:hidden;
width: 100%;
height: 400px;
}
/* End CSS Code */
try looking at this and see if this is what your after and if you think it's a better way to go about it!
http://drupalgeeks.co.uk/example/
Related
I'm stuck trying to get this to work. It looks right when the content of the main column fills the page height but not when it doesn't.
Looks right: http://jsfiddle.net/creativetags/ngv4H/1/
Doesn't look right: http://jsfiddle.net/creativetags/EAuBc/1/
<div class='container'>
<div class='container-wrap'>
<nav class='tabnav'>Some nav menu items here</nav>
<div class='container-inner'>
<div class='clearfix' id='mainwrap'>
<div class='columns' id='main'>
<h2>Main content scrolls here</h2>
</div>
</div>
<div class='columns' id='side'>
<div class="sidecontent">
<p>Fixed Side panel</p>
</div>
</div>
</div>
</div>
</div>
I'm using a faux sidebar column that is fixed, so when you scroll the main column it stays in view.
I need the background of .container-inner to fill to the bottom of the page, even when the content doesn't reach the bottom.
.tabnav needs to show the background image from the body tag, so .container-inner can't start from the top of the page.
Updated demos with large content and small content, using the same CSS.
Summary of the changes
Fixing the main content
Apply the white bg color to both .container-wrap and .container-inner.
Set .container and .container-wrap to height:100%;.
The background image underneath .tabnav is now covered by a white bg color, so re-apply the bg image to .tabnav. This is the key part of the solution.
Updating the sidebar
Set #side and .sidecontent to height:100%;.
Move the side bg image from .container to .sidecontent.
CSS added
.container {
height: 100%;
...
}
.container-wrap {
width: 660px;
height: 100%;
background-color: #f8f8f8;
}
.tabnav {
background: #1d1d1b url("http://cat.storehousebelfast.com/assets/bg.jpg") repeat fixed top left;
}
#side {
height: 100%;
...
}
.sidecontent {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;
height: 100%;
...
}
CSS removed
.container {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right; /* Remove this */
...
}
.container-inner {
min-height: 100%; /* Remove this */
height: 100%; /* Remove this */
...
}
I currently don't have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can't show the images because of an NDA. So will describe the best I can.
Basically:
I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.
I have a "Arrow" png image with transparent background that needs to be flushed against the right side of the browser.
The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.
The content of the page will be centered as well. Just in case this info was needed.
Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo.
All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.
I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn't something that is possible.
Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.
FINAL Update: Using the Advice from Max
Note: I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.
HTML
<div class="header-wrapper">
<div class="header">
<img src="images/logo.png" />
</div>
<div class="arrow-wrapper">
<div class="arrow-tail"></div>
</div>
</div>
CSS Code
.header-wrapper{
position:relative;
width:100%;
overflow:hidden;
}
.header {
position: relative;
z-index: 10;
height: 69px;
margin: 0 auto;
}
.arrow-wrapper {
z-index: 5;
background:url(../images/arrow_tip.png) no-repeat top left;
width: 50%;
position: absolute;
left: 50%;
top: 18px;
padding: 0 0 0 120px;
height:23px;
margin-left:140px;
}
.arrow-tail{
background:url(../images/arrow_tail.png) repeat-x top left;
height:23px;
width:100%;
}
If I got you right, this could a be a solution:
http://jsfiddle.net/WazcT/3/
HTML:
<div class="main">
<div class="header"></div>
<div class="arrow_container">
<div class="arrow">←‐‐</div>
</div>
</div>
CSS:
.main{
position: relative;
width: 100%;
overflow: hidden;
}
.header{
position: relative;
opacity: 0.5;
z-index: 10;
width : 400px;
height: 100px;
margin: 0 auto;
background: #ccc;
}
.arrow_container {
z-index: 5;
background: #88b7d5;
width: 50%;
position: absolute;
left: 50%;
top: 10px;
padding: 10px 0 10px 200px;
}
.arrow{
padding: 10px;
background: #eee;
font-size: 32px;
}
recently I have tried to achieve a navigation bar that has two sides, one on the right and one of the left, they are separated (not same div). I have managed to get the two navigation bars to work but my problem is that when the browser window is smaller then the wrapper (1000px) the right side of the navigation bar will not stick to the right side instead it will be somewhere in the center.
My code until now
css
div.wrapper
{
min-width: 1000px;
}
div.menul
{
float: left;
width: 880px;
padding: 15px;
background-color: red;
}
div.menur
{
position: absolute;
right: 0;
z-index: 999;
width: 250px;
padding: 15px;
background-color: yellow;
}
html
<div class="wrapper">
<div class="menul">
menu
</div>
<div class="menur">
menu
</div>
</div>
help would be appreciated, thank you
Simply add position: relative to the #wrapper CSS. This will cause the right menu to be positioned relative to the #wrapper rather than the page itself
[Example]
I have .jpg as footer that is 8x76 its just a simple line with height 76px and gradient blue color. I would like to put a logo on it. What's the best way to do that?
This is my CSS:
#light_footer_wrapper {
height: 110px;
background: url(../images/light_footer_repeat.jpg) repeat-x top left;
position: relative;
}
#light_footer_logo {
position: absolute;
top: 8px;
left: 600px;
height: 110px;
}
#light_footer {
width: 960px;
margin: 0 auto;
padding-top: 10px;
}
HTML:
<div id="light_footer_wrapper">
<div id="light_footer_logo"><img src="../a/images/logo.gif" /></div>
<div id="light_footer"></div>
I cant locate my logo now on my footer .jpg. but when I zoom in and out the logo moves around :S I want it locked
You could also set a background-image of the logo for #light_footer if you didn't want an extra div, but an extra div might give you more control.
#light_footer_wrapper is the full width of the browser, so when you resize, your logo will move with it.
You should put the image inside of #light_footer, make #light_footer position:relative, and then tweak your left and top values on #light_footer_logo.
I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!