Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > New to CSS....simple question maybe

Reply
Thread Tools

New to CSS....simple question maybe

 
 
IGot2P
Guest
Posts: n/a
 
      12-18-2007
Ok, basically all I want to do is to put two image/links side by side
and NOT above each other. Point your browser to
http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
that all four bottom image/links are vertical but I want two lines of
two. How do I do this? .....and yes I know that in IE there is an error
because my translucent overlay is not coming to the bottom of the screen
when an image is enlarged.

Happy Holiday,

Don
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      12-18-2007
On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P <(E-Mail Removed)> wrote:

>Ok, basically all I want to do is to put two image/links side by side
>and NOT above each other. Point your browser to
>http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
>that all four bottom image/links are vertical but I want two lines of
>two. How do I do this? .....and yes I know that in IE there is an error
>because my translucent overlay is not coming to the bottom of the screen
>when an image is enlarged.
>
>Happy Holiday,
>
>Don


Simplest way would be to do a table.
Otherwise use div and "float".
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-18-2007
richard wrote:
> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P <(E-Mail Removed)> wrote:
>
>> Ok, basically all I want to do is to put two image/links side by side
>> and NOT above each other. Point your browser to
>> http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
>> that all four bottom image/links are vertical but I want two lines of
>> two. How do I do this? .....and yes I know that in IE there is an error
>> because my translucent overlay is not coming to the bottom of the screen
>> when an image is enlarged.
>>
>> Happy Holiday,
>>
>> Don

>
> Simplest way would be to do a table.
> Otherwise use div and "float".


No and no. The simplest way is to stop displaying the images as blocks!


img.featurectr {

border-width: 0px; <-- try "border: 0;"

margin: 15px auto; <-- if you change images back to inline use
padding not margin

display: block; <-- delete this

}


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-18-2007
In article <fk91b8$hjo$(E-Mail Removed)>,
IGot2P <(E-Mail Removed)> wrote:

> Ok, basically all I want to do is to put two image/links side by side
> and NOT above each other. Point your browser to
> http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
> that all four bottom image/links are vertical but I want two lines of
> two. How do I do this? .....and yes I know that in IE there is an error
> because my translucent overlay is not coming to the bottom of the screen
> when an image is enlarged.
>


Since you know the width of the pics, you could just do inline
them in a container whose width is plenty big for two of them
side by side but not for three. They will wrap, two by two down...

Need the markup for this?

--
dorayme
 
Reply With Quote
 
IGot2P
Guest
Posts: n/a
 
      12-19-2007
dorayme wrote:
> In article <fk91b8$hjo$(E-Mail Removed)>,
> IGot2P <(E-Mail Removed)> wrote:
>
>
>>Ok, basically all I want to do is to put two image/links side by side
>>and NOT above each other. Point your browser to
>>http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
>>that all four bottom image/links are vertical but I want two lines of
>>two. How do I do this? .....and yes I know that in IE there is an error
>>because my translucent overlay is not coming to the bottom of the screen
>>when an image is enlarged.
>>

>
>
> Since you know the width of the pics, you could just do inline
> them in a container whose width is plenty big for two of them
> side by side but not for three. They will wrap, two by two down...
>
> Need the markup for this?


Yeah, it would be appreciated. How 'bout both the CSS and XHTML?

Thanks a bunch,

Don

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-19-2007
In article <fka631$94g$(E-Mail Removed)>,
IGot2P <(E-Mail Removed)> wrote:

> dorayme wrote:
> > In article <fk91b8$hjo$(E-Mail Removed)>,
> > IGot2P <(E-Mail Removed)> wrote:
> >
> >
> >>Ok, basically all I want to do is to put two image/links side by side
> >>and NOT above each other. Point your browser to
> >>http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
> >>that all four bottom image/links are vertical but I want two lines of
> >>two. How do I do this? .....and yes I know that in IE there is an error
> >>because my translucent overlay is not coming to the bottom of the screen
> >>when an image is enlarged.
> >>

> >
> >
> > Since you know the width of the pics, you could just do inline
> > them in a container whose width is plenty big for two of them
> > side by side but not for three. They will wrap, two by two down...
> >
> > Need the markup for this?

>
> Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
>


Take a look at:

http://netweaver.com.au/alt/IGot2P.html

and adapt to suit.

--
dorayme
 
Reply With Quote
 
IGot2P
Guest
Posts: n/a
 
      12-19-2007
dorayme wrote:
> In article <fka631$94g$(E-Mail Removed)>,
> IGot2P <(E-Mail Removed)> wrote:
>
>
>>dorayme wrote:
>>
>>>In article <fk91b8$hjo$(E-Mail Removed)>,
>>> IGot2P <(E-Mail Removed)> wrote:
>>>
>>>
>>>
>>>>Ok, basically all I want to do is to put two image/links side by side
>>>>and NOT above each other. Point your browser to
>>>>http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
>>>>that all four bottom image/links are vertical but I want two lines of
>>>>two. How do I do this? .....and yes I know that in IE there is an error
>>>>because my translucent overlay is not coming to the bottom of the screen
>>>>when an image is enlarged.
>>>>
>>>
>>>
>>>Since you know the width of the pics, you could just do inline
>>>them in a container whose width is plenty big for two of them
>>>side by side but not for three. They will wrap, two by two down...
>>>
>>>Need the markup for this?

