21 replies to this topic

[donkeymusic]

i am working on my site and trying to create a gallery, the link i am stuck on is:

http://www.retrodesi...k/Gallery1.html

the problem is: each of the names are in there own divs and i would like them to be positioned 10px up from the surrounding box and central, but i cant seem to get this to line up correct.

anyone have any suggestions?

thanks for any help offered

[greg]

First of all, there's no reason to make a div for each individual line of text. I would just use a header tag.

CSS:

h3 {
font: 12px verdana, arial, sans-serif;
border: 1px solid #000;
width: 150px;
text-align: center;
position: relative;
bottom: 10px;
left: -75px;
margin: 0 0 0 50%;
}

XHTML:

<h3>Text</h3>

That's just off the top of my head, so if there are any issues let me know.

Also, you are using way too many divs in your layout! 90% of the divs you're using are pointless and could be done without. Use the header tag for headers (duh) or short text like you're using; it makes the code cleaner and much shorter.

[donkeymusic]

Hi Greg thanks for getting back to me i will try your suggestion

I am aware that there are too many divs and that it doesnt show up well in safari/firefox but as ths is my first site i am learnig as i go along, ideally want it to be up and running and then will look at ways to improve the site.

do i just insert the header tag as i would a div i the html?

thanks

[greg]

Yeah, same deal.

[donkeymusic]

i have just made the changes which makes the box central, but does not make the box 10px from the bottom this may be because i am viewing it in safari and firefo, could someone test in ie and let me know what happens?

Greg, can you tell me how i can get a border around the images? i have tried several times and can get now where with this?

just a few questions regarding the new code you posted, why is left -75px? and why is margin: 0 0 0 50%;? thanks

thanks

Edited by donkeymusic, 04 February 2006 - 07:22 PM.

[greg]

Giving it a %50 left margin and then moving it back half its own width puts it right in the center. In other words, it just centers the object horizontally.

To give your images a border, assign them a class. A class can be used multiple times on a page, whereas an ID is unique and can only be used once on a page.

CSS:

.borderimage {
border: 1px solid #000;
}

XHTML:

<img src="blah.jpg" alt="blah" class="borderimage" />

For your other question... If the div which contains the header has a set height, you can replace "bottom: 10px;" with "top: XXpx", where XX is the distance from the top of the containing div.

[donkeymusic]

greg, on Feb 5 2006, 12:50 AM, said:

Giving it a %50 left margin and then moving it back half its own width puts it right in the center. In other words, it just centers the object horizontally.

To give your images a border, assign them a class. A class can be used multiple times on a page, whereas an ID is unique and can only be used once on a page.

CSS:

.borderimage {
border: 1px solid #000;
}

XHTML:

<img src="blah.jpg" alt="blah" class="borderimage" />

For your other question... If the div which contains the header has a set height, you can replace "bottom: 10px;" with "top: XXpx", where XX is the distance from the top of the containing div.

greg, i made the change to top 75px which i worked out would be correct but now the top row of names are runnig through the bottom images, any ideas?

[greg]

Can you post a screenshot and the code, so I can get a better idea of what's happening?

[donkeymusic]

Here is what is happening

http://photobucket.com/albums/v489/donkeym...rent=screen.jpg

The code i have is

	<div id="content">
	
	<div id="card_1">
	<div id="galleryphoto"><img src="galleryimages/scarface_red.jpg" class="img" alt="Scarface_Red"></div>
	<div id="galleryphotoname">Scarface Red</div>
	</div>
	
	<div id="card_2">
	<div id="galleryphoto"><img src="galleryimages/scarface_buff.jpg" class="img" alt="Scarface_Buff"></div>
	<div id="galleryphotoname">Scarface Buff</div>
	</div>
	
	<div id="card_3">
	<div id="galleryphoto"><img src="galleryimages/Bruce_Lee.jpg" class="img" alt="Bruce_Lee"></div>
	<div id="galleryphotoname">Bruce Lee</div>
	</div>
	
	<div id="card_4">
	<div id="galleryphoto"><img src="galleryimages/scarface_white.jpg" class="img" alt="Scarface_White"></div>
	<div id="galleryphotoname">Scarface White</div>
	</div>
	
	<div id="card_5">
	<div id="galleryphoto"><img src="galleryimages/scarface_1.jpg" class="img" alt="Scarface_1"></div>
	<div id="galleryphotoname">Scarface 1</div>
	</div>
	
	<div id="card_6">
	<div id="galleryphoto"><img src="galleryimages/scarface_2.jpg" class="img" alt="Scarface_2"></div>
	<div id="galleryphotoname">Scarface 2</div>
	</div>

and the css is

#galleryphoto {
  background-color: #ffffff;
  text-align: center;
  margin-top:10px;
}

#galleryphotoname{
font: 14px verdana, arial, sans-serif;
border: 1px solid #000;
width: 180px;
text-align: center;
position: relative;
top: 170px;
height: 20px;
left: -75px;
margin: 0 0 0 50%;
}

