14 replies [Last post]
ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

I am am a beginner and trying to make a web page with a header , three
columns and a footer. I took the layout from here:
<http://www.fu2k.org/alex/css/index.mhtml> -----
(3Col_NN4_FFFF)---column order 2,1,3 and col widths 50,25,25
respectively

In the center column I want to place two small images side by side with the help of CSS ---- one to the extreme left and the other to the extreme right of the center column ---I do not know how it is to be done.

My doing the following { } keeps the images one under the second.


{<p>Yogi Weds Vandana</p>
<img alt="yy5K)" src="yy.jpg" height="122" width="136" /></a>
<p>Sundeep weds Neera</p>
<img alt="sb (2K)" src="sb.jpg" height="154" width="136" /></a>}

Please guide.
Thanking You in advance.
_________________________

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

You need to float the images left and right.

If you want the text above the images, do the following:

<div style="overflow: auto;">

<p style="float: left;">Yogi Weds Vandana
<img alt="yy5K)" src="yy.jpg" height="122" width="136" /></a>
</p>

<p style="float: right;">Sundeep weds Neera
<img alt="sb (2K)" src="sb.jpg" height="154" width="136" /></a>
</p>

</div>

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

I uploaded a page for a trial to a free web server. It is just at the development stage and needs much to be done. The photographs are not there.

The URL is <http://veshno.tripod.com/trial.htm>.

Browsers:
1) FF 1.0.1 shows the pictures at the extreme left of the central column.
2) Netscape 7.1 -do-
3) Opera 7.54 -do-
4) IE 6. shows the pictures in the center of the column.
_____________________
<div style="overflow: auto;">
<p style="float: left;">Yogi Weds Vandana
<img alt="y15K)" src="y1.jpg" height="122" width="136" /></a>
</p>

<p style="float: right;">Sundeep weds Neera
<img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136" /></a>
</p>
</div>
________________________
I tried the above and by this I did not achieve what I wanted. I am sure that I am doing wrong somewhere.
Please guide further.

_________________________

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

First of all, remove this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

you only need one doctype, and seeing as the strict doctype is complete, use it instead of this one.

All I can see in the page code is this:

<p>Yogi Weds Vandana</p>
<a href="http://www.geocities.com/dkbhat/yogi/ALBUM1.HTML"><img alt="y1 (5K)" src="all%20rest/albumss_files/y1.jpg" height="122" width="136" /></a>

<p>Sundeep weds Neera</p>
<a href="http://members.tripod.com/veshno/sb/ALBUM1.HTML"><img alt="sb1 (2K)" src="all%20rest/albumss_files/sb1.jpg" height="154" width="136" /></a>

you haven't actually used the float code in it.

Try using what I suggested and see how it goes.

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

Please see again <http://veshno.tripod.com/trial.htm>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

Ok. The good news is, you're trying these things, and they're kind of working. This should give you enough confidence to tweak them some more.

In essence, here is what's happening:

<div style="overflow: auto;">

<p style="float: left;">Yogi Weds Vandana
<img alt="y1(5K)" src="y1.jpg" height="122" width="136"/>
</p>

<p style="float: right;">Sundeep weds Neera

<img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136" />
</p>
</div>

First of all, a div is created, with overflow: auto. This is the easy clearing fix.

Next, you have specified a paragraph should start. This should be floated left. Then you want the subtitle displayed, then the image.

Next, you want the same, but the image floated left.

Then you end the div.

The problem lies in the paragraphs. They naturally cause a break before and after.

Remove the paragraph tags and see what happens.

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

Thanks for the encouragement.
I have done as instructed but somewhere I am doing wrong. Please see what has happened to subtitles? The pictures are in disarray.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

Now you don't have any doctype - you need one.

You have this:

<div style="overflow: auto;">

Yogi Weds Vandana
<img alt="y1(5K)" src="y1.jpg" height="122" width="136"/>

Sundeep weds Neera

<img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136" />

</div>

you need instead of wrapping the image and subtitle in a paragraph tag, wrap them in a div (with the float styles).

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

