Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS: a simple layout won't work in CSS

Reply
Thread Tools

CSS: a simple layout won't work in CSS

 
 
liketofindoutwhy@gmail.com
Guest
Posts: n/a
 
      03-19-2008
A simple layout is attempted in CSS but can't be made into practice...


The result desired is displayed on:
http://www.0011.com/layout/want_to.html

(it is validated as HTML 4.01 Strict)

but that is done using a table. I don't want to use a table because i
think for some browsers, if there are 100 rows... then the table won't
be rendered until all 100 rows of images have been detected for the
width and height... the page may be empty until all 100 images are
loaded. (that might be for some older browsers). Nevertheless, I want
to try using span or div to do it.


A big issue is that I don't know the size of the image in advance (it
can be any image in the database).

so I tried just using a div with "vertical-align: middle" and it
doesn't work, as in

http://www.0011.com/layout/try1.html

and then "line-height:100%" using a span and it doesn't work, as in

http://www.0011.com/layout/try2.html


and also floating the 2 div left and right, and with the right hand
side "height:1em;margin:auto 0" just like centering a div
horizontally and won't work.

http://www.0011.com/layout/try3.html


i tried height: 100% and vertical-align: middle and even the the
height: 100% won't work, as indicated by the dashed border.

http://www.0011.com/layout/try4.html


again, the image on the left is unknown for the size as it is an image
from the database. Does somebody know how to make it happen without
using a table and without using javascript to get the size of the
image? thanks very much!


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2008
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> A simple layout is attempted in CSS but can't be made into practice...
>
>
> The result desired is displayed on:
> http://www.0011.com/layout/want_to.html
>
> (it is validated as HTML 4.01 Strict)
>
> but that is done using a table. I don't want to use a table because i
> think for some browsers, if there are 100 rows... then the table won't
> be rendered until all 100 rows of images have been detected for the
> width and height... the page may be empty until all 100 images are
> loaded. (that might be for some older browsers). Nevertheless, I want
> to try using span or div to do it.
>
>
> A big issue is that I don't know the size of the image in advance (it
> can be any image in the database).


<snip old complaint about vertical alignment>

100 images? Maybe you should cut you page down to show maybe 25 at a
time. That is your real problem. Next will the world collapse if the
text is not centered vertically with the image? If it is so important
use a table, or set div to "display: table-cell" and let IE users go hang...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
liketofindoutwhy@gmail.com
Guest
Posts: n/a
 
      03-19-2008
On Mar 19, 5:29 am, "Jonathan N. Little" <(E-Mail Removed)> wrote:

> 100 images? Maybe you should cut you page down to show maybe 25 at a
> time. That is your real problem. Next will the world collapse if the
> text is not centered vertically with the image? If it is so important
> use a table, or set div to "display: table-cell" and let IE users go hang...


hm... even if it is 25, the page may load slower... such as for people
who don't have broadband... (but i found that IE 7 and Firefox 2 will
both show the page before any image is loaded). So this may be out
of pure attempt to know how to do it in CSS....

the display: table-cell will work so long as height: 100px is added...
then the line is centered vertically. however, if the height: 100px
is not specified, then it won't work.... that's a problem because the
image size is unknown. Do you think you can provide the 2 or 3 lines
that will make it work? The BIGGEST reason why this is to be
vertically centered is that, the line is actually a "Delete" link...
so if the word "Delete" is shown at top or at bottom, then the user
may accidentally click the "Delete" for the wrong image. So centering
it vertically is very helpful.

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2008

> The BIGGEST reason why this is to be
> vertically centered is that, the line is actually a "Delete" link...
> so if the word "Delete" is shown at top or at bottom, then the user
> may accidentally click the "Delete" for the wrong image. So centering
> it vertically is very helpful.
>


Well you could give visual clues to help. If each image with control
links where in a block, "pixbox" you could float image images had have
the control links have a top and bottom margins that "push" them visibly
with the top and bottom dimensions of the image. You can add margins to
the "pixbox" container to give visual separation and|or borders!

div.pixbox {
margin: 2em 0; padding: .5em; border-top: 1px solid #000;
clear: left; overflow: hidden;
}

div.pixbox img {
display: block; float: left; margin-right: 1em;
}

div.pixbox ul {
margin: 3em 0; padding: 0; list-style: none;
}



