Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Swithcing from verical to horizontal

13 views
Skip to first unread message

Ferrous Cranus

unread,
Mar 9, 2013, 4:54:46 AM3/9/13
to
<table CLASS = "sample">
<tr><th>SuperHost - Economy</th></tr>
<tr><td>Χώρος στο δίσκο: 1 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 1 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: 1</td></tr>
<tr><td>Subdomains: 1</td></tr>
<tr><td>FTP Accounts: 1</td></tr>
<tr><td>Emails (POP3): 2</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: 2</td></tr>
<tr><th>25€ / έτος</th></tr>
</table><br><br>

<table CLASS = "sample">
<tr><th>SuperHost - Premium</th></tr>
<tr><td>Χώρος στο δίσκο: 4 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 40 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: 1</td></tr>
<tr><td>Subdomains: Απεριόριστα</td></tr>
<tr><td>FTP Accounts: Απεριόριστα</td></tr>
<tr><td>Emails (POP3): Απεριόριστα</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: Απεριόριστες</td></tr>
<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
<tr><th>50€ / έτος</th></tr>
</table><br><br>

<table CLASS = "sample">
<tr><th>SuperHost - Premium</th></tr>
<tr><td>Χώρος στο δίσκο: 4 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 40 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: 1</td></tr>
<tr><td>Subdomains: Απεριόριστα</td></tr>
<tr><td>FTP Accounts: Απεριόριστα</td></tr>
<tr><td>Emails (POP3): Απεριόριστα</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: Απεριόριστες</td></tr>
<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
<tr><th>50€ / έτος</th></tr>
</table><br><br>


Those are the tables that appear vertically and i would like them to appear horizontally separated of course by some space.

Can you tell me how please?

dorayme

unread,
Mar 9, 2013, 6:35:47 AM3/9/13
to
In article <19563196-a20f-4408...@googlegroups.com>,
Ferrous Cranus <nikos...@gmail.com> wrote:

> <table CLASS = "sample">
> ...
> </table><br><br>
>
> <table CLASS = "sample">
...
> </table><br><br>
>
> <table CLASS = "sample">
> ...
> </table><br><br>
>
>
> Those are the tables that appear vertically and i would like them to appear
> horizontally separated of course by some space.
>
> Can you tell me how please?

Float all the tables with

.sample {float: left; margin-right: .5em;}

in your stylesheet.

You won't need the <br>s then. To space them, note the margin-right.
You can have margin: 0; on the last table if you want, aided perhaps
by choosing a different class name.

--
dorayme

Helmut Richter

unread,
Mar 9, 2013, 8:14:29 AM3/9/13
to
On Sat, 9 Mar 2013, dorayme wrote:

> In article <19563196-a20f-4408...@googlegroups.com>,
> Ferrous Cranus <nikos...@gmail.com> wrote:

> > Those are the tables that appear vertically and i would like them to appear
> > horizontally separated of course by some space.
> >
> > Can you tell me how please?
>
> Float all the tables with
>
> .sample {float: left; margin-right: .5em;}
>
> in your stylesheet.

An alternate way is {display: inline-block; vertical-align: top;}

Then the tables are treated like inline elements and arranged from left to
right like such. If all tables fit on a single row of tables, there is not
much difference in the outcome. If, however, the tables reach the right-hand
edge of the screen, my variant has the advantage that the next row of tables
will start at the left-hand edge instead of anywhere where there is space
left. In this case, you need a margin-top or -bottom as well, of course.

--
Helmut Richter

Ferrous Cranus

unread,
Mar 9, 2013, 9:11:28 AM3/9/13
to
Thanks for answerign, you mean like that?

<body style="background-image: url('/data/images/vortex.jpg')"

table.sample {
float: left;
margin-right: .5em;
border-width: 6px;
border-style: outset;
border-color: gold;
background-color: purple;
}
table.sample th {
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Script;
font-size: medium;
color: white;
background-color: orangered;
}
table.sample td {
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Print;
font-size: small;
color: lime;
background-color: black;
}
</style>

but look how the outcome appears now: http://superhost.gr

What am i doing wrong?

Ferrous Cranus

unread,
Mar 9, 2013, 10:43:46 AM3/9/13
to
please help me

Ferrous Cranus

unread,
Mar 9, 2013, 12:32:02 PM3/9/13
to
Plase my website looks liek a mess if i dont correct this:

look plz: http://superhost.gr


please tell me how to put tables horiontally, i tried it but iw asnt successfull as i posted.

dorayme

unread,
Mar 9, 2013, 4:50:45 PM3/9/13
to
In article <439abd7a-5a4f-4803...@googlegroups.com>,
Ferrous Cranus <nikos...@gmail.com> wrote:

...