If I followed you right I have made some changes in the page <http://veshno.tripod.com/trial.htm>, if not then kindly guide further .

I would also like to keep the images in the central column a little apart---- the pictures seem to have got stitched. Besides I would like to keep the subtitiles on the respective pictures in such a way so that the picture remains just below the subtitle and not as shown under (yogi weds vandana). The subtitle ought to have been like (sundeep weds neera).

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

No no no no! Laughing out loud

You need to wrap each image and it's title in a div, one of which is floated left, one of which is floated right:

<div style="overflow: auto;">

<div style="float: left;">
Yogi Weds Vandana <br />
<img alt="y1(5K)" src="y1.jpg" height="122" width="136">
</div>

<div style="float: right;">
Sundeep Weds Neera <br />
<img
 alt="sb1 (2K)" src="sb1.jpg" height="154" width="136">
</div>

</div>

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

Great! You have helped and guided me through and through.
Thanks ---- now it is as I wanted. <http://veshno.tripod.com/trial.htm>.

If I would like to have another picture and its subtitle in the middle of
(yogi weds Vandna and Sundeep weds Neera) what would I have to do please?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

See, I knew we'd get you there in the end Laughing out loud

The simplicity of it so far is that there is only two images - one floated the extreme left, and one the extreme right.

I can't promise anything, but try this for three:

<div style="overflow: auto;">
  <div style="float: left;">
    Yogi Weds Vandana <br />
    <img alt="y1(5K)" src="y1.jpg" height="122" width="136">
  </div>
  <div style="float: left;">
    Middle Title <br />
    <img alt="middle pic etc">
  </div>
  <div style="float: right;">
    Sundeep Weds Neera <br />
    <img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136">
  </div>
</div> 

the middle one is also floated left. Should work, try it and see.

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

Thanks again for the guidance.
<http://veshno.tripod.com/t3pics.htm> is for three pictures in the middle. This I got after adjusting the picture size. Here the subtitles are giving problem. I tried just one word as the sub title for the pics but then the the first two pictures in a row seem get stitched. This is at 800X600 screen resolution.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

replace a table with css?

Aah, 800x600, how I detest you. Laughing out loud

The problem with the code I posted is that the first image is floated to the left of the holder div, the second image is floated to the left of that, and the third image is floated to the extreme right. For example, if you used this instead:

<div style="overflow: auto;">
  <div style="float: left;">
    Yogi Weds Vandana <br />
    <img alt="y1(5K)" src="y1.jpg" height="122" width="136">
  </div>
  <div style="float: right;">
    Middle Title <br />
    <img alt="middle pic etc">
  </div>
  <div style="float: right;">
    Sundeep Weds Neera <br />
    <img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136">
  </div>
</div>

(note the middle image is floated right), then the two right hand images would be stitched.

The best way do to this is to use percentages. Try this code:

<div style="overflow: auto;">
  <div style="width: 33%;">
    Yogi Weds Vandana <br />
    <img alt="y1(5K)" src="y1.jpg" height="122" width="136">
  </div>
  <div style="width: 33%;">
    Middle Title <br />
    <img alt="middle pic etc">
  </div>
  <div style="width: 33%;">
    Sundeep Weds Neera <br />
    <img alt="sb1 (2K)" src="sb1.jpg" height="154" width="136">
  </div>
</div>

I honestly don't know why I didn't think of it earlier.

Verschwindende wrote:
  • CSS doesn't make pies

ongi
Offline
newbie
Last seen: 17 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2005-04-03
Posts: 8
Points: 0

replace a table with css?

Sorry due to emergency was out of station.

I tried today the page again (for two images in the middle) and I am getting different views with different browsers:

Opera 7.54---here the middle col is missing only the subtitle is there.

Netscape 7.1---- I am getting scroll bars probably because of the size of the images and that could be rectified. But I do not know as to why I am getting broken image boxes in the left of a1 and rc pictures.

FF 1.0.1 ----- No scrol bars here but broken image boxes in the left of a1 and rc pictures.

IE 6------picture sb1 seems in disarray but no broken image boxes in the left of a1 and rc pictures.

Please guide more.

Regards

ongi