Store || Gallery

The value of this forum is in the interaction with your fellow glowers and car enthusiasts.
Register today! - It is FREE and quick

Today (0)

Yesterday (8)

I Can't Code

Goto page 1, 2 Next

Oznium Forum -> Everything Else

Author

Message

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Mon Nov 19, 2007 12:19 am

I'm having some trouble. I'll give a cookie to the person who can help me out.

My problem:

As you can see, the box with the dashed border doesn't grow with the content inside it. The code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome to Tim's Site</title>

   <style type="text/css" media="screen">

a:hover {
padding-top: 3px;
padding-bottom: 3px;
display: inline;
text-decoration: underline;
}

.banner {
background-image: url('banner.jpg');
background-repeat: no-repeat;
height: 100px;
border-bottom: solid 1px #000;
}

.main {
text-align: center;
}

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

.nav {
text-align: center;
border-bottom: solid 1px #000;
padding: 2px;
}

ul{
margin: 0px;
border-bottom: solid 1px #000;
text-align: center;
}

li {
list-style-type: none;
padding: 3px;

}

</style></head>

<body>

<div id="content">

<div class="banner"></div>

<ul>
<li>
|
<a href="home.htm">Home</a> |
<a href="gallery.htm">Gallery</a> |
</li>
</ul>

<br />

<div class="main">

<div class="content-left">

Testing Content Left

</div>

<div class="content-right">
Welcome to my gallery site. Soon to be updated with all the pictures I've taken.<br/> Check back soon!
<br />
<br />

<a class="thumbnail" href="#thumb"><img src="thumb1.jpg" width="100px" height="100px" border="0" /><span><img src="thumb1.jpg" /><br />Guitar.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb2.jpg" width="100px" height="100px" border="0" /><span><img src="thumb2.jpg" /><br />Can of Pepsi.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb3.jpg" width="100px" height="100px" border="0" /><span><img src="thumb3.jpg" /><br />Duck.</span></a>

</div>

</div>
</div>

</body>
</html>

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Mon Nov 19, 2007 1:31 am

This should work. Let me know if it doesn't.

You need to add a "clear" div in order to tell the container to expand to the width of the content.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome to Tim's Site</title>

   <style type="text/css" media="screen">

a:hover {
padding-top: 3px;
padding-bottom: 3px;
display: inline;
text-decoration: underline;
}

.banner {
background-image: url('banner.jpg');
background-repeat: no-repeat;
height: 100px;
border-bottom: solid 1px #000;
}

.main {
text-align: center;
}

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

.nav {
text-align: center;
border-bottom: solid 1px #000;
padding: 2px;
}

ul{
margin: 0px;
border-bottom: solid 1px #000;
text-align: center;
}

li {
list-style-type: none;
padding: 3px;

}

.clear {
clear: both;
}

</style></head>

<body>

<div id="content">

<div class="banner"></div>

<ul>
<li>
|
<a href="home.htm">Home</a> |
<a href="gallery.htm">Gallery</a> |
</li>
</ul>

<br />

<div class="main">

<div class="content-left">

Testing Content Left

</div>

<div class="content-right">
Welcome to my gallery site. Soon to be updated with all the pictures I've taken.<br/> Check back soon!
<br />
<br />

<a class="thumbnail" href="#thumb"><img src="thumb1.jpg" width="100px" height="100px" border="0" /><span><img src="thumb1.jpg" /><br />Guitar.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb2.jpg" width="100px" height="100px" border="0" /><span><img src="thumb2.jpg" /><br />Can of Pepsi.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb3.jpg" width="100px" height="100px" border="0" /><span><img src="thumb3.jpg" /><br />Duck.</span></a>

</div>

<div class="clear"></div>

</div>
</div>

</body>
</html>

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Mon Nov 19, 2007 1:35 am

You could also add in a separate class for the thumbnail images, and remove some excess HTML. Something like....

Code:

.thumb {
width: 100px;
height: 100px;
border: 0;
}

...

<a class="thumbnail" href="#thumb"><img src="thumb1.jpg" class="thumb"></a>

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Mon Nov 19, 2007 1:35 am

Works great. Guess I need to do some reading on the clear:both attribute. Thanks.

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Mon Nov 19, 2007 1:36 am

Yup. Check out clear: left and clear:right, too. They come in handy at weird times.

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Thu Dec 20, 2007 4:24 pm

Instead of making a new thread, I've decided to bump my old one. What are your opinions?

Also, if anyone has some hosting with PHP support and about ~50MB to spare I'd love to be able to host the site on the net, for testing and such.

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Thu Dec 20, 2007 5:04 pm

Site isn't anything fancy, but looks like it does what you want it to.

I'll give you a subdomain if you want. Lots of space and bandwidth to share.

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Thu Dec 20, 2007 5:19 pm

Yeah, I really didn't want it to be anything fancy. Just pretty straight forward and clean. I still might change some things, like navigation buttons instead of the text links up top. If anyone has any suggestions, I'm all up for them.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Thu Dec 20, 2007 9:30 pm

