russel walker
Members
-
Joined
-
Last visited
Everything posted by russel walker
-
Yes you're right! Wow thats one big headache relieved cos I suck with javascript. I couldn't get your method to work though(I think I still got some more studying to do) but I did find another one that seems to work for image-rollovers which I found easier to understand: In HTML: <a id="home" href="#" title="Home"><span>Home</span></a> <a id="projects" href="#" title="Projects"><span>Projects</span></a> In CSS: #home { float:left; clear:left; display:block; width:114px; height:30px; background:url("home.jpg") no-repeat 0 0; } #home:hover { background-position:0 -30px; } #home span { display:none; } #projects { float:left; display:block; width:114px; height:30px; background:url("projects.jpg") no-repeat 0 0; } #projects:hover { background-position:0 -30px; } #projects span { display:none; } I know you understand how that works Andyl but for those begginers like me that might be viewing this page: You just make your button images like I did below, one on top of the other. Apparently it only works with links so you have to put a text link like I did above in the HTML and put span tags around the text. In the CSS you can see how the spans are set to display none so that the text doesn't show on the screen. The id in the link is what makes it work. In the CSS a block is created first. It's sort of like a small window that only displays the inside of the block. You make that block the same dimensions as single button (in my case 114px by 30px) and make the background of that block your button image. But because your two buttons are stacked in one image the block dimensions cut out the other half so it looks like one button. Then when you hover it shifts the position of the image "up"(- on the y axis) to half the height so that the other half is displayed. The float and clear is for positioning of the block and thus the entire button-rollover effect. The thing is you have to have a seperate CSS id for each button. It's still better than java though I think.
-
Wow it took me a while to follow up on that but anyways it works now. I did have to sacrifice the shadow in order to use the background-attachment:fixed. The only way I would know how to get the shadows with images is to make the orange background and the white page(#page) one single image. But if so then when I zoom in and out or use different res, the white part which is the page zooms off to the right. I need #page to be in the center always even at different res. So far I manage that with body {text-align: center; background-image:url(tile.png); background-attachment:fixed;} #page {margin-left:auto; margin-right:auto;} The text-align:center; is to make it work in IE because auto margins don't work in IE apparently. I'm starting to notice a trend with IE and incompatibility. hmmm? I wonder if experienced web developers find IE as irritating.
-
I'm trying to learn this by building a practice site for my mom so this is definitely a begginer question. Any help would be greatly appreciated. I got the mouseover event with javascript from w3schools, but it doesn't really explain how it works. This is the homepage with the script. <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> function mouseOver() {document.getElementById("home").src="home1.jpg";} function mouseOut() {document.getElementById("home").src="home.jpg";} function mouseOver() {document.getElementById("projects").src="projects1.jpg";} function mouseOut() {document.getElementById("projects").src="projects.jpg";} function mouseOver() {document.getElementById("about").src="about1.jpg";} function mouseOut() {document.getElementById("about").src="about.jpg";} </script> </head> <body> <div id="page"> <img id="dssd" src="dssd.jpg" /> <div id="bar"> <img class="button" id="home" src="home.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> <img class="button" id="projects" src="projects.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> <img class="button" id="about" src="about.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> </div> </div> </body> </html> Only the about button image works with the mouse over thing but not the other two. What am I missing? And is there a way I can put the script in the style.css so I don't have to do it for every page?
-
Thanks for the help. I decided to use inline css cos I just couldn't get it to work otherwise. I'm still learning. I managed to get the stripe background and the white page over it now with this: <html> <head> <style type="text/css"> body {background-image:url(background.png);} </style> </head> <body> <div style="background-image:url(page.png); background-repeat:repeat-y; margin-top:-8px; margin-bottom:-8px; margin-left:auto; margin-right:auto; width:80%;">blablabla <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </body> </html> Now I just have to figure out two more things: 1)How to add the shadow. I can't seem to find it anywhere on w3schools and the css shadow is not supported in IE which makes it useless cos I need to cater for IE especially. 2)how to make the tiled background image stay put when you scroll down the page so it really looks like the page is floating over the background. Thanks so much for the help. I suspect this is a kindergarten like query but I really can't figure it out. You helped allot so far.
-
I managed to implement the background below with a 40 x 40 px image. It seems to work ok as it gets tiled. Now I want to put a white page over it with a small shadow so that it looks like the page is floating over that tiled orange stripe background. The html boxes with don't seem to work cos I can't align it in the center and if I use a box border then it makes a border at the top too which I don't want. Please help. It should look like this but with a shadow behind the white page:
-
Hello Moris, nice to meet you. I just wanted to say from my own personal experience that improving your grammar really helps you out in online forums. Also you should be specific with questions, very specific. I hope you find this site helpful. Welcome aboard
-
Hi coolcurrent. I think this link may help you, was the first result in google: www.slicingguide.com Also check youtube for demonstrations.
-
Hi Gustin
-
Hi Powell, welcome. I'm a newcomer too. I noticed when I started taking an interest in webdesign that there was allot more too it than it seems. Although webdesign in itself is webdesign there are other aspects of websites, how they are made and how they work that I believe is incorporated under the umbrella term of Web Development. Have you wikid it yet: http://en.wikipedia.org/wiki/Web_development It might bring you some clarification as it did me. I noticed from your companies site that it is a rather basic website for an e-commerce business. I was guessing maybe this is there interest in you getting into webdesign in which case it may some other aspects of web development that they are in need of. I'm just guessing based on what I've researched for myself so far. There allot of different directions one can take and webdesign is only one of them. For example there are also web programmers. A web programmer may have nothing to do with the design of the site. Also check out the other part of this forum on e-commerce: http://www.webdesignerforum.co.uk/forum/47-e-commerce-discussion/ Hope I could help somewhat.
-
Hi fopo. I'm new here, but since it sounds so urgent and noone else responded I guess I should say maybe this might not be the ideal place for your request, with the most important being that you haven't specified any detail in your question. What site are you building and what is it for? Someone may be able to guide you to finding answers. Or what specific problem are you having with you site building so your post can be placed in the correct category?
-
Thanks waynede, I am already
-
Thank you Lev. Much appreciated.
-
Thanks for the recommendation kingy. I checked it out, Although I'm not too confident yet as there are still unanswered question which the customer support doesn't seem to be too helpful about(infact the question seems to be completely invisible to them). Specifically that unlimited doesn't give any information as to how much bandwidth(in terms of Mbps not just Mb) I will have available to me as no one can possibly have infinite bandwidth not even Google. Although they do have allot more features than the local reseller in my country and if I had to choose I would probably take you up on your recommendation. Can anyone help me with this bandwidth(speed) question so I can choose the best reseller plan?
-
Hi, My name is Russel Walker. I look forward to learning as much as I can from all of you and contributing where I can. (sorry about the length of rest below, just sharing my plans and intentions, you can skip/ignore it) Why I'm here: I've been thinking for a long time about getting into web design and a while back I came across a Pastor at my church who said he had been designing simple webpages with Microsoft Publisher and hosting them at affordable prices with a webhost reseller based somewhere in San Francisco. He said he spent allot of time on research to find the right webhost reseller and the web design with publisher wasn't a problem. He said I should look into it. That gave me allot of inspiration as most of the time all I here is how saturated the market is and how many small overnight webdesign and hosting business pop up and go bankrupt as soon as they start. I so understand this may be a very hard business to make a living from and may require months or years of reading, learning, and researching, and maybe lots of trial and errors. Regardless I have decided that I am at least going to make an attempt. My C.V is not promising with regards to a career in any other field and I seem to be quite the computer geek, so I think it would be worth investing my time and money in webdesign and hosting. I have to pay my rent some how. Where I am so far: I am already on my way to learning HTML and CSS. I seem to have got the gist of basic HTML. I have been googling for a while to find a good reseller but am still digesting those tricky areas of resellers and there bandwidth limits and so on. What I have in mind: I was thinking I could start off soon once I have made a few practice websites. I could start by offering a budget plan, where I design a 1 page homepage for small business in the area for free and host it at about 30% less than the competition. They wouldn't really be competition because nobody actually offers 1 page websites. Later on they could upgrade to larger websites once they see the benefits from the small homepage they have. Email will also be included ofcourse. If I could like 50 of these I could survive while I continue on my way to becoming a professional and reputable webdesigner. If you read that please don't hesitate on any feedback at all.
