Website help! (html and css invovled)

J

j0nni

New Member
Hi I'm new here, and will be sticking around for a while mainly because I kind of need to know my web stuff (Multimedia Student):p

Anyways I'm building myself a basic portfolio site, I've made very basic sites in the past but with assistance from teachers, but this is all on my own at home (I'm on holidays)

Here's what the main page is meant to look like without content (for the main page)
template.jpg


Here is the url to it for what i've done:
http://members.optusnet.com.au/j_troy/index.html

anyways I've got a few questions which I'm unsure about. The first will be easy. How do I get rid of the box around the nav bar buttons?
Also is there a better way to do the nav bar? Such as using text instead of images with the custom font? because all I've done is put images inside it's own div tags as I got no idea how to use custom fonts in web.


(Going to try a different method for this tomorrow)
Second question is how do I go about making CSS rounded boxes? I've tried but had no luck.
I tried to put it directly into the main index page with the css code but none of the rounded corners were displaying while viewing the site in a web browser, but it showed in dreamweaver.
But I trialed it all on a blank html page and I was able to get one of the rounded corners to display.

The other thing is with the code for the css rounded box (link provided below) that it doesn't provide code for the right hand side for the corner images?

Here's a link to the seperate page:
http://members.optusnet.com.au/j_troy/purple_box.html

Here's the images for the css rounded box(purple box):
http://members.optusnet.com.au/j_troy/images/bl_purple.png
http://members.optusnet.com.au/j_troy/images/br_purple.png
http://members.optusnet.com.au/j_troy/images/tr_purple.png
http://members.optusnet.com.au/j_troy/images/tr_purple.png

And this is the tutorials/site I used for the css rounded box:
http://kalsey.com/2003/07/rounded_corners_in_css/

Thank you for reading this
Hopefully it all makes sense :D
 
Last edited:
B

bluecollar01

New Member
hi jonni,

to remove the rules around your links you need to set the border attribute to "0" as shown below.

<a href="index.html"><img src="images/logo.gif" border="0" /></a>

if you want to use the custom fonts i think your going to have to use images vs text for the nav

for rounded corners you may want to make one top image and one bottom image for your box - that way you get your rounded corners and it's much easier to implement.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Jonni,

You could use the method bluecollar mentioned but, one, you would have to add that border attribute to every image link, and two, that is a inefficient method. The solution is to use CSS.

Here is an example:

Code: 
a img {
border:none;   /* eliminates the border around an image */
outline:0;   /* eliminates the focus, dotted line when a link is clicked */
}
 
J

j0nni

New Member
Ok I've fixed up the nav bar and finally got the css rounded box/corners sorted.
There will be more issues coming up later once I progress through the site.

For the mean time thanks for the help :)
 
J

j0nni

New Member
Alright I've got another question :p

It's to do with images loading up with the lightbox css/script thing.
If you click on the image under latest work you notice that the full sized image doesn't load up smoothly and that it gets blocked by other divs/objects (I think thats the right way of putting it)

I've tried different ideas but had no luck, and tried to find other examples/templates for something similar but nothing really looks right for it.

Thanks again

p.s - Don't mind some of the content, I'll finalize everything later ;)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Jonni,

I chose to use this js-based image gallery instead of Lightbox because it was smaller in file size and very easy to use, and also function well in all browsers. It's called Slimbox (v2). I would suggest checking it out, maybe this will be a great substitute?

Slimbox v.2
 
J

j0nni

New Member
PixelPusher said:
Jonni,

I chose to use this js-based image gallery instead of Lightbox because it was smaller in file size and very easy to use, and also function well in all browsers. It's called Slimbox (v2). I would suggest checking it out, maybe this will be a great substitute?

Slimbox v.2
Click to expand...

thank you, i'll give it ago later on :)
 
U

uptownhr

New Member
Regarding rounded, there is a bug with IE that does not allow this. Try checking it in firefox and chrome. You should see it there.
 
J

j0nni

New Member
That reminds me, I gotta check it out in different browsers as I go along. The rounded circles run pretty well so far, The text in IE8 isn't showing as it's meant to. Firefox displays it correctly, which I'll look into later on.

But that slimbox thing worked good actually thank you :)
 
U

uptownhr

New Member
john, your site looks awfully similiar to another users post below asking for a mentor. Are you the same person?
 
N

northpark

New Member
You should use an unordered list for your navigation

<ul >
<li><a href="link1">Home</li>
<li><a href="link1">Home</li>
</ul>

Then style it with css. Here's and old but still relevant article on using lists for navigation etc.

You could use a font replacement script like cufon to replace the text with your particular font.

If you are going to stick with images at least have an alt attribute e.g. <img src="blahblah.png" alt="Home" /> so that if the image can't be displayed the text will be there in its place.

Also you should validate your site as you work on it http://validator.w3.org/
 
J

j0nni

New Member
I was going to add attributes later on, but I've just changed the navigation to css, it's hard to tell visually but I'll have a play around with it later.
 
You must log in or register to reply here.
Top