Trip is in denial? CSS vs HTML

Give him a break, the first project is never awesome :^) I think the site looks great trip, good job!
But old way's do die hard....
<div class="table"/><div class="row">
Click to expand...
Now, just keep working on improving your skills, you could go places.
 
Yea thanks everybody.
I'm still working with the code. I had to figure a lot of it out on my own.

As for the blank paragraph code: how the crap do make spaces between my images?

[EDIT: Later today does anybody have the time to help me go over the code and clean it up with me?]
 
Your best friend in CSS will be the margin and padding properties... you could add say, 20px margin to the top and bottom of your images? You could do this to all images, such as:

Code: 
img {
margin: 20px 0;
}

I've used shorthand here (you'll do well to learn that as well). This shortens down something like this:

Code: 
img {
margin-top: 20px;
margin-bottom: 20px;
}

and this:

Code: 
img {
margin: 20px 0 20px 0;
}

You can do this with padding as well. Basically, from the first value (20px) above, this is the top margin, and work round clockwise, thus the following 0 would be the right margin, the next 20px the bottom, and the final 0 the left margin.

If you do just (
Code: 
margin: 20px 0;
) this makes top and bottom 20px and left and right 0.
 
If you don't want all images to have these spaces, then just class them (or if there is just one of them, id the image).

Such as:
Code: 
<img class="imgSpc" src="#" alt="" />

or:

Code: 
<img id="imgSpc" src="#" alt="" />
 
By the way, forgot to mention... looks nice. You're code does need to be sharper, but you'll figure it out. I'd suggest buying Zeldman's Designing with Standards at this point. Now that you know what it's all about, this book well speed you along very quickly.

By the way, that Validated! graphic looks vaguely familiar! :confused: :rolleyes:
 
Oh I totally understand you guys. At first I really felt offended by your comments, but I realized THIS IS MY FIRST CSS WEBSITE! So thanks to everybody for the comments! I'll be sure to work on my code!

And uoba: yes I stole that image from you (only not really). ;)
 
Interesting, looks good, Trip.

If you want some more direction in designing with XHTML/CSS, I suggest you examine my site, which soon enough will be www.jabmulti.uni.cc (as soon as the DNS servers resolve, if they haven't already). My site fully validates except for the DTD declaration, which isn't the first line because the host adds something to the pages... not entirely my fault, but annoying no less.
 
2 quick questions that I can seem to find (I havn't even tried to code it myself yet, but whatever):

1. How do I setup a "image" class through CSS and then link to it in the HTML?

2. How do I make an image link to another page/website?
 
ok - the simplest thing to do in the css to affect all your images is to just use the selector img { ... }, which will affect all the <img /> tags in the document.
And to make an image into a link just put it into an anchor, like so: <a href="#"><img src="d" /></a>
also, you could give certain images a certain class, like <img class="icon" />, and call those images into your css like .icon for short. Also img.icon for long.
 
1. As my example earlier with the image (img) css tag. Simply create a link to your CSS file in your HTML file (as you've already done with your page.css file I notice). Within this CSS file, put this code in:

Code: 
img {
      border: none;
      margin: 1em;
}

Obviously, change the properties with the { } to whatever you need to. This code will affect ALL <img ... > tags in your code. Here's an example I've done for you:

http://c-o2.net/dev/public/

as for making an image a link... same as you ever did! Use the HTML img tag within your <a href... tag. Thus:

Code: 
<a href="#"><img src="someimage.gif" alt="" /></a>

But you knew this already! No need to confuse issues ;)
 
happens to me all the time uoba, no problem.
And I was looking for some help with this css nav menu I have been working on. I got it to look decent in safari, but it seems that safari treats the background images applied to the ul wrong. The menu looks pretty bad in any browser besides safari -- I mainly want to make it work in mozilla, I won't worry too much about mac ie. I haven't tested it in IE windows for awhile, but at my last test it worked great.
One of the biggest problems that I have is that on the background property for the first and last items the background applied to the li (for the top) needs to be set as ... bottom left; when it should be ... top left;, this makes it work in safari but breaks it in all the other browsers I have tried. The other big problem is that I couldn't figure out how to make a transparent png with a transparent grey curve be white (and non-transparent, while the other side remained transparent. Whenever I did a paint can on the bottom where I wanted the white, it obliterated the curve, which was no good.
I posted a comp at http://kao.sytes.net/menu/, with all the images in here and the photoshop files of the erspective images in here. Any help I could get with this would be great - I kinda hit a brick wall once I got it to work in safari.
And another thing - in safari 1.0 on panther there is a bug where when you have a li floated left with a transparent background, the transparency gets all messed up. Are the two images below the menu bar the same color and tone as the background of the menu bar? Or are they significantly lighter in Safari 1.1?
 
Could you post a screenshot of what you want it to look like? I'm using IE and NS, as usual, and I can't check it in Safari, but if I can see the end result I can get a better idea of what you might need to do.

Also I suggest you play around with ImageReady and see how it formats your stuff.
 
ok, I posted some (albiet large) good images of what both firebird and safari 1.0 (jaguar) show for the menu. they can be found on my site; safari and mozilla.
edit: here is what the menu looks like in mozilla (what it should look like...) when I remove the hack I used to get it to work better in safari. Now in safari it looks exactly like it should look in mozilla... ugH :^)
 
Is this any better/worse? What are you looking for?
 

Attachments

  • top_menu_bg_topleftbottom2b.png
    top_menu_bg_topleftbottom2b.png
    606 bytes · Views: 10
That looks a lot better racerX - could you give me a quick rundown of how you got it? did you just do it by hand or use a filter/brush? Whenever I tried to the background eraser tool it would erase the line, and when I tried the magic wand it would select the line.
 
I created a new layer and used the elliptical marquee tool to make a circle that touched the inner edges of the horizontal and vertical line elements of the original where the original curve started and ended. I filled that with black. I copied that layer and use free transform to change the percent of the new layer to increase its size (I think it was 103%) to get the circle of the new layer too touch the outer edges of the horizontal and vertical line elements of the original where the original curve started and ended. I use a white fill out side of the second layers circle to match the white areas of the original. I used the first new layer I made as a mask to remove both the center of the filled circle in the second new layer and any part of the original that may have edged out a little. Removed the new layer. Removed all but the bottom corner of the circle which matched the original curve (with the white filled corner), then merged down. The final element was saved after transferring it to ImageReady.

I would think you would only ever need to do this once as the other four corners can be generated from your first in other project

I started doing this when curves made in Illustrator and AppleWorks didn't look as nice as I wanted them to when bringing them into Photoshop. I would guess there is an easier way, but this works. I still use the drop shadow technique I started using back in Photoshop 3 today because it gives me a freedom that the drop shadow tool doesn't.

What was funny was that I was already in Photoshop doing some of the same type of touch-ups when I read your post. :D

Oh, I still had the original photoshop file.
 
You must log in or register to reply here.
Back
Top