> > dorayme
>
> Thanks for answerign, you mean like that?
>
> <body style="background-image: url('/data/images/vortex.jpg')"
>
> table.sample {
> float: left;
...
> }
> </style>
>
> but look how the outcome appears now: http://superhost.gr
>
> What am i doing wrong?

Don't know what you are seeing as that address does not work for me.

Go to

<http://dorayme.netweaver.com.au/cranus/>

and look at

/withVeryModerateTableContent.html

and you will see how it looks with little content in your tables

Or look at

/withLotsOfTableContent.html

and you should see how it looks with lots of content in your tables.
In this, I add a width to the tables of class "sample" to be sure of
fitting them in the width of your viewport.

Another way is to not float but to display as inline-block as Gus
Richter suggests, but if you really need none to wrap you need to give
a guessed width (and may have to make other restrictions within your
tables) as in

/inlineBlock.html

There are some both advantages and disadvantages in all of this.
Everything depends on quite what you want. Do you absolutely not want
any of the tables to wrap? If not, then you need to restrict the
widths, making a guess to allow for borders and margins.

Try some of these things and test in various browsers and see what you
think or what further you might want.

--
dorayme

Ferrous Cranus

unread,
Mar 9, 2013, 5:10:01 PM3/9/13
to
Thank you very much, now the code is:

table.sample {
display: inline-block;
margin-right: .5em;
border-width: 6px;
border-style: outset;
border-color: gold;
background-color: purple;
width: 25%;
}
}
table.sample th {
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Script;
font-size: medium;
color: white;
background-color: orangered;
}
table.sample td {
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Print;
font-size: small;
color: lime;
background-color: black;
}

# print tables
<table CLASS = "sample">
<tr><th>SuperHost - Economy</th></tr>
<tr><td>Χώρος στο δίσκο: 1 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 2 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: 1</td></tr>
<tr><td>Subdomains: 1</td></tr>
<tr><td>FTP Accounts: 1</td></tr>
<tr><td>Emails (POP3): 2</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: 2</td></tr>
<tr><th>25€ / έτος</th></tr>
</table>

<table CLASS = "sample">
<tr><th>SuperHost - Premium</th></tr>
<tr><td>Χώρος στο δίσκο: 4 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 40 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: 1</td></tr>
<tr><td>Subdomains: Απεριόριστα</td></tr>
<tr><td>FTP Accounts: Απεριόριστα</td></tr>
<tr><td>Emails (POP3): Απεριόριστα</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: Απεριόριστες</td></tr>
<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
<tr><th>50€ / έτος</th></tr>
</table>

<table CLASS = "sample">
<tr><th>SuperHost - Business</th></tr>
<tr><td>Χώρος στο δίσκο: 20 GB</td></tr>
<tr><td>Μηνιαία Κίνηση δεδομένων: 200 GB</td></tr>
<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
<tr><td>Domains: Απεριόριστα</td></tr>
<tr><td>Subdomains: Απεριόριστα</td></tr>
<tr><td>FTP Accounts: Απεριόριστα</td></tr>
<tr><td>Emails (POP3): Απεριόριστα</td></tr>
<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
<tr><td>Mysql Databases: Απεριόριστες</td></tr>
<tr><td>Unix Shell Access</td></tr>
<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
<tr><th>100€ / έτος</th></tr>
</table>

<table CLASS = "sample">
<tr><th>SuperHost - Dynamic</th></tr>
<tr><td>Ιδανικό για: μικρές εταιρείες & προσωπικές σελίδες</td></tr>
<tr><td>Δυναμική βάση 5 σελίδων</td></tr>
<tr><td>Φόρμα επικοινωνίας</td></tr>
<tr><td>Σχεδιασμός Λογοτύπου</td></tr>
<tr><td>Search Engine Optimization</td></tr>
<tr><td>Καταχώρηση στις μεγαλύτερες μηχανές αναζήτησης</td></tr>
<tr><th>Τιμή: 400€</th></tr>
</table>

