Home
Monday, October 23, 2017
5:21:15 PM
Users online: 0   You are here >> Home > Web Design

Forums | Web Design Forums search
Forum FAQ
   
  1  
CSS rollovers and basic html
TidyBoi 
24/7/08 5:04:01 PM
Serf
Hey guys, could anyone show me a sample code of how I would make this.

I've sliced 3 images I need for the background, it was big so it needed slicing.

1st part: http://tidydesigns.vndv.com/images/background_01.jpg
2nd part: http://tidydesigns.vndv.com/images/background_02.jpg
3rd part: http://tidydesigns.vndv.com/images/background_03.jpg

I need those 3 comprised to make the background.

This is my nav bar that I want between the stripes and the text:

http://tidydesigns.vndv.com/images/navbar.gif

If someone could show me how to put together my html and somehow make that navbar rollover it would be very appreciated.

Thanks.

-----

GTAV6 
24/7/08 7:09:06 PM
Hero
Titan


i'd be happy to, but all those pics are "403 forbidden"...

:o)

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

superfireydave 
24/7/08 7:54:56 PM
Titan

How much html and css do you know?
I'm not sure if I'll be able to help easily, or if I'll have to explain everything in depth is all.

Alternatively, send me a PM and give me the entire layout to the site and I'll convert it to xHTML, css and images for you for free (as long as I can put it on my portfolio if it's nice! =P).

-----
Mreow?
http://www.atomicmpc.com.au/forums.asp?s=2&c=9&t=17306

GTAV6 
24/7/08 8:28:28 PM
Hero
Titan


d'oh... copy+paste works.
honestly, i dunno why i even bother getting out of bed some mornings :o)


anyway. that's a pretty decent offer, dave - way to go.

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

superfireydave 
24/7/08 8:38:54 PM
Titan

Yeah, I'm in the process of organising my business with Girvo and a few other people.
The only problem is that our portfolio is lacking of stuff we consider to meet our standards (I've been mostly just doing the backend of sites as has Girvo so the visual quality varies strongly and while we don't want to only showclass nice images, we realise it's the first thing a prospective client sees =P) so anything that's not too hard like the OP's request I'd be happy to do for free =P

-----
Mreow?
http://www.atomicmpc.com.au/forums.asp?s=2&c=9&t=17306

GTAV6 
24/7/08 8:55:35 PM
Hero
Titan


that's pretty much how i got my own portfolio filled to begin with, too. but that still doesn't detract from your offer, though :o)

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

TidyBoi 
25/7/08 7:52:28 AM
Serf
I don't know very much of either, i started to learn but school got in the way.

I think know the html for the background images, its just <img src= blah blah 3 times so the images connect.

It's the css rollover for the bar I need help with.
http://img137.imageshack.us/img137/9181/navbarge6.gif

Thats the bar. I read on some guide thats how your supposed to create it but couldnt follow it anymore. What code do I have to put in my html and css file?

Thanks.

-----

GTAV6 
25/7/08 9:59:14 AM
Hero
Titan


well... your background images would really need to be chopped up differently to what you've done and applied via css, not <img> tags in your xhtml. ie; you'd have a single piece of the damask pattern repeating as the body background and the stripes as a one-piece colour/transparent .gif or .png applied over the top in another div.

as for your menu, i can easily throw something together for you, but i don't know that i could readily explain quite how i achieved it. however, i'll hang back on that just for the moment because if there's a chance dave could benifit from this instead, then i'd rather leave it for him.
but, if it's any help to you figuring it out yourself - if it was me, i'd use an unordered list and position the background accordingly, then shift it for each link using a:hover.

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

superfireydave 
25/7/08 1:23:17 PM
Titan

If you want, you can chop up the navigation even more so that you encase just the 2 states for each button in a graphic (e.g. normal and over).

Your xhtml will look like this:
 
<ul>
<li><a href="">HOME</a></li>
etc etc
</ul>

for the menu.

You then use CSS to hide the text in the link and use a graphic there instead. You'd have to look at google for a more indepth answer though, because it does takes a lot of explaining. As I said previously, I'm happy to do the xhtml and css for a layout if you feel that would be quicker, and I'll comment it a little to help you figure out how and why I've done stuff =P

edit: GTAV6, you don't have to hang back on helping someone on my account =P


Edited by superfireydave: 25/7/2008 1:54:27 PM

-----
Mreow?
http://www.atomicmpc.com.au/forums.asp?s=2&c=9&t=17306

GTAV6 
25/7/08 3:35:17 PM
Hero
Titan


ok, so this is one of the ways i'd tackle a menu like this - http://www.thexman.net.nz/TidyBoi/
but i'm at a loss to explain how i created it, or at least in terms that someone else could understand...




Quote by superfireydave
GTAV6, you don't have to hang back on helping someone on my account =P


ya reckon? :o)


Edited by GTAV6: 25/7/2008 3:37:13 PM

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

TidyBoi 
26/7/08 1:32:40 PM
Serf
I'll read up about css and xhtml on the weekend.

Thanks mate for your help, appreciate it, I'll check out your code and see what I can do.

Also, I'll try the background and bar css idea.
I'll post back soon ^__^

-----

TidyBoi 
26/7/08 5:50:45 PM
Serf
I tried to do it myself, I uploaded it to my hosting. When I go to my site I just get a blank page, I can't work out whats wrong.

http://tidydesigns.vndv.com/index.xhtml thats the xhtml file
http://tidydesigns.vndv.com/css/effects.css my css

can any1 take a look at what might be wrong, I tried to use your code GTA but it works for you and not for me =[

-----

GTAV6 
26/7/08 6:48:00 PM
Hero
Titan


no sweat - you've merely forgotten to upload your navbarge6.gif :o)

if you create a folder named 'background' and upload your menu image into it, you'll be fine.

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

TidyBoi 
26/7/08 7:01:20 PM
Serf
I changed the name of it to navbar.gif in the css and already uploaded it though? So that cant be the problem can it?

-----

GTAV6 
26/7/08 8:31:50 PM
Hero
Titan


ok, two things are tripping you up here.
firstly, you've repeated the body attributes in your css. browsers always apply the last value given, so in this case, the second time the body values are presented, the black background is overriding the image you specified in the first.
and secondly, you need to include "../" when you're directing the browser to where your other files are stored (ie; the images). so you should present it like this:

background: url(../images/background.gif);


check this out and compare the css to yours - http://www.thexman.net.nz/TidyBoi/


Edited by GTAV6: 26/7/2008 08:34:12 PM

-----

+++ out of cheese error +++ melon melon melon +++ redo from start +++

- - - - - - - - - - - - - - - - - - - - -
http://www.thexman.net.nz/

TidyBoi 
27/7/08 11:47:23 AM
Serf
Ahh, didnt know about the image path thing.

Thanks very much for your help.

Is there anyway I can move the navbar over a bit?

[EDIT]: Nevermind, fixed it.

Thanks for all your help mate. Really appreciate it.


Edited by TidyBoi: 27/7/2008 11:48:53 AM

-----

rapidDazz 
1/9/08 1:21:47 AM
Serf
A nice way for handling roll over images is to use CSS to move the position of an image on hover. Works great in all browsers.

For example, you have your image size displayed on a page of 100x300 - make the image twice the hight.

Then use background-position: and offset it on hover. Gets around the problem of having to load up a second image when you first mouse over your link.

-----
Anything worth doing, might as well be done right.

  1  
Forums | Web Design