|
CSS - Banner Positioning Movement When Resizing Window
Whenever I change my browser window size all my content moves with it. I feel like this has something to do with my banner being in %'s and not absolute and pixels but I have no idea how to change it. not being able to put in URLS and images probaly won't help.
If any 1 has skype please add me ethan.pidcock. I've tried fixing this for like 8 hours. My css knowledge is bad sadly Similar TutorialsHi there, I'm working on a site on behalf of a charity (non profit social enterprise) www.ableradio.com What I am trying to do is make the banner fit on screen, and stay centred when users resize the page (or have diffrent resolution). The site is a joomla based site, so i am constricted to making changes only to the css files. currently this is the css that governs the banner; Code: #gk-mainnav{ width: 977px; height: 80px; position: reletive; padding:7px 0 0 0; background:transparent rl('../images/menu_bg_top.png') no-repeat right top; padding-bottom:100px; }
#gk-mainnav2{ height:50px; width:977; line-height:39px; font-size:90%;font-weight:bold; text-transform:uppercase; padding:0 20px; margin-top:100px; }
Basically, i have replaced menu_bg_top.png with our banner, and a space for the menu bar to sit on top of it. The problem is, if your running an 800x600 resolution then the banner is cropped to fit rather than resized. Idealy the banner should resize and fit the width of the screen, but if this cannot be possible, then keeping it centred will suffice (holding ctrl+mouse wheel down to zoom out, shows how the banner doesn't resize, AND how it doesn't center). If i could find the main php file from which joomla creates each page i could insert the code there with some java script that resizes the image based on resolution etc... but i am limited to the style sheets only. Thanks for any help ^_- Take care, Steve. I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am. I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header. I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end. I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window. I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning. My HTML is: Code: <body> <div id="header"> <div id="header_ads"> <?php display_banner() ?> </div> <h1 id="heading"><span class="invisible">This is the heading</span></h1> </div> </body> My CSS is: Code: * {margin:0;padding:0;}
body {width:100%}
.invisible {visibility:hidden;}
/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}
#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}
#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}
The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized... I would greatly appreciate any help! Hi everyone, I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. I'm having some problems when I resize a window from full size and make it smaller in width. I have a stationary graphic that remains in position even if the user scrolls the window up and down, which is what it is supposed to do. However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to. Is there a way to allow the graphic to scroll right and left if the window can be scrolled right and left but to leave the graphic stationary otherwise? Here's what I have in the style sheet: Code:
.pagegraphic{
float:left;
height:173px;
position: fixed; /* this keeps the coin fixed and allows the background to scroll behind it */
width:170px;
z-index:99;
}
Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point. Any suggestions are appreciated. I'm creating a site that works fine in FF. However, in IE, if I resize the window, the content doesn't move until I refresh the page. When I refresh the page, everything is centered again, but dragging IE to a new size, keeps everything in the same spot. Is there a fix for this? Unfortunately, I don't have the site posted, but may be able to throw it up somewhere if needed. Thanks. Edit: Nevermind. Had the body set to a certain width. Took that out and it works. I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi and thank you in advance for any advice or help. my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . hmm i cant get this to work... i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide. how can i get this 2 in a div wich get width by % and center aligned on the page? and also on a layer above other stuff Hi there, I have the following in my css file: } #headerBannerWrapper { background-image: url(/GREENLOGO.jpg); background-position: bottom left; background-repeat: no-repeat; background-color: #DEF2B0; padding: 0px; margin: 0px; } #headerBannerWrapper img { padding: 0px; margin: 0px; vertical-align: bottom; However the banner doesn't get rendered in IE7. It renders OK in IE8 Any help most appreciated. The above is linked to the following class: .clearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed. I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size. At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window. I can do this with tables, but can't figure out a cross-browser way to do it in CSS. The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla. Here's my code: Styles.css: PHP Code: .banner { background-image:url(./images/banner-fill.gif); width:100%; } .nav { background-image:url(./images/nav-fill.gif); width:104px; height:100%; } .content { position:absolute; left:140px; top:140px; } Template.htm: PHP Code: <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%"> <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div> <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div> <div class="content"> <p>Page Content</p> </div> </body> </html> I have been asked to create a font resize on a website. I can do the basics of it but I'm running into a couple snags Question 1 In my stylesheet, I have: Code: #centerCol {
float: left;
color: #333;
font-size: 10px;
padding: 10px 10px 10px 15px;
}
And in my code I have a function that contains: Code: document.getElementById('centerCol').style.fontSize = '12px';
It works fine to resize the centerCol ID but what if I want to only resize the <p> tags in the centerCol ID? Question 2 Is there a way to resize without the use of Javascript? Everything I've found so far includes it. Hi everyone, I've been playing around with this for a while but I can't seem to get it to work. Basically, I'm trying to get this table effect in CSS layers. Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#669999">
<td width="580">Welcome</td>
<td>
<div align="right"><img src="images/bg_dblue_gradient.gif" width="200" height="25"></div>
</td>
</tr>
</table>
It's basicly a 2 column layout, with the left column being some kind of content and the right column being a gradient graphic I made, to make the banner look like it has a full gradient. The gradient graphic is 200px wide, thus one resizing of the browser the table in a whole won't shrink down past 780 pixels. I want to use a <div> tag for the graphic so I can repeat-y and have the gradient appear fluid if someone resizes the text size. Any suggestions? Cheers, Fozzy i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!! Code: <html>
<head>
<title>
blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>
<center>
<b>
(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>
Thanks alot, J. I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis Hi, I just installed Gallery on my website, and I'm trying to integrate it with the main theme of the rest of the site. Well I'm having a problem with the banner overlapping the logo in FireFox. It renders fine in IE7 (surprisingly), but not in FF. Have a look he http://www.lightblu.com/gallery/main.php un/pass: test/test You can look at how I want it on the homepage, or anywhere else for that matter. What am I doing wrong? I tried everything with no success. Thanks guys --Waj Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks |
|||||||