but the result is still vertical :(

Please have allot at http://superhost.gr
and you will see how it si being displayd. I just dont understand why.
I hope you can see the webpage now.

Gus Richter

unread,
Mar 9, 2013, 5:41:54 PM3/9/13
to
On 3/9/2013 4:50 PM, dorayme wrote:
> Another way is to not float but to display as inline-block as Gus
> Richter suggests,

Not Gus, but Helmut ..... you must have Gus on your mind LOL

--
Gus


Jonathan N. Little

unread,
Mar 9, 2013, 5:50:43 PM3/9/13
to
Ferrous Cranus wrote:
> Thank you very much, now the code is:

<snip>

> but the result is still vertical :(
>
> Please have allot at http://superhost.gr
> and you will see how it si being displayd. I just dont understand why.
> I hope you can see the webpage now.
>

I'll give give you a couple of hints. Firstly your markup is very-very
broken. Next look at all the open <CENTER> tags, lastly you cannot hope
for predictable result with 89 Errors, 6 warning(s)

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsuperhost.gr%2F>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Helmut Richter

unread,
Mar 9, 2013, 6:32:31 PM3/9/13
to
On Sat, 9 Mar 2013, Gus Richter wrote:

> Not Gus, but Helmut ..... you must have Gus on your mind LOL

Well, in this country there are probably 100000 or 150000 persons with
last name Richter, so I am used to be mixed up.

--
Helmut Richter

Helmut Richter

unread,
Mar 9, 2013, 6:53:44 PM3/9/13
to
On Sun, 10 Mar 2013, dorayme wrote:

> /inlineBlock.html
>
> There are some both advantages and disadvantages in all of this.
> Everything depends on quite what you want. Do you absolutely not want
> any of the tables to wrap? If not, then you need to restrict the
> widths, making a guess to allow for borders and margins.

I do not know what the OP wants.

I did the inline-block for a larger number of little tables where the only
reason for putting them side by side is to use the space on the screen with no
semantic relationship between the tables in a row. As I do not know how much
space the reader of the web page will grant me in his window, I have to allow
wrapping; the only alternative would be putting all the little tables under
each other. You can try http://hr.userweb.mwn.de/kiswahili/k2/verb.html as an
example of what happens when you make the window narrower. (The CSS is just
being reworked for greater flexibility.)

As the little tables have different size, floating would yield very bad
results when the second to last table in a row is longer than the last.

The whole thing is part of a small basic vocabulary Swahili-German. If you
like, you can use it for learning German from your knowledge of Swahili or
vice versa.

--
Helmut Richter

dorayme

unread,
Mar 9, 2013, 6:57:22 PM3/9/13
to
In article
<alpine.LNX.2.00.1...@badwlrz-clhri01.ws.lrz.de>,
Nevertheless, sorry!

I used to and ought to still know each and everyone of you. You see, I
have a brain peculiarity where I used to have a part reserved for the
names of all the fish that existed or used to exist on earth. Then
something happened and the fish were gone and the doctors recommended
filling the space with Richters to prevent a collapse due to a sudden
void.

--
dorayme

dorayme

unread,
Mar 9, 2013, 7:32:40 PM3/9/13
to
In article
<alpine.LNX.2.00.1...@badwlrz-clhri01.ws.lrz.de>,
Helmut Richter <hh...@web.de> wrote:

> On Sun, 10 Mar 2013, dorayme wrote:
>
> > /inlineBlock.html
> >
> > There are some both advantages and disadvantages in all of this.
> > Everything depends on quite what you want. Do you absolutely not want
> > any of the tables to wrap? If not, then you need to restrict the
> > widths, making a guess to allow for borders and margins.
>
> I do not know what the OP wants.

I am in the process of finding out, awaiting OP.

--
dorayme

Ferrous Cranus

unread,
Mar 9, 2013, 11:20:25 PM3/9/13
to
I have fixed this!

Look at superhost.gr now! is beautifull. 2 issues:

a) At the 1st table it has too much red at the right, i dont know how to call this.
b) in the next 4 tables in the other row i want more spaces between tables.

the style iam using is:

<style>
table.sample {
display: inline-block;
margin-right: 5px;
border-width: 6px;
border-style: outset;
border-color: gold;
background-color: red;
width: 23%;
}
table.sample th {
text-align: center;
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Script;
font-size: big;
color: white;
background-color: orangered;
}
table.sample td {
text-align: center;
border-width: 1px;
padding: 2px;
border-style: inset;
border-color: orange;
font-family: Segoe Print;
font-size: medium;

dorayme

unread,
Mar 10, 2013, 4:43:40 AM3/10/13
to
In article <1a61f287-a977-4cdf...@googlegroups.com>,
Ferrous Cranus <nikos...@gmail.com> wrote:

> I have fixed this!
>
> Look at superhost.gr now! is beautifull. 2 issues:
>
> a) At the 1st table it has too much red at the right, i dont know how to call
> this.

Nothing fitting this description matches?


