Zaloguj | Zarejestruj | FAQ
Anonymous

Best way to organize images?

+ Odpowiedz

Posty: 8 Strona 1 z 1


Best way to organize images?

przez Maffia » Pt lis 05, 2010 4:57 pm

Hello,
I am making a fine artist website. I intend to include 12- 20 images on each page. I want to display them in a grid and make each one a link to a larger/magnified view. I am new to CSS and HTML. So far I have just inserted images into HTML. What is the best way to lay them out in CSS? I would like the images to be about 4 rows of 4 images each. Can anyone recommend a specific code? I want the image grid centered in the browser window too.
Thank you in advance.
-J
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm

Re: Best way to organize images?

przez Maffia » Pt lis 05, 2010 7:11 pm

I decided to use the <div> align=center tag with some padding around each image. Then I am hyperlinking each image and displaying the magnified image on its own page. Logical? Works for me, but I would be interested in learning alternatives. HTML tables seem tedious. . .

Maffia napisał(a):Hello,
I am making a fine artist website. I intend to include 12- 20 images on each page. I want to display them in a grid and make each one a link to a larger/magnified view. I am new to CSS and HTML. So far I have just inserted images into HTML. What is the best way to lay them out in CSS? I would like the images to be about 4 rows of 4 images each. Can anyone recommend a specific code? I want the image grid centered in the browser window too.
Thank you in advance.
-J
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm

Re: Best way to organize images?

przez HTML.net » Pt lis 05, 2010 9:14 pm

I think I would use a list. Something like this (I havn't tested it):

HTML:

<ul>
<li><a href="image1.jpg"><img src="image1_tumbnail.jpg" alt="image" /></a>
<br />Image 1</li>
<li><a href="image2.jpg"><img src="image2_tumbnail.jpg" alt="image" /></a>
<br />Image 2</li>
</ul>

CSS:

ul {
width: 600px;
margin-left: auto;
margin-right: auto;
}

li {
display: inline;
list-style: none;
float: left;
margin: 10px;
width: 100px;
min-height: 100px;
}


But div's would be fine trick as well.

I am looking forward to see the result.

- Andreas, HTML.net
Avatar użytkownika

HTML.net
Site Admin

  • Posty: 1194
  • Dołączył(a): So wrz 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Best way to organize images?

przez Maffia » Pn lis 08, 2010 5:32 am

Thank you both very much for you replies, I really appreciate how quickly you responded.
I have a follow up question:

How/where can I specify in HTML or CSS the exact size I would like my images and text to fall within? i.e 800 by 600px? I use the text editor Bluefish . . .
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm

Re: Best way to organize images?

przez Maffia » Pn lis 08, 2010 5:36 am

And how would I create a border around the perimeter of the site (which would only be visible on monitors that were larger than the site's dimensions?)
Thank you in advance

-Jessica
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm

Re: Best way to organize images?

przez HTML.net » Wt lis 09, 2010 9:50 am

Maffia napisał(a):How/where can I specify in HTML or CSS the exact size I would like my images and text to fall within? i.e 800 by 600px?

And how would I create a border around the perimeter of the site (which would only be visible on monitors that were larger than the site's dimensions?)


Try something like this:

CSS:

body {
background: red;
}

#content {
min-height: 600px;
min-width: 800px;
background: blue;
margin-left: auto;
margin-right: auto;
}

HTML

<body>
<div id="content">
(all your content goes here)
</div>
</body>

Does it help?

- Andreas, HTML.net
Avatar użytkownika

HTML.net
Site Admin

  • Posty: 1194
  • Dołączył(a): So wrz 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Best way to organize images?

przez Maffia » Śr lis 10, 2010 1:50 am

Oh Andreas, thank you, but it's not working for some reason . . . I will try again . . .
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm

Re: Best way to organize images?

przez Maffia » Pt lis 12, 2010 3:00 pm

Dear Andreas,
I tried your code for a border. But it is not quite what I am looking for. I want to keep the whole background white and just have a thin light gray border 800 x 600 as a frame around the content of the site. Any alternative suggestions?

Thank you in advance!
-Jessica
Avatar użytkownika

Maffia

  • Posty: 11
  • Dołączył(a): Cz lis 04, 2010 11:01 pm


+ Odpowiedz

Strona 1 z 1