HTML Help Options

[pezza]

Hi,

I'm a new member here, and new to HTML and CSS

I'm trying to edit my girlfriends website to make some changes to the photo gallery. Basically I want to do four things:

Move the title of each photo below the photo
put a border round each photo
put a description of each photo to the right of each phot (there is a description field for each photo currently and I can add the html code to each one separatly but I figure there must be an easier way?)
Have more than one photo per page

I got someone to design the site for me and I'm editing it using Drupal. I guess I can do all these things in the CSS but I can't figure out how!

Here's a link to one of the gallery pages so you can see

I'm happy to discuss this via email with anyone who can help

[Frederiek]

You have forgotten to post the url to a gallery page.

[pezza]

You have forgotten to post the url to a gallery page.

Here's the link http://www.ladyhbakes.co.uk/gallery/5

[Frederiek]

1. Switch the two DIV's, so first the one with the picture, then the one with the text.

2. They already have a border defined by #content img.

3. You mean on the page once you clicked an image? Of the few images I tested, only the first image has a description. The text DIV is now float: left;. You can set it to float: right; and then add some left margin to put the image and text closer.

4. I don't quite understand that. Maybe you need another method all together.

I don't know how you code the pages, but it's quite a tag soup. I hope you don't mind I say this, no offence meant.

Anyway, pass your page(s) through the HTML markup validator (links at top and bottom of this page) and CSS validator at http://jigsaw.w3.org/css-validator/ . The only CSS errors that you can ignore are related to vendor prefixes (eg -webkit-) for text-shadow and such.

[pezza]

1. Switch the two DIV's, so first the one with the picture, then the one with the text.

2. They already have a border defined by #content img.

3. You mean on the page once you clicked an image? Of the few images I tested, only the first image has a description. The text DIV is now float: left;. You can set it to float: right; and then add some left margin to put the image and text closer.

4. I don't quite understand that. Maybe you need another method all together.

I don't know how you code the pages, but it's quite a tag soup. I hope you don't mind I say this, no offence meant.

Anyway, pass your page(s) through the HTML markup validator (links at top and bottom of this page) and CSS validator at http://jigsaw.w3.org/css-validator/ . The only CSS errors that you can ignore are related to vendor prefixes (eg -webkit-) for text-shadow and such.

I didn't code this - a web designer did it for me.

Yes, there is only one description on the photo and I had to add the html tag myself before the text to get it to float to the right - I want that to be set automatically.

Where did you find the code - did you right click and "view source"? If so, I don't know where to find that code in all the source files - I've searched but I can't see it

[Frederiek]

So you paid for that stuff?
That web designer made things more complicated than necessary.

I use Safari (Mac), which has a Web Inspector. So, I select something on a page, then right-click to access the Web Inspector, which shows me the selected element in the HTML code and the applied CSS in a two-panes palet. Firefox and Chrome seem to have something similar.

You indeed added the CSS inline in the DIV, but most styles for your page(s) are declared in styles.css. So you could add a class there and apply your DIV styles in that class selector. Then all you have to do is a batch search/replace to replace the DIV inline style with class="classname" in all your pages.

[pezza]

so how can i make the border round the photos thicker?
and how can i move them so they aren't so close together?

The thing about more than one photo per page - what i want is to have say three photos of each cake per page so people can see different views of each cake. Maybe say have a small one in each corner that expands when you clik on it - or is that too hard? Failing that have them vertically?

[pezza]

oh and what class="classname" do you suggest?

[Frederiek]

so how can i make the border round the photos thicker?

The images get their border from (line 282 in themes/koi/css/style.css?4):

CODE

#content img {
    border: 2px solid #000000;
}

Just change the pixel value.

and how can i move them so they aren't so close together?

Many of the tags used have class attributes, but no styling is applied to them. The gallery is contained in TABLE class="views-view-grid". You could set the table to 100% width, and set each TD (with classes: col-1, col-2 and col-2) to text-align: center;.

Your question about the multiple pictures for the "result" page surely can be done. But I don't have a direct solution at hand.

oh and what class="classname" do you suggest?

How about image_caption, photo_caption, img_description or whatever? As long as its meaningfull.

[pezza]

so how can i make the border round the photos thicker?

The images get their border from (line 282 in themes/koi/css/style.css?4):

CODE

#content img {
    border: 2px solid #000000;
}

Just change the pixel value.

and how can i move them so they aren't so close together?

Many of the tags used have class attributes, but no styling is applied to them. The gallery is contained in TABLE class="views-view-grid". You could set the table to 100% width, and set each TD (with classes: col-1, col-2 and col-2) to text-align: center;.

Your question about the multiple pictures for the "result" page surely can be done. But I don't have a direct solution at hand.

oh and what class="classname" do you suggest?

How about image_caption, photo_caption, img_description or whatever? As long as its meaningfull.

The coding for the gallery is attached - which lines would I need to alter?

Also how do I change the size of the enlarged photos - for example here: http://www.ladyhbakes.co.uk/node/24 so they are smaller so I can put text on the right hand side of each one?

[Frederiek]

The attached file isn't CSS, but a piece of your HTML file.

Just open the style.css (http://www.ladyhbakes.co.uk/themes/koi/css/style.css?4) in a text-ditor and find line 282 where the #content img is styled and change the 2px to whatever width you like.

For the TABLE, that already has a class of .views-view-grid, there is no styling yet. You'll have to add that yourself. Nor for the TD' with class col_1 etc.

The styling you added yourself inline in the DIV tag (on the pages with enlarged images):

CODE

<div style="width:220px;float:right;text-align:left;padding:10px;line-height:20px;font-weight:none;">...</div>

could be placed in the CSS file too, using one of the classnames I suggested. Then your div tag should be:

CODE

<div class="chosen_classname">...</div>

If you want to have the enlarged images smaller, you'll have to resize them in the graphic software of your choice (Photoshop, GIMP, ...).

[blond22]

Guys, I need help. I am very beginner in html. I wrote a page, but text in the middle should be in the middle in high (as well as in wide), and take about 1/3 of the white space in high all the time (when you restore down the page). And text in the footer should be in 3 columns, and look like menu, but not like links.
Here is my test page
http://design.pindosiya.com/

I will really appreciate the code
Thank you

[Darin McGrew]

For centering vertically, see:
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/journal/how-to-ve...tering-with-css

For columns, you can either use tables, or you can use CSS, for example:
http://www.glish.com/css/
http://blog.html.it/layoutgala/
http://www.maxdesign.com.au/articles/css-layouts/
http://webhost.bridgew.edu/etribou/layouts/skidoo/
http://bluerobot.com/web/layouts/

In what way do you want it to look "like menu" but not "like links"?

[blond22]

...In what way do you want it to look "like menu" but not "like links"?

I don't want it to be blue, to change the color and to be underlined... I need it to stay always the same color (white). They will link to the other pages of my website.
Well you can check it, I did some changes in the footer.
code of my footer now looks like this:

CODE

</div>
    <div id="footer">

<P ALIGN="CENTER">
<font size="4" face="Areal" color="ffffff">
Here should be menu with three columns and 3 lines which would link to all other pages
but how should the code look like?
</font>

</P>
</div>
    </body>
    </html>

please help

This post has been edited by blond22: Jun 21 2011, 08:41 PM

[Darin McGrew]

Please see the FAQ entry How can I have two sets of links with different colors?

[Frederiek]

For the columns, you can merely use the same kind of code as in this ALA article (to which Darin pointed in another thread ) http://www.alistapart.com/articles/practicalcss/ . But instead of using images, you can use unordered lists (UL) (see http://css.maxdesign.com.au/listamatic/ ).