|
CSS - Elastic Site Background Visa Css Problem
Hi folks,
Here's the comp that I'm trying to port over as strictly css/xhtml: http://www.buyblue.org/stg/images/layout1c.gif username:buyblue pass:letmein It's a comp built to fit an 800x600 resolution, however I'm developing it to be a liquid site. And here's the ongoing attempt: http://www.buyblue.org/stg (same user/pass if you need it) As you can see, it's a work in progress. Here's my problem. I need to have the outer glow running down the sides of the content_container, so I created the leftimg and rightimg divs to have a bg image of each respective sides glow. Set them both to 25px, and I'm getting nothing here. Even if I did get it to work, I think this workaround would be a problem because it wouldn't stretch down to the size of the content_container div. Since this is an elastic design, the faux background trick won't work, obviously, and I can't find anything on the web that even remotely touches on something like this. Here's the basic structure of what's going on: Code: Code: <div id="container"> <div id="header"></div> <div id="leftimg"></div> <div id="content_container"> <div id="sidebar-left"></div> <div id="main"></div> <div id="sidebar-right"></div> </div> <div id="rightimg"></div> </div> <div id="footer"></div> Help would be much appreciated! -jack Similar TutorialsHello guys, i'm looking for help. Ok, here is the problem - i have a bunch of "float:left" divs with pic inside each of them. It looks like several rows and columns of pics - but there is always a gap on the right side of a page - on different resolutions there are different number of divs in rows but this gap is always there - smaller or bigger. How can i make this divs to become elastic and fullfil all the horizontal space?? Thanks Hey All, I'm playing with elastic design for the first time--trying to use ems for all of my lengths, but I'm having a problem with my ems not converting to pixels consistently and I keep running into this using Firebug. For example: Code:
<body>
<div id="page-wrap" class="clearfix">
<div id="left-container"></div>
<div id="center-container"></div>
<div id="right-container"></div>
</div>
<body>
body {
font-size: 62.5%;
}
#page-wrap {
max-width: 96em;
}
#left-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
#center-container {
position: relative;
float: left;
margin: 1.5em 0;
border: 0.1em solid red;
padding: 0 1.5em;
width: 44.8em;
height: 6em;
}
#right-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
In firebug, the values are computing consistently and thus the right container is getting pushed down because of 3 pxs. In firebug, the computed values a page-wrap = 960px left-container margin-right = 10px border = 1px width = 229 px center-container border = 1px padding (left and right) = 15px width = 449 px right-container margin-left= 10px border = 1px width = 229 px Can anyone help me understand why the widths aren't converting consistently? Why they're adding a pixel? Hello, Im using a separate style.css file to define everything through the site... ive put in this code: Code: .sideheadline {font-family:Verdana,Sans-serif; font-weight:bold; color:#FFFFFF; background-color: #003366;
background-image: url(images/bg.gif); background-repeat:repeat; background-attachment:fixed; font-size:10px; }
and connected to this line: Code: print "<tr class='sideheadline'><td>Look at the rest too</td></tr>"; But nomatter what i try the image wont show, i tried several images and theyre loadable from the urlbar... so the image works Now i went to w3schools and tested with the online editor... there this exact code works, but then when i copy it to my site it wont! Im using dreamweaver for a editor... So 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 Hi, I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting. Would you kind people tell me how I can find out where the problem is in these cases? I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags.... size of the pictures are also moderate as you can see... I know you can't read the text, but where do you think I should look for the problem? the site address is (oh i can't post links!!!) please use 'punez' dot 'nafice' dot 'com' (it's a subdomain) http://www.mattcampy.com/therealsamsclub Everything looks cool till the bottom of the browser, the page background just stops randomly. Can anyone point me in the right direction? CSS file: http://www.mattcampy.com/therealsamsclub/s/styles.css ..never mind! Hi all, For some reason, my site (http://www.emineer.com) cuts off a bit when viewed on an iPhone. Here's a screen-capture to show what I mean: You can see that the right edge of the top blue background is getting cut off (it should stretch to the edge of the screen). It even happens on inner pages: As you can see, the right side of my site is cut off a bit. I have width set to 100%, so I'm not sure why this happens. It's not my phone because other sites work just fine. Any reason for this? Im just playing around with CSS and Photoshop and made this so far:- http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code:
body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }
#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) 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? 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; } 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. 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 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 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 I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do? Website is: http://www.artandcraftsdirect.com/ 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;
}
|
|||||||