.img {
border: 1px solid #000000;
}

cheers

[greg]

First of all, you're not supposed to use an ID multiple times on a page; that's what classes are for. Also, you're not supposed to give alt tags to divs.

Here's an alternative: Since each image is the same height, you can simply give a top margin to the header text. Make sure to add padding: 0; in case any padding is being cascaded down in the CSS.

[donkeymusic]

greg, on Feb 8 2006, 12:54 PM, said:

First of all, you're not supposed to use an ID multiple times on a page; that's what classes are for. Also, you're not supposed to give alt tags to divs.

Here's an alternative: Since each image is the same height, you can simply give a top margin to the header text. Make sure to add padding: 0; in case any padding is being cascaded down in the CSS.

do you mean the <div id="card_1">,<div id="card_2"> they do have a class set in css.

why no alt tags? i thought that was so that when hovered over the picture it showed the name? or have i got alt tags mixed up with something else?

header text? dont think i have this,

would it help if i sent my whole file system to you?

thanks

[rc69]

When he's talking about the id's he's talking about: <div id="galleryphoto"> and <div id="galleryphotoname">

In html/css, the id attribute is meant to specify a unique id, sort of like in the real world. People have to carry around their own personal id with their picture on it, so people (mainly cop's), and certain businesses that have any kind of security (such as the CIA), can tell you apart from Joe. Same concept applys here.
Change the "id" part to "class" in the html, and the "#" to a "." in the css, and you'll be done with that issue.

As for the alt tags, i think greg went cross-eyed for a sec, because they are in the <img> tags where the belong (that or i'm going blind).

p.s. I know the "CIA" isn't a business, but good luck getting into one of their headquarters without the right id...

Edited by rc69, 08 February 2006 - 05:57 PM.

[donkeymusic]

rc69, on Feb 8 2006, 10:56 PM, said:

When he's talking about the id's he's talking about: <div id="galleryphoto"> and <div id="galleryphotoname">

In html/css, the id attribute is meant to specify a unique id, sort of like in the real world. People have to carry around their own personal id with their picture on it, so people (mainly cop's), and certain businesses that have any kind of security (such as the CIA), can tell you apart from Joe. Same concept applys here.
Change the "id" part to "class" in the html, and the "#" to a "." in the css, and you'll be done with that issue.

As for the alt tags, i think greg went cross-eyed for a sec, because they are in the <img> tags where the belong (that or i'm going blind).

p.s. I know the "CIA" isn't a business, but good luck getting into one of their headquarters without the right id...

but those two ids are different though, i thought class was where you were using like ids? thats why i presumed he meants the ones used for the cards?

bit confused with classes and have read about them before and couldnt get head around them

[rc69]

The id's for the card's are fine. They're unique, like they're supposed to be.
But look at the following block:

	<div id="card_5">
	<div id="galleryphoto"><img src="galleryimages/scarface_1.jpg" class="img" alt="Scarface_1"></div>
	<div id="galleryphotoname">Scarface 1</div>
	</div>
	
	<div id="card_6">
	<div id="galleryphoto"><img src="galleryimages/scarface_2.jpg" class="img" alt="Scarface_2"></div>
	<div id="galleryphotoname">Scarface 2</div>
	</div>

In every single interation of your card sections, you repeat the id's i showed in the last post. Classes are nothing special, think of the way you're currently using the id's. Same concept goes for classes.

Edited by rc69, 08 February 2006 - 06:12 PM.

[donkeymusic]

rc69, on Feb 8 2006, 11:11 PM, said:

The id's for the card's are fine. They're unique, like they're supposed to be.
But look at the following block:

	<div id="card_5">
	<div id="galleryphoto"><img src="galleryimages/scarface_1.jpg" class="img" alt="Scarface_1"></div>
	<div id="galleryphotoname">Scarface 1</div>
	</div>
	
	<div id="card_6">
	<div id="galleryphoto"><img src="galleryimages/scarface_2.jpg" class="img" alt="Scarface_2"></div>
	<div id="galleryphotoname">Scarface 2</div>
	</div>

In every single interation of your card sections, you repeat the id's i showed in the last post. Classes are nothing special, think of the way you're currently using the id's. Same concept goes for classes.

i will look into changing that, although i am sure that the id=cards are not unique they all use the same css settings

[greg]

If they all use the same setting, then why not make it into one class? You'll shorten your CSS by a whole lot.

If you can e-mail me the entire file I would be able to clean it up for you: greg.ny@gmail.com

Edited by greg, 08 February 2006 - 09:56 PM.

[rc69]

I think i'm going blind then, because i don't see a single id="card" in the html you posted. I see:
id="card_1"
id="card_2"
...
id="card_6"

All of which are unique since they have a different number on the end. None of which will be affected by the "#card" selector which i don't see in your CSS either.

[donkeymusic]

greg, on Feb 9 2006, 02:56 AM, said:

If they all use the same setting, then why not make it into one class? You'll shorten your CSS by a whole lot.

If you can e-mail me the entire file I would be able to clean it up for you: greg.ny@gmail.com

would really appreciate that greg, thanks

[greg]

I spent a few minutes cleaning it up a little bit. Of course, it's not the best I can do since I only spent a little bit of time on it and this isn't how I would go about this in the first place.

I took out all the pointless divs and replaced them with a table. You can see how less cluttered it is now:

HTML before:

<div id="card_1">
	<div id="galleryphoto"><img src="galleryimages/scarface_red.jpg" class="img" alt="Scarface_Red"></div>
	  <div id="galleryphotoname">Scarface Red</div>
	</div>
	
	<div id="card_2">
	<div id="galleryphoto"><img src="galleryimages/scarface_buff.jpg" class="img" alt="Scarface_Buff"></div>
	  <div id="galleryphotoname">Scarface Buff</div>
	</div>
	
	<div id="card_3">
	<div id="galleryphoto"><img src="galleryimages/Bruce_Lee.jpg" class="img" alt="Bruce_Lee"></div>
	  <div id="galleryphotoname">Bruce Lee</div>
	</div>
	
	<div id="card_4">
	<div id="galleryphoto"><img src="galleryimages/scarface_white.jpg" class="img" alt="Scarface_White"></div>
	  <div id="galleryphotoname">Scarface White</div>
	</div>
	
	<div id="card_5">
	<div id="galleryphoto"><img src="galleryimages/scarface_1.jpg" class="img" alt="Scarface_1"></div>
	  <div id="galleryphotoname">Scarface 1</div>
	</div>
	
	<div id="card_6">
	<div id="galleryphoto"><img src="galleryimages/scarface_2.jpg" class="img" alt="Scarface_2"></div>
	  <div id="galleryphotoname">Scarface 2</div>
	</div>

Now:

<table id="gallery"><tr><td>
	<img src="galleryimages/scarface_red.jpg" alt="Scarface_Red" />
	<p>Scarface Red</p>
</td><td>
	<img src="galleryimages/scarface_buff.jpg" class="img" alt="Scarface_Buff" />
	<p>Scarface Buff</p>
</td><td>
	<img src="galleryimages/Bruce_Lee.jpg" class="img" alt="Bruce_Lee" />
	<p>Bruce Lee</p>
</td><td>
	<img src="galleryimages/scarface_white.jpg" class="img" alt="Scarface_White" />	  
	<p>Scarface White</p>
</td></tr><tr><td>
	<img src="galleryimages/scarface_1.jpg" class="img" alt="Scarface_1" />	  
	<p>Scarface 1</p>
</td><td>
	<img src="galleryimages/scarface_2.jpg" class="img" alt="Scarface_2" />
	<p>Scarface 2</p>
</td></tr></table>

CSS got cleaner too. Before:

div#card_1,
div#card_2,
div#card_3,
div#card_4,
div#card_5,
div#card_6{
  margin: 0px;
  width: 240px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

div#card_1{
  float: left;
}

div#card_2{
  float: left;
  margin-left: 9px;
  margin-right: 9px;
}

div#card_3{
  float: left;
}

div#card_4{
  float: left;
  margin-top:10px;
}