>>
>>Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
>>

>
>
> Take a look at:
>
> http://netweaver.com.au/alt/IGot2P.html
>
> and adapt to suit.


Unfortunately netweaver.com.au times out before it ever
connects.....will try again later.

Don

 
Reply With Quote
 
IGot2P
Guest
Posts: n/a
 
      12-19-2007
Jonathan N. Little wrote:

> richard wrote:
>
>> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P <(E-Mail Removed)> wrote:
>>
>>> Ok, basically all I want to do is to put two image/links side by side
>>> and NOT above each other. Point your browser to
>>> http://www.rivervalleylodgeandcampground.com/lodge.html and you will
>>> see that all four bottom image/links are vertical but I want two
>>> lines of two. How do I do this? .....and yes I know that in IE there
>>> is an error because my translucent overlay is not coming to the
>>> bottom of the screen when an image is enlarged.
>>>
>>> Happy Holiday,
>>>
>>> Don

>>
>>
>> Simplest way would be to do a table. Otherwise use div and "float".

>
>
> No and no. The simplest way is to stop displaying the images as blocks!
>
>
> img.featurectr {
>
> border-width: 0px; <-- try "border: 0;"
>
> margin: 15px auto; <-- if you change images back to inline use padding
> not margin
>
> display: block; <-- delete this
>
> }


Thanks for the advice but I had tried padding before and to center for a
high resolution screen (i.e. 1440 by 900) the padding must be so great
that only one image will show per line at lower resolutions. Also, I get
a block of light color jumping at me when I do a mouseover. Again, you
can check it out at http://www.rivervalleylodgeandcampground.com/lodge.html

Don

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-19-2007
In article <fka8nd$a37$(E-Mail Removed)>,
IGot2P <(E-Mail Removed)> wrote:

> dorayme wrote:
> > In article <fka631$94g$(E-Mail Removed)>,
> > IGot2P <(E-Mail Removed)> wrote:
> >
> >
> >>dorayme wrote:
> >>
> >>>In article <fk91b8$hjo$(E-Mail Removed)>,
> >>> IGot2P <(E-Mail Removed)> wrote:
> >>>
> >>>
> >>>
> >>>>Ok, basically all I want to do is to put two image/links side by side
> >>>>and NOT above each other. Point your browser to
> >>>>http://www.rivervalleylodgeandcampground.com/lodge.html and you will see
> >>>>that all four bottom image/links are vertical but I want two lines of
> >>>>two. How do I do this? .....and yes I know that in IE there is an error
> >>>>because my translucent overlay is not coming to the bottom of the screen
> >>>>when an image is enlarged.
> >>>>
> >>>
> >>>
> >>>Since you know the width of the pics, you could just do inline
> >>>them in a container whose width is plenty big for two of them
> >>>side by side but not for three. They will wrap, two by two down...
> >>>
> >>>Need the markup for this?
> >>
> >>Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
> >>

> >
> >
> > Take a look at:
> >
> > http://netweaver.com.au/alt/IGot2P.html
> >
> > and adapt to suit.

>
> Unfortunately netweaver.com.au times out before it ever
> connects.....will try again later.


Really? Where are you? I don't like the sound of this! Please let
me know about it when you can.

Here is the mark up I used, you can paste it into your text
editor and call it anything.html and run it over your browser
(like Safari or Firfox),

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>

<style type="text/css" media="all">
..thumbnailHolder {width: 550px; margin: auto;}
..featurectr {padding: 10px; border: 0;}
</style>

</head>

<body>

<div class="thumbnailHolder">

A Peek Inside (click on images to enlarge)

<a href="images/lodge1_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge1_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a><a
href="images/lodge2_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge2_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a>
<a href="images/lodge3_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge3_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a><a
href="images/lodge4_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge4_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a>
</div>

</body>
</html>

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-19-2007
In article
<(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

>
> A Peek Inside (click on images to enlarge)


Perhaps wrap this in a <p>, come to think of it, I notice Opera
behaves differently to Safari when this is unwrapped.

But now I cannot reproduce what I first saw in Opera.

Anyway try:

<div class="thumbnailHolder">

<p>A Peek Inside (click on images to enlarge)</p>

etc

I honestly do not know what is semantically correct here. It is
not exactly a paragraph, it is some instructions for the
pictures. It is not quite a heading... although...? Anyway this
should do.

The server is slow? Perhaps because i was accessing it. I am
loading lots of stuff to it at the moment.

Here is an alternative server address:

http://members.optushome.com.au/droo...lt/IGot2P.html

and

http://members.optushome.com.au/droo..._original.html

If you can't get onto this one, I will eat my school hat, it is
just within reach...

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Maybe it will; maybe it won't iL_weReo Computer Support 7 10-13-2009 08:42 AM
Of Intrest ? Maybe Yes, Maybe No Old Gringo Computer Support 0 10-11-2004 01:35 AM
Maybe, just maybe @decorator syntax is ok after all Ville Vainio Python 11 08-10-2004 06:01 PM
Maybe I'm all wet, but I thought there was a new sensor that hasa piezo thingamagig to prevent dust Bay Area Dave Digital Photography 7 09-21-2003 12:16 AM
Some concepts (Maybe LOL maybe not...) C++ 5 08-18-2003 05:48 PM



Advertisments