<div class="pixbox">
<img src="someimage.jpg" alt="image" width="300" height="300">
<ul>
<li><a href="removalscript.cgi?someimage">Delete Me</a></li>
<li><a href="manglescript.cgi?someimage">Mangle Me</a></li>
<li><a href="whaterverscript.cgi?someimage">Show Me That You Care</a></li>
</ul>
</div>


SAPTT (Salt And Pepper To Taste)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
liketofindoutwhy@gmail.com
Guest
Posts: n/a
 
      03-19-2008
On Mar 19, 7:32 am, "Jonathan N. Little" <(E-Mail Removed)> wrote:
>
> Well you could give visual clues to help. If each image with control
> links where in a block, "pixbox" you could float image images had have
> the control links have a top and bottom margins that "push" them visibly
> with the top and bottom dimensions of the image. You can add margins to
> the "pixbox" container to give visual separation and|or borders!


i tried and it seems to shift the 3 text lines 2em down... so it is
somewhat more centered and it is very practical and thanks very much.
I wonder... is there any method to center it vertically and "very"
centered if table is not used? (so that if the image is 20px tall,
it is centered. if the image is 800px tall, it is centered). (hoping
to understand the mechanics of CSS along the way)

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

> (so that if the image is 20px tall,
> it is centered. if the image is 800px tall, it is centered). (hoping
> to understand the mechanics of CSS along the way)


earlier you mentioned 100 images per page, ten the discussion
turned to 25 sort of, throughout you are concerned with speed of
[page loading, now you are talking 800px high images, what is
going on? Are you loading thumbnails (the sensible thing to do
so that the user can leverage up his requirements)?

--
dorayme
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      03-19-2008
(E-Mail Removed) wrote:
>
> The result desired is displayed on:
> http://www.0011.com/layout/want_to.html
>
> A big issue is that I don't know the size of the image in advance (it
> can be any image in the database).


If it's coming from a database, get the image dimensions from there as
well and set the appropriate sizes when the HTML is generated. Should be
easy enough to do in your server-side script, whatever language it may be.

--
Berg
 
Reply With Quote
 
liketofindoutwhy@gmail.com
Guest
Posts: n/a
 
      03-20-2008
On Mar 19, 8:30 am, dorayme <(E-Mail Removed)> wrote:

> earlier you mentioned 100 images per page, ten the discussion
> turned to 25 sort of, throughout you are concerned with speed of
> [page loading, now you are talking 800px high images, what is
> going on? Are you loading thumbnails (the sensible thing to do
> so that the user can leverage up his requirements)?


the real thing is... i want to find out how to vertically center that
text on the right without using table but just using div and span.
turns out it is rather difficult... and maybe i can do it after
reading the whole chapters of CSS Definitive Guide for Inline elements
and Positioning. I already read the whole chapter for Block elements.

 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      03-20-2008
(E-Mail Removed) wrote:
> On Mar 19, 8:30 am, dorayme <(E-Mail Removed)> wrote:
>
>> earlier you mentioned 100 images per page, ten the discussion
>> turned to 25 sort of, throughout you are concerned with speed of
>> [page loading, now you are talking 800px high images, what is
>> going on? Are you loading thumbnails (the sensible thing to do
>> so that the user can leverage up his requirements)?

>
> the real thing is... i want to find out how to vertically center that
> text on the right without using table but just using div and span.
> turns out it is rather difficult... and maybe i can do it after
> reading the whole chapters of CSS Definitive Guide for Inline elements
> and Positioning. I already read the whole chapter for Block elements.


What do you find difficult or perhaps wrong with my suggestion?

--
Gus

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      03-20-2008

"Gus Richter" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed).. .
> (E-Mail Removed) wrote:
>> On Mar 19, 8:30 am, dorayme <(E-Mail Removed)> wrote:
>>
>>> earlier you mentioned 100 images per page, ten the discussion
>>> turned to 25 sort of, throughout you are concerned with speed of
>>> [page loading, now you are talking 800px high images, what is
>>> going on? Are you loading thumbnails (the sensible thing to do
>>> so that the user can leverage up his requirements)?

>>
>> the real thing is... i want to find out how to vertically center that
>> text on the right without using table but just using div and span.
>> turns out it is rather difficult... and maybe i can do it after
>> reading the whole chapters of CSS Definitive Guide for Inline elements
>> and Positioning. I already read the whole chapter for Block elements.

>
> What do you find difficult or perhaps wrong with my suggestion?


Possibly the difficulty is that the OP can't see your post. I can't.

--
Richard.


 
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
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
most simple 3 column CSS layout chlori HTML 11 02-11-2005 08:25 PM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments