|
CSS - Help With A Rather Complicated Background Problem
Hey guys. So everything in the picture are in <div> tags to start off. If you look at the image, there is nothing really wrong with the design of the site at the moment, but that is a pretty large resolution, 1920x1080. The problem arises with smaller resolutions like here for example: This was shot at 1280x1024 or 1024x768. As you see, the background image is not aligned anymore. Could you guys help me with ideas or actual fixes on how I should overcome this problem? Like written on the image, I'm currently using a background image that is repeated on the y-axis and is then aligned with "scroll=(x)%". I almost forgot to add, that the 2 side bars are also scaled by percentage, with "width=(x)%". Similar TutorialsSo I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Perhaps you guys can help me debug this CSS problem I am having. Take a look at the following url: problem url The problem is that setting the background style for ROW elements in the inner table isn't working. It works fine for TD elements as well as the Table itself. One thing to note is that the TD did inherit from the outer table so I had to set the background color to transparent. But seeing as the background color for the table is showing through (sky blue), I don't see why the background color for the rows in the table isn't coming through. I am trying to get this working in IE, but it's not rendering properly in Mozilla either so I feel it may be a CSS problem. Any suggestions? Thanks! I've been lurking these forums for quite some time and finally decided to register today to ask this question. I've been working on this problem from several hours and can't come up with an adequate solution. I am currently working on a threaded comment system, as pictured below. This works fine for users with short names. However, when a comment is posted by a user with a slightly longer username the site breaks. Working Fine: [h]t[t]p://uploader.[w]s/upload/200712/good.gif Problem: [h]t[t]p://uploader.[w]s/upload/200712/bad.gif My current solution involves measuring the pixel width of each username, and adjusting the padding accordingly. This seems like a rather complicated solution, and I suspect it could be done in a much better fashion. Link to actual HTML: [h]t[t]p://allknowingball[.]com/write/ Perhaps someone could give me a few ideas on how to improve the overall CSS comment structure to fix this issue - right now it's very messy/ugly. I have css driven dropdown menus but they disappear when I try to scroll down. Also when they appear they are below the main content in my content box. I'm getting most of this information out of books and online forums. Anybody know anything about this? My Developement Site CSS code I know it isn't pretty yet, but I'm just working on basic layout for now. Ok I have a two column layout, because of limitations set on the structure of the pages html (don't ask) the only way I could figure out of making the two columns both (visually) the same height (as their content will vary dynamically) is to do the following fudge - to put the background column images as the background to a container div which then I put the columns into: Code:
#container {
width: 620px;
background: scroll url(<cfoutput>#path#</cfoutput>two_cols_bg.gif) repeat-y 2px 0px;
}
#left-column {
padding-left: 2px;
width: 178px;
float: left;
}
#right-column {
width: 440px;
float: right;
}
<!-- two main column container box -->
<div id="container" name="container">
<!-- start left (search) column -->
<div id="left-column" name="left-column">
content
</div>
<div id="right-column" name="right-column">
content
</div>
</div>
This works fine in IE (5.5 at least anyway) but netscape the background doesn't show through (even if I set the left & right column backgrounds manually to their default of transparent). However the background does show up if I put some content directly into the container div, but only for the lines where content is there - it still doesn't show up behind either of the column divs. Any ideas? Also I'm using the name="" attribute as I'm sure I remember reading that some versions of NS don't like the id="" attribute and use name="" instead, but I can't find clarification on this. Thanks in advance. -D Hi All, I need someone's eye to find mistake in my simple code which is not responding in FF. I have one main div and 2 sub divs under that main div. The main div contains Background-color: white which, FF is not showing. It is working in IE but FF is not showing it. I don't know if I am missing something here but I am not able to figure out what is the problem here? Can some one please point out any error from the below code. I will be greatful to you. Thank you. PHP Code: <html> <head> <title>Untitled 2</title> <style> #Navigation { width: 779px; height: 25px; background-color: #CCCC33; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #222; text-align: left; padding-top:2px;} #ContentMain { width: 779px; background-color: #fff;} #ContentBody { width: 579px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:yellow; text-align: left;} #ContentRight { width: 200px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:green;} </style> </head> <body bgcolor="red"> <center> <div id="Navigation"><span style="padding: 10px;">Home | SiteMap | Contac Us</span></div> <div id="ContentMain"> <div id="ContentBody">A<br>B<br>A<br>B<br>A<br>B<br></div> <div id="ContentRight">A<br>B</div> </div> </center> </body> </html> I'm using the following for a basic two column layout. I'd like the nav div to have a background, repeating horizontally once, but what I'm doing isn't working. The other thing I'd like to do is restrict the hight of the div to exactly the hight of the background image... Ideas? Code: <style type="text/css">
body,
html {
margin:0;
padding:0;
background:url("./images/bg_test.gif") repeat-y center top;
color:#000;
}
body {
min-width:962px;
}
#wrap {
margin:0 auto;
width:962px;
}
#header {
background:#9c9;
}
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:url("./images/nav_bg.gif") repeat-x
padding:5px;
text-align: center;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:712px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer {
background:#cc9;
clear:both;
}
#footer p {
padding:5px;
margin:0;
}
</style>
Please see http://tinyurl.co.uk/33te In the div #maincontainer I have had to set a height of 480px just to get the background to show. You will see that in IE the background extends all the way down the page but in FF only by 480px If I remove the height then the background doesn't show up in either IE or FF at all. This is confusing me because normally the background repeats fine all the way down without any height setting. I don't want to set a fixed height because each page is different. Also there's a gap above the main image in FF which I'd like to remove. thanks for any help css - #maincontainer { background-image: url(images/mainbackground.gif); background-repeat: repeat-y; height: 480px; } Hi mates. Can someone please give me some support on how to fix this. http://www.caprelations.com/cap.htm That is the site im working on. The white in the back is a div, and I have applied width and height properties to it, but it seems not to follow that. You see I dont want the white to exceed down that far, I want it to stop right underneath where it says click here for brochure. Any idea on how to fix this? I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right. Hey Guys, as you see I'm new here and it would be quite cool if someone here can help me. i need this problem to be solved.. finally^^ So here's the problem: I'm on starting a new website and the guy for the graphics sent me his design. Looks quite cool but there's one problem: There's a background which needs to be separated into three parts. To make my problem clear i made a short sketch, see he As you see, Part I is always in the top left corner, ok that shouldn't be the problem. But here is where it gets tricky: No matter which screen resolution there is, Part II should show up in the top right corner. And the next Problem is: Part III should always be on the bottom, and these two things are a problem^^ Anyone got an idea? Would be quite yool if someone knows what to do.. Lukas I have a table and whatever background i put in it it only shows a part of the background at the bottom of the table. if i put another table in the excisting one and then put a background in the new one then it works , But this way it ruins the layout . <tr> <td colspan="4" background="images/Untitled-3.s_12.gif" bgcolor="#FFFFFF"></td> </tr> by removing the bgcolor i get the same result.. CSS is simple and includes : body { background-image: url(images/bg.gif); } .style4 {color: #000000} .style5 { color: #FF0000; font-weight: bold; } .style6 {font-size: 10px} --> Regards , Kevin sorry for posting this in HTML forum also. I have a horizontal ul: Code: <ul> <li>blah</li> <li>loooooooooooooooooooooong blah blah blah</li> </ul> If I set the background color: Code:
li { background-color: yellow; }
It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height. Is that possible? I don't want to have a fixed value for the height Hey all. I've been putting together a website for my friend, and my css chops are admittedly pretty old and not that great anyway. I'm wondering if anyone could give me some advice. I can't get a background-image in a <div> to load at all in a firefox browser, though it loads in safari. I've highlighted the particular image tag. Does anything look wrong? _____________________________________ a:link { text-decoration: none;} a:visited { text-decoration: none;} a:hover { text-decoration: underline;} a:active { text-decoration: none;} body { background-image: url("images/backcolor.jpg"); } #site { position: absolute; top: 0px; left: 0px; width: 864px; height: 576px; background-image: url("images/backdrop.jpg"); overflow: auto; } ____________________________ (snippet from html) <body> <div id="site"> <div id="nav"> <a href="about.html"><img src="images/about.jpg" border="0"></a> <a href="resume.html"><img src="images/resume.jpg" border="0"></a> <a href="portfolio.html"><img src="images/portfolio.jpg" border="0"></a> <a href="links.html"><img src="images/links.jpg" border="0"></a> </div> <div id="image"> </div> <div id="text"> <span class="main"> <span class="title">There is music in everything.</span><br> <span class="link">In the very core of the emotions we emit as human beings there is sonic substance. Much like music, sound contains rhythm, texture, timbre and tone. It has the incredible capability of evoking and opening all of our senses: sight, taste, touch and smell. When a sound design is successful it is an art, a piece that is honored individually for its strength and intelligence, rather than its ability to support a production.</span> <br><br> <span class="link">These are the qualities I strive for in my designs, to create sensory events that evoke emotional responses and aesthetic meaning. Sound can have great presence in a performance. It should always be welcomed. </span> <br><br> <span class="link">Anthony Mattana is a junior sound design major at Carnegie Mellon University's School of Drama. Please feel free to contact at any time.</span> </span> </span> <br><br><br> <span class="main2"> <a href="mailto:anthmattana@gmail.com"><img src="images/sig.jpg" border="0"></a> </span> </div> </div> </body> </html> I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this this is just an example : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS Code:
div#top p {
background:url('image/logo.gif');
}
I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one well hope you can help me I have a problem with my CSS in IE6 (surprise, surprise). If you look at www.bluehatmedia.co.uk you will notice that the left hand menu is for some reason on the far right (needing to scroll). But if you look in FireFox, Netscape, Opera, Safari they all work fine. But if you mouse over a link then the menu goes back to the left had side where it should be. and when i remove the following from my CSS: background-image:url(images/picture.gif); background-repeat: repeat-y; background-position: right top; the background image doesnt display (obviously) and then menu goes back to the left. Any ideas much appreciated Tom Hello, I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly. It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for. For some reason I can't link to an image, nor to the site itself to show you the error. This is the code applicable to the content area. Code: #content
{
width:770px;
background-image:url(images/backgrounds/conbg.png);
background-repeat:repeat-y;
font-size:11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 70px;
margin-left: 130px;
margin-right: 0px;
vertical-align:top;
}
#contentlimit
{
width:690px;
}
#condiv
{
width:770px;
margin-left: 130px;
margin-right: 0px;
}
And this the Navigation element: Code: #nav
{
width:130px;
display:block;
float:left;
vertical-align:top;
margin: 0px 0px 0px 0px;
}
.mlink a
{
display: block;
color: #666666;
background-image:url(images/backgrounds/link.jpg);
width: 130px;
padding: .0px .0px;
height:15px;
text-decoration: none;
text-indent: 10px;
}
.mlink a:hover
{
color: #333333;
text-decoration: none;
background-image:url(images/backgrounds/linkhov.jpg);
}
At last check, with this current style sheet, the code was valid. Any help appreciated, Cold Hi, My code validates apart from some Mozilla specific stuff at the bottom. Basically, in the socialbes-hover' part towards the end i have the background-color set to #F9F7ED which works fine in Firefox however in IE it always reverts back to the earlier code of a:hover { color: #F9F7ED; background-color: #006E2E and i cant seem to get it right whatever it try! please help me its driving me mad arghh lol thanks Code: .style1 a:active {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:link {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:visited {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:hover {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #D15600; text-decoration:none
}
a:visited {
color: #D15600; text-decoration:none
}
a:hover {
color: #F9F7ED; background-color: #006E2E
}
.style1 {color: #D15600}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; }
.style9 {color: #D15600; font-size: larger; }
/************Main Menu******************/
.menu a:link {
color: #36393D; text-decoration:none
}
.menu a:visited {
color: #36393D; text-decoration:none
}
.menu a:hover {
color: #D15600; background-color: #F9F7ED
}
/************Comments******************/
.comments :link {
color: #D15600; text-decoration:none
}
.comments :visited {
color: #D15600; text-decoration:none;
}
.comments :hover {
color: #36393D; background-color: #F9F7ED
/************Sociables******************/
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
background-color: #F9F7ED;
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
color: #36393D;
background-color: #F9F7ED;
}
Hi, I have this problem with loading new movie on the same page with fixed background. Here is an example of what i want to do . I have two flash files main.swf and movie1.swf, and main.swf loads first when i open index page. On the button of this main.swf i have action loadMovieNum("movie1.swf", 0); which should load new movie in the same window and everything works fine when i test SWF file but when i embed it in a HTM page with fixed background only first move main.swf loads fine as it should but when i click on the button in this main.swf to load new movie movie1.swf in the same page it will not load??? It starts to load and than just stops. I guess there could be something wrong with my CSS style but i have never been working with CSS as i am only beginner in web design. Could anyone help here please? Here is y CSS style. PHP Code: body {margin:0px; padding:0px; vertical-align:top; background:url(images/back.jpg) no-repeat top #2BA3F4;} my code is below Code: <style>
.myclass{
color:white;
background: black
url(http://img-cdn.mediaplex.com/ads/3976/22164/408x27_uom.gif)
no-repeat fixed
top left;
height:100%;
}
</style>
<table height=100% width=100%>
<tr><td class=myclass>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
</table>
result of IE http://img103.echo.cx/img103/7196/ie7ab.png and Moz http://img103.echo.cx/img103/9229/moz0jq.png this code works with IE without being any problem in IE, if scroll is bottom, background image doesnt come to bottom. but Moz, it does please help me.. |
|||||||