div#card_5{
  float: left;
  margin-left: 9px;
  margin-right: 9px;
  margin-top:10px;
}

div#card_6{
  float: left;
  margin-top:10px;
}

#navigation{
  color: #000000;
  font-family: geneva, Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  width:700px;
}

#galleryphoto {
  background-color: #ffffff;
  text-align: center;
  margin-top:10px;
}

#galleryphotoname{
font: 14px verdana, arial, sans-serif;
border: 1px solid #000;
width: 180px;
text-align: center;
position: relative;
top: 170px;
height: 20px;
left: -75px;
margin: 0 0 0 50%;
}

.img {
border: 1px solid #000000;
}

And now:

#gallery {
	clear: both;
	width: 700px;
}

#gallery td {
	width: 165px;
	height: 165px;
	padding: 0;
	margin: 0 5px 0;
	text-align: center;
}

#gallery img {
	padding: 0;
	margin: 0;
}

#gallery p {
	vertical-align: bottom;
	margin: 5px 0 10px;
	padding: 0;
	background: #fff;
	font: 14px verdana, arial, sans-serif;
}

Again, this is just a sketchy 10-minute job just to get you rolling. Work on it from here and fix it up to suit your needs.

Oh yes, and to make the text be on the bottom of its container you need to use "vertical-align:bottom;" as I did above. I forgot to mention that earlier on.

Edited by greg, 09 February 2006 - 03:25 PM.

[Hoot]

I can not say im a complete expert at using <div> but I know some because I have coded sites with them any if you change the "#" to "." (im not sure if all of this was mentioned) you need to change some in your html too, change the "id" to "class" (for the "." only)

Hoot