how to make this into a table format using css

sarmenhb · 12-08-2008, 08:01 AM

hello,

i'm working on my portfolio

and what i'm trying to do is

look in the content area on this page http://www.sarmenhb.com/new/

i'm trying to display the items stacked up horizontally to be stacked vertically as if placed horizontally. but it wont work,

i tried placing it into li elements and displaying it inline but that wont work... how can i do this? i know it can be done within a table but iwant to try doing it witout a table.

let me know what i can do

thanks.

9three · 12-08-2008, 11:27 PM

I'm not sure if I understand you correctly but you want to stack around 4 "items" horiztonal and keep stacking them vertically? Something like this:

Section 1 | Section 2 | Section 3 | Section 4
---------------------------------------------------
Section 5 | Section 6 | Section 7 | Section 8

If thats the case, you can setup 2 DIVs width around 800px-1000px or so and *IN* the DIV create 4 more DIVs, one for each section. Finally, repeat the same thing for the bottom section except it will be right under the first 4. Hope this helps. Let me know if you need more help.

tony · 12-11-2008, 02:22 AM

If what you mean is as 9three, just want a list that would go vertical after a certain quantity of horizontal elements, you could have a simple list like this:

HTML Code:

<style type="text/css">
ul#section{margin:0; padding:0; 400px;}
 ul#secion li{margin0; padding:0; width:100px; display:block; float:left;}
.clear{clear:both; height:0;}
</style>

<ul id="section">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <div class="clear"></div>
</ul>

of course the width of the ul = (width of li)*(number of li's in a line)

sarmenhb · 12-11-2008, 02:58 AM

hi, thanks to both of your replies

i tried tony's and 9three's suggestions and its not turning into a table look. can you take a look and see if i might be doing something wrong?

basically what i want is something like this

Security | SEO | W3C Compliancy
--------------------------------
handicap | Tables | Cross-Browser

just like 9three guessed

thanks for your suggestions

btw, i uploaded the page to sarmenhb.com

tony · 12-11-2008, 03:33 AM

my bad, I forgot that you need to clear (put a <div class="clear"></div>) for every 3 li's or as many elements you want to show per line: it would look like this:

HTML Code:

<style type="text/css">
body,td,th {font:13px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ccc;}
body {background:#585855; margin:0; padding:0;}

h3{color:#ff9827;}
.clear{clear:both; display:block; height:0px; width:100%;}
ul#aspects{margin:100px auto 100px; padding:0; list-style:none; list-style-position:inside; width:660px;}
 ul#aspects li{margin:0; padding:0 10px 10px; width:200px; float:left;}/* total width=witdh+padding=220px*/
</style>

<ul id="aspects">
    <li>
        <h3>Security</h3>
        <p>With the increased levels of website penetration that exists today I am up to date with the latest techniques to guard against such attacks and allowing clients to stay at ease knowing their confidential account information is safely guarded.</p>
    </li>
    <li>
        <h3>Search Engine Optimization</h3>
        <p>the competition grows it becomes harder for clients have their websites rank higher in popular search engines such as google, yahoo, and many more. But with my experienced techniques in which i have learned through trial and error i found ways to rank a clients website so that it can gain the popularity with the required</p>
    </li>
    <li>
        <h3>W3C Compliancy</h3>
        <p>After i am completed with a project i verify the website against W3C's requirements to assure the website is running as clean as possible with or witout errors which allows the domain to rank higher than other domains that relate to the website.</p>
    </li>
    <div class="clear"></div>
    <li>
        <h3>Handicap Friendly</h3>
        <p>It is important not only to me but a majority of the audience for a website to be handycap friendly. a handicap friendly website is one that can be used by people who have a disability who would not be able to use the website through the normal way and can be used thourgh the special way.</p>
    </li>
    <li>
        <h3>table-less design</h3>
        <p>Text goes here.</p>
    </li>
    <li>
        <h3>Cross-Browser Compliant</h3>
        <p>All designs and programming that is produced through me are verified against popular and non-popular browser and made sure that they are rendered the same way for everyone no matter what browser they are using.</p>
    </li>
    <div class="clear"></div>
</ul>

Also I think, and this is a personal opinion, that is pointless that the site is using framesets and just one frame, when the main reason to use frames is to include different parts of a webpage and only change the "content" part. But in the site is just one frame accessing one page, so you could make your code clearer by just using that page to begin with then trying to access it with the conglomeration of all that frame stuff.
Instead you can just keep it simple with (X)HTML and add that functionality of including just certain html code with PHP.

that's just my point. I don't even know if I made it across right :P

sarmenhb · 12-11-2008, 04:13 AM

thanks dude! exactly what i was looking for, you rock.