> b) in the next 4 tables in the other row i want more spaces between tables.
>
> the style iam using is:
>
> <style>
> table.sample {
> display: inline-block;
> margin-right: 5px;
> border-width: 6px;
> border-style: outset;
> border-color: gold;
> background-color: red;
> width: 23%;
> }
> table.sample th {
...

No, it is not what you are using as at 7.41pm Sydney Australian time.
If you did, you might be happier. If you want more margin, give it
more.

--
dorayme

Ferrous Cranus

unread,
Mar 10, 2013, 4:56:42 AM3/10/13
to
This 'margin-right: 5px;' control the space between each of the 4 tables i have in horizontal alignment?

Ferrous Cranus

unread,
Mar 10, 2013, 5:13:29 AM3/10/13
to
And i have to set width: 261px; otherwise extrared appears behind each cell if i make the width any bigget than 261px.

Why is that? How cna i fix this?

dorayme

unread,
Mar 10, 2013, 6:49:51 AM3/10/13
to
In article <a7794b74-7fb5-4cb2...@googlegroups.com>,
Ferrous Cranus <nikos...@gmail.com> wrote:

> This 'margin-right: 5px;' control the space between each of the 4 tables i
> have in horizontal alignment?

Yes. You can give more and you can use units other than px too.

--
dorayme

dorayme

unread,
Mar 10, 2013, 7:03:44 AM3/10/13
to
In article <ad1163da-9509-444b...@googlegroups.com>,
...

You might find this helpful:

<http://www.w3.org/Style/Examples/011/firstcss.en.html>

Or pick from these languages:

� /Style/Examples/011/firstcss.uk.html.redirect (common basename)
� /Style/Examples/011/firstcss.sl.tmpl (common basename)
� /Style/Examples/011/firstcss.sl.html (common basename)
� /Style/Examples/011/firstcss.ro.html.redirect (common basename)
� /Style/Examples/011/firstcss.nl.html (common basename)
� /Style/Examples/011/firstcss.id.html.redirect (common basename)
� /Style/Examples/011/firstcss.de.html.redirect (common basename)
� /Style/Examples/011/firstcss.var (common basename)
� /Style/Examples/011/firstcss.ru.html.redirect (common basename)
� /Style/Examples/011/firstcss.es.tmpl (common basename)
� /Style/Examples/011/firstcss.sr.html.redirect (common basename)
� /Style/Examples/011/firstcss.it.html.redirect (common basename)
� /Style/Examples/011/firstcss.pt.html.redirect (common basename)
� /Style/Examples/011/firstcss.en.tmpl (common basename)
� /Style/Examples/011/firstcss.pl.html.redirect (common basename)
� /Style/Examples/011/firstcss.th.html (common basename)
� /Style/Examples/011/firstcss.es.html (common basename)
� /Style/Examples/011/firstcss.fr.tmpl (common basename)
� /Style/Examples/011/firstcss.zh-hant.html.redirect (common
basename)
� /Style/Examples/011/firstcss.nl.tmpl (common basename)
� /Style/Examples/011/firstcss.th.tmpl (common basename)
� /Style/Examples/011/firstcss.zh-hans.html.redirect (common
basename)
� /Style/Examples/011/firstcss.fr.html (common basename)

--
dorayme

Beauregard T. Shagnasty

unread,
Mar 10, 2013, 7:17:30 AM3/10/13
to
Ferrous Cranus wrote:

> I have fixed this!
>
> Look at superhost.gr now! is beautifull. 2 issues:

Perhaps you should start by correcting all of the errors in your coding.

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsuperhost.gr%2F>
"Errors found while checking this document as HTML5!
Result: 93 Errors, 3 warning(s) "

<http://jigsaw.w3.org/css-validator/validator?
profile=css21&warning=0&uri=http%3A%2F%2Fsuperhost.gr%2F>
"Sorry! We found the following errors (3)"

Not all browsers attempt to correct errors in the same way, therefore you
may/will see differences among browsers.

--
-bts
-This space for rent, but the price is high

Ferrous Cranus

unread,
Mar 10, 2013, 7:36:33 AM3/10/13
to
And i have to set width: 261px; otherwise extra red appears behind each cell if i make the width any bigger than 261px.

Why is that happenign? How can i fix this?
I hope i gave you understand what the problem is, if not ask me please.

Jonathan N. Little

unread,
Mar 10, 2013, 10:41:57 AM3/10/13
to
Look, your main problem is not with your styles. Your markup is so
invalid it is a wonder that you get any satisfactory results. One small
example is the number of errors i8s just two lines:

<tr><td><center><a href="http://superhost.gr"><font color=lime size=5>
superhost.gr</a></td></tr>
<tr><td><center><a href="http://varsa.gr"><font color=lime size=5>
varsa.gr</a></td></tr>

The browsers have to work so hard to make some kind of sense will all
the errors there is no hope that you will get any predictable results.
Don't worry about a little extra red, first fix your markup and make it
valid, then come back and we can address the styling else you will just
be chasing you tail and never solve the issues...

Jonathan N. Little

unread,
Mar 10, 2013, 10:43:08 AM3/10/13
to
It is what I have been saying but the message is not being received...
0 new messages