ill give you hosting, domain (voolia.com), php support, and unlimited mysql db's for a few months (3 or 4)
aim: kevinsmoo or pm me

Brandon

Joined: Jun 04 2003
Posts: 4185
Location: St. Louis, MO

Gallery

1994 Mazda MX-3
Last updated: 09/06/06

2005 Geo Metro
Last updated: 06/16/04

2006 Subaru Legacy
Last updated: 06/18/06

Are you sure you want to delete this post?

Thu Dec 20, 2007 10:39 pm

Tim wrote:

I'm having some trouble. I'll give a cookie to the person who can help me out....

Remove the very first line of your code. Your page is NOT an XML document. xHTML !== XML. Internet Explorer will be kicked to "quirks mode" if the very first line of the document is not your doc type (no exceptions), and that can cause more headaches than anything else you will ever come across.

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Thu Dec 20, 2007 11:10 pm

ah, good to know. Here's an updated copy. I've made changes since it was first posted.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome to Tim's Site</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="content">

<div class="banner"></div>

<div class="nav">
|
<a href="home.htm">Home</a> |
<a href="gallery.htm">Gallery</a>
|
</div>

<br />

<div class="main">

<div class="content-left">

<?PHP
$number=5;
include("\news\show_news.php");
?>

</div>

<div class="content-right">
Welcome to my gallery site. Soon to be updated with all the pictures I've taken.<br/> Check back soon!
<br />
<br />

<a class="thumbnail" href="#thumb"><img src="thumb1.jpg" class="thumb" alt="Guitar" /><span><img src="thumb1.jpg" alt="Guitar"

/><br />Guitar.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb2.jpg" class="thumb" alt="Pepsi" /><span><img src="thumb2.jpg" alt="Pepsi" /><br

/>Can of Pepsi.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumb3.jpg" class="thumb" alt="Duck" /><span><img src="thumb3.jpg" alt="Duck" /><br

/>Duck.</span></a>

</div>

<div class="clear"></div>

</div>
</div>
<br />
<div class="content-bottom">

<img src="icons/png-24/24-rss-square.png" alt="rss" /> <img src="icons/png-24/24-email-b.png" alt="email" />

</div>

</body>
</html>

Brandon

Joined: Jun 04 2003
Posts: 4185
Location: St. Louis, MO

Gallery

1994 Mazda MX-3
Last updated: 09/06/06

2005 Geo Metro
Last updated: 06/16/04

2006 Subaru Legacy
Last updated: 06/18/06

Are you sure you want to delete this post?

Fri Dec 21, 2007 8:02 am

Much improved. What's

Code:

Would it be better used as an <img> tag?

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Fri Dec 21, 2007 10:07 am

Brandon wrote:

Much improved. What's

Code:

Would it be better used as an <img> tag?

Code:

.banner {
background-image: url('banner.jpg');
background-repeat: no-repeat;
height: 100px;
border-bottom: solid 1px #000;
}

I could probably use a <img> tag. For some reason I thought this would be better. I dunno, I'm a newb coder.

Brandon

Joined: Jun 04 2003
Posts: 4185
Location: St. Louis, MO

Gallery

1994 Mazda MX-3
Last updated: 09/06/06

2005 Geo Metro
Last updated: 06/16/04

2006 Subaru Legacy
Last updated: 06/18/06

Are you sure you want to delete this post?

Fri Dec 21, 2007 5:47 pm

KISS - Keep It Simple on Sunday's (or something like that

)

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Fri Dec 21, 2007 6:20 pm

Keep It Simple, Stupid!

FYI: Try using a hierarchy when writing your code - don't make it all on in one column. It'll be easier to follow. For example, look at mine: www.akeninc.com

Last edited by Aken on Fri Dec 21, 2007 6:23 pm, edited 1 time in total

BLAZER_97

Joined: Apr 10 2007
Posts: 1481
Location: Decatur TX

Gallery

1997 Chevrolet Blazer
Last updated: 07/08/09

1991 Isuzu Impulse
Last updated: 06/12/07

Are you sure you want to delete this post?

Fri Dec 21, 2007 6:22 pm

woa

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Fri Dec 21, 2007 7:55 pm

there's somewhat of a hierarchy to my coding (

)...just depends on what kind of mood i'm in and how many times I have to go error fuxing.

I do need to do some cleaning, though...

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Fri Dec 21, 2007 11:00 pm

CSS makes the world go round.

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Fri Dec 21, 2007 11:57 pm

Unless you're Kevin

Chris

Joined: Sep 27 2004
Posts: 2023
Location: NY

Gallery

1993 Mitsubishi Eclipse
Last updated: 11/06/06

1984 Mazda RX-7
Last updated: 04/28/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 12:51 am

Or me. ^

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Sat Dec 22, 2007 1:50 am

At least you WANT to use CSS. Kevin just gets confused and says screw it

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 9:55 am

Now a days there is almost now way around using css. It's the greatest tool for web designers everywhere. Code the website once, make changes to the external style sheet, brand new look. I love it.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 3:16 pm

