Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: CSS for positioning

Reply
Thread Tools

Re: CSS for positioning

 
 
freemont
Guest
Posts: n/a
 
      05-09-2010
On Sun, 09 May 2010 11:01:27 +0200, Alfred Molon writ:

> My site uses tables for layout. I was experimenting yesterday with CSS
> for positioning and ran into problems.
>
> More specifically I was trying to convert this table-based page:
> http://www.molon.de/test/csspo/part2.html (ignore the links which do not
> work)
>
> Here is as far as I got:
> http://www.molon.de/test/csspo/
>
> There are the following problems:
>
> 1. The round logo on the top menu bar on the right should be aligned
> vertically with the "Jordan 2009-10 Travelogue" header. No problem with
> a table, but with CSS I had to give the logo an absolute position, which
> is not good design in my opinion. How to position the logo correctly
> without using an absolute position?


Since your header is a fixed width, you can just add a margin to scoot it
over.

<div id="menu2"><font class="hline">Jordan 2009-10 Travelogue</font>
<a href="../../../"><img style="border: 0px none;margin-left:360px;"
src="logorund.gif" alt="" height="24" width="33"></a>
</div>

I'd forget I ever heard of <font> tags, if I were you. Use <h1> there
instead. It's not a font, it's a heading.

> 2. The vertical menu bar on the left should have rounded corners. But
> the top and bottom gifs with the rounded corners are now not adjacent
> with the vertical menu bar, no idea why. How to make them adjacent?
>
> 3. Then there is the mess with the central part of the page. It should
> appear as shown on first link I posted (the one with the table-based
> layout). What am I doing wrong?


Looks like you straightened that out.

> 4. One more question: does it really make sense to convert a table-based
> layout of a thumbnail page like this for instance
> http://www.molon.de/galleries/Jordan/Jerash/
>
> to a CSS-based layout?
>
> It would seem that for that page using tables for layout is much
> simpler, or what do you think?


I'm not a zealot. If tables are working for you for this site, *and the
site behaves correctly*, why muck with it.

That said, if you're going to convert to CSS layout, go all the way and
make the page fluid. Leaving it set at 850px sort of defeats the purpose
of moving away from tables. Try setting a "wrapper" div for the entire
content of the page, set its width to, say, 85% or so, its margin to 0
auto, and start working from there.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
 
 
 
freemont
Guest
Posts: n/a
 
      05-09-2010
On Sun, 09 May 2010 15:53:03 +0000, freemont writ:

> That said, if you're going to convert to CSS layout, go all the way and
> make the page fluid.


Sry to respond to me own post. Here's a quick re-do:

<http://freemontsoffice.com/test/molon/>

Strict doctype was necessary to make the centering obey in IE, and it'll
make validation fail all over the place until you get rid of all those
<font> tags. And there are other problems - all those pixel sizes, for
instance. And a LOT of redundant styles. But the page "works", as far as
fluidity.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      05-09-2010

"Alfred Molon" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ...
> In article <(E-Mail Removed)>, Lewis says...
>> Font is a HTML3 definition and has no place in HTML4 and hasn't for a
>> decade.
>>
>> All pages you create should be HTML4.01 strict. Transitional should only
>> have been used with pages that were in the process of transitioning from
>> HTML3 to HTML4, it is not a free pass to legacy code in a new document.

>
> Ok, I'll remove all legacy code from the pages as soon as I find the
> time.
> But what specifically is the problem with transitional documents, given
> that all browsers display them properly? Perhaps that browsers are
> forced to contain code needed to correctly display legacy HTML and that
> there is a burden on browser developers?
> --
>



May I suggest you change this:
<div style="border: medium none; position: absolute; top: 50px; left: 10px;
width: 295px;">

to this:
<div style="border: medium none; position: relative; top: 50px; left: 10px;
width: 295px;">

notice the only change is 'absolute' to relative on this one div .. It's not
the end of the layout problems but it at least bumps the main text to below
the map.


 
Reply With Quote
 
freemont
Guest
Posts: n/a
 
      05-09-2010
On Sun, 09 May 2010 23:04:53 +0200, Alfred Molon writ:

> In article <(E-Mail Removed)>, Lewis says...
>> Font is a HTML3 definition and has no place in HTML4 and hasn't for a
>> decade.
>>
>> All pages you create should be HTML4.01 strict. Transitional should
>> only have been used with pages that were in the process of
>> transitioning from HTML3 to HTML4, it is not a free pass to legacy code
>> in a new document.

>
> Ok, I'll remove all legacy code from the pages as soon as I find the
> time.
> But what specifically is the problem with transitional documents, given
> that all browsers display them properly? Perhaps that browsers are
> forced to contain code needed to correctly display legacy HTML and that
> there is a burden on browser developers?


One important consideration is that Transitional doctype will prevent
some markup from displaying correctly - margins in particular. Like I
noted before, if that page of yours I uploaded has the Transitional
doctype instead of Strict, the content will not center in IE. Try it and
see.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
freemont
Guest
Posts: n/a
 
      05-10-2010
On Sun, 09 May 2010 19:58:51 +0200, Alfred Molon writ:

> In article <73263$4be6e956$6216f0ea$(E-Mail Removed)>, freemont says...
>> On Sun, 09 May 2010 15:53:03 +0000, freemont writ:
>>
>> > That said, if you're going to convert to CSS layout, go all the way
>> > and make the page fluid.

