HTML - Split Background Colo
I was wondering if there is a way to split the back ground color of a page so that one half is one color and the other half is another
Similar TutorialsI'm looking for information on how to split a web page background, this is kind of hard to explain so i'll provide an example, http://www.torrentspy.com Can this be done with html and css only? Know of any tutorials or links for what i'm looking for? Hey everyone, I have a 900px wide container div, and inside is a horizontal nav bar consisting of five buttons and a spacer image at the end to fill out the remainder of the width (six total images in all). The buttons consist of an unordered list of background images, floated left, and the spacer is an image that I threw on at the end. In Safari and Firefox (Mac and Windows), the page displays perfectly. In Internet Explorer, however, the final spacer image gets bumped down underneath the rest of the nav bar buttons. Its like IE is counting some extra pixels somewhere and deciding that the spacer image doesn't have enough room to fit in the 900px div. I'm pretty new to this, just learning as I go along - is this a common problem with IE, and is there a fix for it? I've tried removing the border from the container, not sure what else to try. Thanks! I have just uploaded a new page at http://www.uncooking101.com/index.shtml , and for some reason the text it split up on IE. It shows just the first line to the right of the image, then everything else ends up below it so there is a large and very awkward space. The code is validated, and there is no problem in Firefox. A very similar scenario works fine at http://www.uncooking101.com/index.html . Does anyone know what in the world I am doing wrong?? If you don't see what I'm seeing, I uploaded a screenshot he http://uncooking101.com/images/iescreenshot.png I thank you in advance if you are able to help me! I'm new to really discussing these things. Usually my friend Google answers my tough situations, but I don't even know what to search for and am now about to pull my hair out! Hello, I have a form which is used to pass a password in 2 factor authentation. What I am looking to do is to take : <input class=CTXMSAM_ContentFont type="Password" title="Enter password" name="passwd1" size="13" maxlength="32"> and split it into two form fields but when the user submits the form combining both fields to be submitted wth the name="passwd1" This is crutial for authentication to work. The reason for this is that the password is a secure token which contain a PIN + Tokencode. Currently the need to put both in one field and hit submit combining it them selves. This is not optimal as end users are not the smartest eggs out there. Thanks The full .js script is below: var loginPrefilled = false; function SetCookie(cookieName,cookieValue) { var today = new Date(); var expire = new Date(); expire.setTime(today.getTime() + 3600000*24); document.cookie = cookieName+"="+escape(cookieValue)+";path=/;expires="+expire.toGMTString(); } function UnsetCookie(cookieName) { document.cookie=cookieName+"=nothing;expires=Thursday, 1 Jan 1970 00:00:00 GMT; path=/"; } function ns_check() { var login=document.forms['vpnForm'].login.value; if(login == "") {window.alert("You need to enter login name"); return false; } SetCookie("NSC_USER", login); return true; } function ns_disperrmsg() { if(document.cookie.length>0) { if(document.cookie.indexOf("NSC_VPNERR=4001") != -1) { document.writeln("<FONT COLOR=#000000><B><CENTER> Invalid username or password.</CENTER></B></FONT>"); UnsetCookie("NSC_VPNERR"); return; } } document.writeln(" "); } UnsetCookie("NSC_AAAC"); UnsetCookie("NSC_USER"); function ns_getcookie(name) { var cookie=document.cookie; if(cookie.length > 0) { begin=cookie.indexOf(name+"="); if(begin!=-1) { begin+=name.length+1; end=cookie.indexOf(";", begin); if(end==-1) end=cookie.length; return unescape(cookie.substring(begin, end)); } } return null; } function ns_fillName() { var value=ns_getcookie("NSC_NAME"); document.vpnForm.login.focus(); if(value!=null) { document.vpnForm.login.value = value; loginPrefilled = true; document.vpnForm.login.style.color = "#777"; document.vpnForm.passwd.focus(); UnsetCookie("NSC_NAME"); } } function loginFieldCheck() { if(loginPrefilled == true) { document.vpnForm.login.blur(); } } function ns_showpwd() { var pwc = ns_getcookie("pwcount"); document.write('<TR><TD align=right><SPAN class=CTXMSAM_ContentFont style="FONT-WEIGHT: bold">Windows Password'); document.write(':</SPAN></TD>'); document.write('<TD><input class=CTXMSAM_ContentFont type="Password" title="Enter password" name="passwd" size="13" maxlength="32"></TD></TR>'); if ( pwc == 2 ) { document.write('<TR><TD align=right> <SPAN class=CTXMSAM_ContentFont style="FONT-WEIGHT: bold">SecurID PASSCODE:</SPAN> </TD> <TD> <input class=CTXMSAM_ContentFont type="Password" title="Enter password" name="passwd1" size="13" maxlength="32"> </TD></TR>'); } UnsetCookie("pwcount"); } Hello Everyone! About 4-5 days ago I made my attempt to build my first webpage, I am using Dreamweaver cs4 my goal right now is to split my index page in half so I can have two columns, one side for a current video and the other for upcoming news. my site is www.canapictures.com and I will include a picture of what I am trying to achieve, thank you. The gray line in the middle is where I want it to split, and the box is where text would go, I want to line to be invisible if possible. I have lost the code / split / design buttons in my dreamweaver. Please can someone tell me how to get this back? This what my dreamweaver currently looks like: This is a pic that has the buttons I want to get back in place! http://www.softwareinreview.com/imag...weaver_cs3.png Please can someone help Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hi i have an issue with my background not displaying correctly. I know i have not sliced the template etc but i can only assume the same problem will occur when i do. I have set a background image to the page but its not inline with my image background, How would i go about making sure everything is lined up when publishing it? Ive messed around with margins etc but there seems to be a default margin at the top which i cant remove. http://www.banks-twins.biz/testhome.html Thanks. Alex. I've just put up a new page - mbccc.net - and I've used a picture, a .jpg image file, for the background. Sometimes it displays alright but sometimes it doesn't - sometimes it begins to 'tile' at the edge. When I view the page in my IIS on localhost it always does that. When I view it in my html editor - NVU - it always does it. My question is why does it do that and what can I do to prevent it? The picture is 196kB .jpg of 1024 x 768 pixels. I've been viewing in Firefox, what it does in other browsers I don't know. What should we do if we want to use pictures for background? regards, ab Okay, I have this background image...it's fine and dandy...but I want the stripes on the left side to continue to go down the page if more information is put on the page and it not stop at where it does on the page. I can't repeat it because THE EXOTIC ZOO will be repeated too down the page. Any suggestions of what to do? Here is the page I'm talking about: http://thexoticzoo.webs.com/rats.html nevermind... Thank you for helping and this site is awesome! Take care... Ryan Hi, I wanted to use an image for the background of my page, but also have a DIV layer with images that look like they are coming out of it. For some reason though when I set the image as the background, it becomes just a bit brighter. This completely throws off what I'm trying to do because there are elements of the background in the DIV layer image and now the DIV image looks darker than the background ruining the effect. So I've tried to solve the problem by putting this huge background image as a DIV layer and aligning it to top: 0 left: 0. The colors now match. The problem is though that the image is way bigger than the browser window so scrollbars appear on the sides. I don't want this. Can anyone offer a suggestion to either of my problems? Thanks! hey everyone, when im making my website i put something in it then move it up the website to a different position so its where i wnt it. when i move this up my website it leaves a blank space at the bottom. how do i get rid of thisblank space?? the code im using is... <div style="position: relative; top: -300px; left: 200px;"> ive also tryed postioning it in css and its just doing the same thing if someone could please help i would be very grateful thanks How to insert a background on this site ? http://videosearch.w-b0x.com/ I want to give a division a background image but I'm not sure how to do it. I wrote a code that says: Code: #links { background-image: Graphic1.png } But nothing happened. What am I doing wrong nad how can I fix it? Heres the link Well, It looks fine, unless you view it in full screen, if you view it in full screen you'll notice that the white and grey backgrounds extend along with the main background, I want the white and grey background to stop where the footer is, and the main background (#cccccc) to continue on down. You can use View > Source for the source code (as it's rather big and I'd rather not have something that big in my post) CSS Code: Quote: .leftcolumn{ width:273px; padding-left:9px; padding-bottom:20px; background: #F1F1F1; float:left; text-align:left; } .rightcolumn{ width:503px; float:right; text-align:left; } left column = grey column right column = white column hi in this site www.muaythaistuff.com they have some tatoo kinda background and i have tried to put this one on my site and it makes a lot of them in one page so my question is how can i set this tatoo image only in the top like in this very site and the rest will be black color? How can I set background in a page. please help me. I'd like to have a scaling background like on this site: www.burton.com I'm using DreamWeaver, is this possible? P.S., I'd also like to build a scaling x-y navbar like they have on that site if it's possible. Thanks in advance! |