Chris wrote:

Or me. ^

Sounds like we'd get along lol...
I think CSS is beautiful is you want to pour in hours upon hours of trial and error "pixel hunting"...
if I'm going to do that, why not just use flash and js and go all out?

css is a fad in the "web 2.0" world. I can't wait until something replaces it.

Aken

Joined: Feb 12 2003
Posts: 9570

Are you sure you want to delete this post?

Sat Dec 22, 2007 3:23 pm

The only pixel hunting I do is when I use an element I don't do very often, and has different padding and margin properties in different browsers (fieldset comes to mind). If you know what you're doing, there's very little problem solving involved because you already know the problems and how to avoid them

Chris

Joined: Sep 27 2004
Posts: 2023
Location: NY

Gallery

1993 Mitsubishi Eclipse
Last updated: 11/06/06

1984 Mazda RX-7
Last updated: 04/28/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 3:49 pm

Thats the thing....if you know what youre doing.

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 5:32 pm

While flash sites and such are flashy, you can't optimize them for web use well. Search engines cannot pick them up like they can with a standards based xhtml site. And what the heck is pixel hunting? CSS is so easy to use. Plus I'd like to see how well you can program actionscript 3.0. Is that just a fad too?

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 6:48 pm

RadioFlyer1998 wrote:

Flash/ajax style websites are the future.
Let's see some of your work

Chris

Joined: Sep 27 2004
Posts: 2023
Location: NY

Gallery

1993 Mitsubishi Eclipse
Last updated: 11/06/06

1984 Mazda RX-7
Last updated: 04/28/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 7:44 pm

Kevin_S wrote:

RadioFlyer1998 wrote:

Flash/ajax style websites are the future.
Let's see some of your work

Flash is already here. More and more sites are using that and it gets irritating. You hit the back button and you go back to wherever you started from, in my case anyways.

Radio - I want to see some of your work. Youre talking great about it but I have never seen any of it, ever. Im just curious as to what you do. Im not flaming or anything, lol.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 7:54 pm

Yeah, I agree -- flash can be very annoying if it's not done properly/"overdone"

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 7:57 pm

The next version of html, html 5, is built around the way we use css.

Sorry, flash is not the future, you just can't optimize it for search engines. Don't get me wrong, I love flash, I just coded four games in AS 3.0, but in the professional world, companies want optimization.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:02 pm

Kevin_S wrote:

Let's see some of your work

RadioFlyer1998 wrote:

Optimization will come -- both from the search giants and from software giants.
[sarcasm/humor]I also believe we will be flying on waffles by the year 2054...[/sarcasm/humor]

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:32 pm

And since my work somehow reflects on how much I know about the field, you have to wait. I'm building my portfolio now. I'm going to try to put bits and pieces of things everywhere.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:42 pm

http://mysite.verizon.net/apfelkuchen/ from profile
http://web.pasd.k12.pa.us/phantomband/ quick google
edit: not picking or anything -- just having conversation about webdesign and future trends. It's interesting to trade ideas and share work.

Aken and I had a funny conversation a week or so ago about how sucky our websites were only a few years ago (and how sucky mine still are LOL!)

Last edited by Kevin_S on Sat Dec 22, 2007 8:48 pm, edited 1 time in total

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:44 pm

verizon site is garbage, plus no room, they only give me 5MB of space. PAHS band i did with my mother a few years ago.

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:51 pm

I don't really think CSS is a fad which will soon be replaced.

Then again, I don't know a lot. Just my opinion.

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:53 pm

It has definitely made its place in "history" -- I love to check smashingmagazine.com just to see what beautiful things are being done with css...

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 8:55 pm

www.alistapart.com is my source and go to place about web stuffs.

Tim

Joined: Nov 16 2003
Posts: 10360
Location: Kalamazoo, MI

Gallery

1998 Pontiac Grand Am
Last updated: 03/11/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 9:39 pm

Alright ladies...

"font-size: "

px vs em

GO!

Kevin_S

Joined: Jul 20 2003
Posts: 2751
Location: WV

Gallery

2004 Chevrolet Cavalier
Last updated: 02/04/09

Are you sure you want to delete this post?

Sat Dec 22, 2007 9:43 pm

em from what I know.

When I did read what I studied on css, I personally believe using percentages is best. Aken the css geek needs to get his ass in here...it's like he's trying to have a life off the computer or something...

RadioFlyer1998

Joined: Jun 25 2004
Posts: 341
Location: Phoenixville, PA

Gallery

1998 Ford Escort
Last updated: 08/12/06

1996 Ford Escort
Last updated: 04/24/07

Are you sure you want to delete this post?

Sat Dec 22, 2007 9:47 pm

Depends on what you want to do. Pixels are static and do not adjust based on font size. You can use ems for more than text. If you a building a site with accessibility in mind (like vision impairment), it's best to size things based on ems. This way everything scales based on the em size.

The time now is Thu Mar 18, 2010 10:16 pm
Goto page 1, 2 Next

Oznium Forum Index -> Everything Else

Page 1 of 2