|
CSS - Struggling With Css Background
I'm looking for some help on my site, flowermule (.) com
If you notice, when you open the page in an expanded browser window, it looks fine. However, if you drag your window to make it smaller, the background gets thrown off. How do I make it fixed so it doesn't move with your window? Thanks so much! Similar TutorialsHey! Its my first time on this forum, hope your all kind =] Right, ive been trying to make a website using CSS and Div tags, all was going well, i had created my header, placed the banner as a background with no repeat ect, I wanted my menu on the left hand side, so i got that done with rollover images too, and now i want to make two collums next to the menu, one for main content which will go straight down the centre taking most of the page up, and another to the right* of it which will include a 240x400 self made advertisment. But my problem is that i cannot get the content div box to go on the right hand side of the menu insted of underneath it, and dont even ask about the advertisment div box, i cant get it anywhere near, but if you think you could help me here is my HTML: Code:
<head>
<title>Cupid Stunts Official Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('imgs for webite/videos2.gif','imgs for webite/hotspots2.gif','imgs for webite/Showtimes2.gif','imgs for webite/home2.gif','imgs for webite/contestants2.gif')">
<div id="header">
</div>
<div id="content_wrap">
<div id="menu">
<ul>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','imgs for webite/home2.gif',1)"><img src="imgs for webite/Home1.gif" alt="Home" name="Home" width="150" height="46" border="0" id="Home" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contestants','','imgs for webite/contestants2.gif',1)"><img src="imgs for webite/contestants1.gif" alt="Contestants" name="Contestants" width="150" height="46" border="0" id="Contestants" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','imgs for webite/videos2.gif',1)"><img src="imgs for webite/Videos1.gif" alt="Videos" name="Videos" width="150" height="46" border="0" id="Videos" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hotspots','','imgs for webite/hotspots2.gif',1)"><img src="imgs for webite/hotspots1.gif" alt="Hot Spots" name="Hotspots" width="150" height="46" border="0" id="Hotspots" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Show Times','','imgs for webite/Showtimes2.gif',1)"><img src="imgs for webite/Showtimes1.gif" alt="Show Times" name="Show Times" width="150" height="46" border="0" id="Show Times" /></a></li>
</ul>
<div id="main_content">
</div>
</div>
</div>
</body>
</html>
AND THE CSS: [css] body {background-color: #000;} #header { width:100%; height:149px; background:url(imgs%20for%20webite/banner.gif) center no-repeat; } #content_wrap { clear:both; width:100%; height:100%; } #menu li { display:block; width:150px; margin:0 0 0 5%; } #main_content { height:100%; width:40%; float:right; [/css] I have tried everything i know But its not enough ='[ Hi all, This is my first post here so go easy on me. Firstly, please look at this: h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address. Anyway, the top part is what I have now and the bottom part is what I'm trying to get to. Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left. I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here. ANY help would be much appreciated! Thanks, digitalformula I have looked at this a million times and now I've completely lost track... This is the layout in IE: as you can see, it looks perfectly fine, just like I wanted it to look...but then... this is how it looks like in Mozilla: The lay-out is all messed up..it seems like there is a fault in the code with the top left floater..because the right floater only begins at the same point the top left floater ends... I truly want this to look fine in both browsers...even though the most people use IE... (the page is at http://www.finedesigns.nl/portfolio/voorbeeld huisarts) this is the coding: body { background-color:#FFFFFF; text-align: center; } a { font-size:10px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#006666;} a:visited {color:#006666;} a:hover {color:#CC9900;} #container { background-color:#006666; margin-left: auto; margin-right: auto; text-align: left; width: 100%; margin: 10px auto; font-family:verdana; font-size:10px; color: #006666; line-height: 120%; } #Header { padding: 5px; height:100px; } #Left { float: left; width: 150px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Left2 { clear:left; float: left; width: 150px; height:210px; margin-right:5px; margin-left:5px; background-color:#CC9900; } #Right { float: right; width: 150px; height:450px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Content { background-color:#FFFFFF; height:450px; margin-left: 160px; margin-right: 160px; padding: 10px 10px 10px 10px; } #Footer { clear:both; background-color:#006666; padding: 0px; height:5px; } I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. 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 I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. someone know how to make a web with background like this... http://netcodigo.webinfo.es/ I tried, but I can't do it. pd: Sorry for my bad english. Hi, I'm building a website for my work and got in a little trouble. I do not know if it is just the browser or the code. I'm new to this CSS and HTML so i'm not 100% sure. I needed my background fixed which i had done, and on my home computer the main stuff on my page just floats above the background. On my work computer the main information is when you scroll down, after the background image. I'm confsued and wondering if anyone could help, thanks. Here is also a link to the page so you can see what the problem is, http://www24.brinkster.com/mattphat/ymca2.html Code:
<html>
<head>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
<style type="text/css">
html {height:100%;}body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<! --- --- BACKGROUND IMAGE --- --->
<div id="bg">
<img src="YMCA/graudal1.jpg" width="100%" height="100%">
</div>
<! --- --- DONE BACKGROUND IMAGE --- --->
<! --- --- MAIN PAGE BORDER--- --->
<div id="content">
<div align="center">
<table width="727" border="1" color="#736F6E" cellspacing="0" cellpadding="0">
<! --- --- DONE MAIN PAGE BORDER--- --->
<!--- --- MAIN PAGE POSITION STAY --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
</td>
<td rowspan="2" align="left" valign="middle" background="" bgcolor="#000000">
<form id="search" name="search" method="get" action="search_results.asp">
<table width="383" border="0" cellspacing="0" cellpadding="0">
<!--- --- DONE MAIN PAGE POSITION STAY --- --->
<!--- --- NWCTYMCA LOGO --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<img src="YMCA/NWLOGO2.JPG" width="727" height="289" border="none" usemap="#Map">
</td>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
</td>
</tr>
<!--- --- DONE NWCTYMCA LOGO --- --->
<!--- --- BARS ABOVE LINKS --- --->
<!--- BLACK BAR --->
<tr>
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- RED BAR --->
<tr align="left" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- STRONG KIDS BAR --->
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2">
<img src="http://www.ymcadc.org/PublishingImages/webuild_tagline.gif" width="360" height="15">
</tr>
</td>
<!--- --- DONE BARS ABOVE LINKS --- --->
<!--- --- LINKS --- --->
<tr bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<td colspan="2">
<div align="left">
<img src="ymca/miniY.jpg"></img>
<!-HOME->
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-TORRINGTON->
<a href="http://www24.brinkster.com/mattphat/ymcatorrington.html" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg" ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-WINSTED->
<a href="http://www24.brinkster.com/mattphat/ymcawinsted.html" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg" ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-CANNAN->
<a href="http://www24.brinkster.com/mattphat/ymcacannan.html" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg" ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-GIVING->
<a href="http://www24.brinkster.com/mattphat/ymcagiving.html" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg" ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-ABOUT US->
<a href="http://www24.brinkster.com/mattphat/ymcaaboutus.html" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg" ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg"></img>
</div>
</td>
</tr>
<!--- --- DONE LINKS --- --->
<!--- --- BOTTOM RED BAR --- --->
<tr align="left" valign="top" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="3">
</td>
</tr>
<!--- --- DONE BOTTOM RED BAR --- --->
<!--- --- BODY TEXT SECTION --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<center>
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P><s>FIX BACKGROUND *DONE*</s>
<P>NEW STRONG KDIS .GIF
<P><s>TOP BAR LINK IMAGES *DONE*</s>
<P><s>NEW LOGO / HEADER BAR *DONE*</s>
<P>SEE ABOUT NEW COLORS FOR LINK ROLLOVERS
<P>LEFT SIDE LINKS FOR EACH PAGE
<P>COPYRIGHT INFO AND REGULAR LINKS AT BOTTOM OF PAGE
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
</center>
<br>
<br>
<center>
<a href="">Home</a> |
<a href="">Torrington</a> |
<a href="">Winsted</a> |
<a href="">Cannan</a> |
<a href="">Giving</a> |
<a href="">About Us</a>
<br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
</center>
<!--- --- DONE BODY TEXT SECTION --- --->
</div>
</body>
</html>
Am design a site just now this is the image of the site here The problem is the blue background what is the best way to do this just now i have it like this by use a repeat of part of the image but want the cloud part at the top left too. Hello, How can add a background color to each table cell in a table header and also add a small image on the bottom right corner of each of those cells? Thanks, Miguel Is it just IE that using a gif as a background url not work... or is that one of the standards.. I know jpgs work.. but why not gifs? I have a div box with a 100% width and a repeating background image on it. Everything works great except when the window is smaller then the actual site. If I resize my window so that the horizontal scrollbar appears, as if I had a 15" monitor, the background image does not go all the way to the edge. Instead it is only the width of the browser window, although the content of that box displays fine. Anyone know how to fix that? whats wrong with this? body { font-family:arial; font-color:#000000; background:url(background/bg.jpg); } its the background bit that isnt working it works when the css is included on the page but when i put it on a seperate stylesheet it hasnt worked I want to make a webpage with ah gradient border on the left and right side of the page. The gradients will be "fading out" towards the middle. How should I do this? I know how to get one side to show up, but not both. Can I use two different backgrounds in one CSS element? (probably not) Or should I use two different <div> tags with backgrounds set with what I want and are as big as the page? Thanks. I have background image for bullet. However, in Firefox it tries to display several of them for one line, and in IE it is like it should - one background image per line. Ive set background to no-repeat, and it still doesn't work in FF. Help plz. See the problem here http://www.armedassault.org/wp/ Hi all. I'm having a small but very annoying problem with my new design. I'm using backgrounds for my divs but somehow Internet Explorer manages to push them one pixel upwards and to the left. I can't find out why and after trying things for three hours I don't know what to try anymore. In both Firefox and Opera it works fine! Here is a screenshot where you can clearly see what goes wrong. The one on the top is Internet Explorer, the one on the bottom is made in Firefox and is how it is supposed to be. URL Site: URL CSS: URL I also found out that the footer of my page doesn't go to the bottom correctly in Opera. If anybody knows how what the problem is there and how to fix it I will be the happiest person on earth Thx in advance. Greetings, Sjoerd 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 I'm having trouble getting my background to render for my site. When I write the code in the HTML ex. <body background="images/currentbgimage.jpg"> it brings up the image fine. This would suffice if I could tell the image not to repeat. But you can't to my knowledge in the body tag. The image won't display if I write it in the CSS though. ex. body {background-image: url('images/currentbgimage.jpg')} or body {background: url('images/currentbgimage.jpg')} I also tried it with the JPG in the folder with the HTML code, but to no avail. Any help will be appreciated. Skolar |
|||||||