>
> Hmmm... thumbnail sizes are fixed and there is some text below each
> thumbnail. I'm not sure a fluid design would work here.


Did you ever consider using an existing photo gallery software?

That said, I believe dorayme has a page or two up that demonstrate good
fluid thumbnail/caption layout technique. My spidey sense tells me she'll
be along to share...
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      05-10-2010
On Sun, 9 May 2010 19:58:51 +0200
Alfred Molon <(E-Mail Removed)> wrote:

>> On Sun, 09 May 2010 15:53:03 +0000, freemont writ:
>>
>>> That said, if you're going to convert to CSS layout, go all the
>>> way and make the page fluid.

>
> Hmmm... thumbnail sizes are fixed and there is some text below
> each thumbnail. I'm not sure a fluid design would work here.


http://bootnic.bounceme.net/Temporar...nlineBlock.php

[snip]



--
BootNic Sun May 9, 2010 10:55 pm
Complaining is good for you as long as you're not complaining to the
person you're complaining about.
*Lynn Johnston*

⁕ 64 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkvnda4ACgkQmo2774GZ7qksJACdH59/qRkes1h5+Gbsx/ZmVlsf
wUkAoIDuNXBuj44upOiodVvlRR1iLPyq
=tI1B
-----END PGP SIGNATURE-----

 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      05-10-2010
On 09 May 2010, Alfred Molon <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>, Lewis says...
>> Font is a HTML3 definition and has no place in HTML4 and hasn't for
>> a decade.
>>
>> All pages you create should be HTML4.01 strict. Transitional should
>> only have been used with pages that were in the process of
>> transitioning from HTML3 to HTML4, it is not a free pass to legacy
>> code in a new document.

>
> Ok, I'll remove all legacy code from the pages as soon as I find the
> time.
> But what specifically is the problem with transitional documents,
> given that all browsers display them properly? Perhaps that browsers
> are forced to contain code needed to correctly display legacy HTML
> and that there is a burden on browser developers?


Yes, that's a good part of it and I think you are pretty sharp to
discern it. In addition, browsers will eventually drop the
legacy-supporting routines and become more "standards pure", if you
will. Ie has shown signs of this already.

--
Neredbojias

http://www.neredbojias.org/
http://www.neredbojias.net/
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-10-2010
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)-september.org>,
> BootNic says...
> > http://bootnic.bounceme.net/Temporar...nlineBlock.php

>
> Interesting. Does that also work if the thumbnails do not all have the
> same width?


Without looking at the details and just guessing, the beaut thing
about inline boxes is that (if you don't over specify with the
CSS to hobble them) they are smart enough to cope with most
things you throw at them.

You were asking about thumbnails and some layout I made. Yes,
these were done with floats but are highly managed into same size
thumbs, classified in blocks according to general shape and good
for truly short captions.

http://tinyurl.com/2jcs5r

--
dorayme
 
Reply With Quote
 
freemont
Guest
Posts: n/a
 
      05-10-2010
On Mon, 10 May 2010 21:50:12 +0200, Alfred Molon writ:

> In article <(E-Mail Removed)>, dorayme
> says...

[thumbnail layout]
>> http://tinyurl.com/2jcs5r

>
> Well, I gave a try to your design, but apparently it is not able to cope
> with thumbnails with a variable width.
>
> See for instance here:
> http://www.molon.de/test/csspo/index3.html
>
> All thumbnails are squeezed. Removing the width/height lock yields this:
> http://www.molon.de/test/csspo/index4.html


Try setting height and width to 100% and see what you think.
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
123Jim
Guest
Posts: n/a
 
      05-10-2010

"Alfred Molon" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ...
> In article <(E-Mail Removed)>, dorayme
> says...
>> Without looking at the details and just guessing, the beaut thing
>> about inline boxes is that (if you don't over specify with the
>> CSS to hobble them) they are smart enough to cope with most
>> things you throw at them.
>>
>> You were asking about thumbnails and some layout I made. Yes,
>> these were done with floats but are highly managed into same size
>> thumbs, classified in blocks according to general shape and good
>> for truly short captions.
>>
>> http://tinyurl.com/2jcs5r

>
> Well, I gave a try to your design, but apparently it is not able to cope
> with thumbnails with a variable width.
>
> See for instance here:
> http://www.molon.de/test/csspo/index3.html
>
> All thumbnails are squeezed. Removing the width/height lock yields this:
> http://www.molon.de/test/csspo/index4.html


You still have width constrained here:
#wrapper div {
float:left;
margin:5px 5px 10px;
padding:0;
text-align:center;
width:150px; <<------------ remove this width
}

I'm sure Dorayme will be along with the definitive fix


 
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
Datalist and CSS positioning Eric ASP .Net 1 09-14-2005 03:38 PM
OT ...CSS positioning ASP .Net 1 04-07-2004 12:58 PM
Re: CSS positioning help - Mozilla brucie HTML 8 06-29-2003 05:39 PM
Re: CSS positioning help - Mozilla David Graham HTML 1 06-28-2003 05:15 PM
Re: css positioning vs. tables PeterMcC HTML 0 06-23-2003 04:45 PM



Advertisments