Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > for mscir....others looking for help on desiging basic layout with css

Reply
Thread Tools

for mscir....others looking for help on desiging basic layout with css

 
 
Richard
Guest
Posts: n/a
 
      04-08-2004
www.1-large-world.com/samples/sample1.html

This shows my concept of using a container box for your entire page, then
including a sidebar, header, body, and footer.
Which is the basic layout design of most simple sites.

This approach does not break, and allows for flexibility.
Need a 3 column layout? No problem.
Add another division as your container for which ever divisions you want to
seperate from the 3rd column.
Use float:left in that container.
Add your column.

www.1-large-world.com/samples/sample2.html



 
Reply With Quote
 
 
 
 
mscir
Guest
Posts: n/a
 
      04-08-2004
Richard wrote:
> www.1-large-world.com/samples/sample1.html
>
> This shows my concept of using a container box for your entire page, then
> including a sidebar, header, body, and footer.
> Which is the basic layout design of most simple sites.
>
> This approach does not break, and allows for flexibility.
> Need a 3 column layout? No problem.
> Add another division as your container for which ever divisions you want to
> seperate from the 3rd column.
> Use float:left in that container.
> Add your column.
>
> www.1-large-world.com/samples/sample2.html


Thanks Richard, interesting examples. I'm just now looking at tableless
layouts, always used tables before. I played around with the values and
was wondering if you could tell me why the column with the header,
mymain and footer divs extends slightly farther down the page than the
sidebar div (about the thickness of the border line or slightly more)?

..big1 {width: 100%; height: 2000px; border: none; background:gold;}
..sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
..header {width: 100%; height: 80px; border: solid green;}
..mymain {width: 100%; height: 1900px; border: solid red;}
..footer {width: 100%; height: 20px; border: solid blue;}

 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      04-08-2004
mscir wrote:

> Richard wrote:
>> www.1-large-world.com/samples/sample1.html
>>
>> This shows my concept of using a container box for your entire page,
>> then including a sidebar, header, body, and footer. Which is the basic
>>layout design of most simple sites. This approach does not break, and
>>allows for flexibility. Need a 3 column layout? No problem. Add another
>>division as your container for which ever divisions you want to seperate
>>from the 3rd column. Use float:left in that container. Add your
>>column. www.1-large-world.com/samples/sample2.html


> Thanks Richard, interesting examples. I'm just now looking at tableless
> layouts, always used tables before. I played around with the values and
> was wondering if you could tell me why the column with the header,
> mymain and footer divs extends slightly farther down the page than the
> sidebar div (about the thickness of the border line or slightly more)?


> .big1 {width: 100%; height: 2000px; border: none; background:gold;}
> .sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
> .header {width: 100%; height: 80px; border: solid green;}
> .mymain {width: 100%; height: 1900px; border: solid red;}
> .footer {width: 100%; height: 20px; border: solid blue;}


..big1 should be the only one as a 100% width.
All others should be slightly less.
Same for the height if used.
This allows for the borders which are always there but not visible unless
you define a color other than the body of the division.
So with your 3 totals, you probably have something like 2,006 pixels instead
of 2,000.
Instead of 1900, use say like 1890 or so.
Then you'll have a little gap at the bottom instead of over run.


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      04-08-2004
mscir wrote:
> Richard wrote:
>> www.1-large-world.com/samples/sample1.html
>> www.1-large-world.com/samples/sample2.html

>
> Thanks Richard, interesting examples.


Please, don't even consider using any example Richard comes up with. He
doesn't have a grasp of even basic CSS priciples, so resorts to kludges
and hacks in a futile attempt to make something work. It's crap.

> I'm just now looking at tableless
> layouts, always used tables before.


You would do well to study better examples. Here is a place to start:
<URL:http://nemesis1.f2o.org/templates.php>

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      04-08-2004

"kchayka" wrote:

> mscir wrote:
> > Richard wrote:
> >> www.1-large-world.com/samples/sample1.html
> >> www.1-large-world.com/samples/sample2.html

> >
> > Thanks Richard, interesting examples.

>
> Please, don't even consider using any example Richard comes up with. He
> doesn't have a grasp of even basic CSS priciples, so resorts to kludges
> and hacks in a futile attempt to make something work. It's crap.
>


The two items I show here are valid examples.
They are based upon the same coding found at many of the online well known
tutorials.
What specifically does not agree with you?


 
Reply With Quote
 
mscir
Guest
Posts: n/a
 
      04-08-2004
kchayka wrote:
> mscir wrote:
>>Richard wrote:
>>
>>>www.1-large-world.com/samples/sample1.html
>>>www.1-large-world.com/samples/sample2.html

>>
>>Thanks Richard, interesting examples.

>
> Please, don't even consider using any example Richard comes up with. He
> doesn't have a grasp of even basic CSS priciples, so resorts to kludges
> and hacks in a futile attempt to make something work. It's crap.
>
>>I'm just now looking at tableless
>>layouts, always used tables before.

>
> You would do well to study better examples. Here is a place to start:
> <URL:http://nemesis1.f2o.org/templates.php>


Very impressive site!

Thanks,
Mike

 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      04-08-2004
Richard wrote:

> "kchayka" wrote:
>> > Richard wrote:
>> >> www.1-large-world.com/samples/sample1.html
>> >> www.1-large-world.com/samples/sample2.html

>>
>> It's crap.

>
> The two items I show here are valid examples.


Valid code doesn't mean it is _good_ code. I can't remember anything
you've ever posted that was a _good_ example.

> What specifically does not agree with you?


Start at "height:3000px" and go from there.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
informant
Guest
Posts: n/a
 
      04-08-2004

"Richard" <Anonymous@127.001> wrote in message
news:(E-Mail Removed)...
>
> "kchayka" wrote:
>
> > mscir wrote:
> > > Richard wrote:
> > >> www.1-large-world.com/samples/sample1.html
> > >> www.1-large-world.com/samples/sample2.html
> > >
> > > Thanks Richard, interesting examples.

> >
> > Please, don't even consider using any example Richard comes up with. He
> > doesn't have a grasp of even basic CSS priciples, so resorts to kludges
> > and hacks in a futile attempt to make something work. It's crap.
> >

>
> The two items I show here are valid examples.
> They are based upon the same coding found at many of the online well known
> tutorials.
> What specifically does not agree with you?


Have you ever understood when they told you, Bullis?


Path:
sn-us!sn-xit-05!sn-xit-09!supernews.com!news.maxwell.syr.edu!pln-e!spln!dex!
extra.newsguy.com!newsp.newsguy.com!news4
From: "Richard" <Anonymous@127.001>
Newsgroups: alt.html
Subject: Re: for mscir....others looking for help on desiging basic layout
with css
Date: Thu, 8 Apr 2004 10:18:28 -0500
Organization: http://newsguy.com
Lines: 21
Message-ID: <(E-Mail Removed)>
References: <(E-Mail Removed)>
<(E-Mail Removed)>
<c53p36$2os4eo$(E-Mail Removed)-berlin.de>
NNTP-Posting-Host: p-451.newsdawg.com
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
Xref: sn-us alt.html:456378



 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      04-09-2004
kchayka wrote:

> mscir wrote:
>> Richard wrote:
>>> www.1-large-world.com/samples/sample1.html
>>> www.1-large-world.com/samples/sample2.html

>>
>> Thanks Richard, interesting examples.


> Please, don't even consider using any example Richard comes up with. He
> doesn't have a grasp of even basic CSS priciples, so resorts to kludges
> and hacks in a futile attempt to make something work. It's crap.


>> I'm just now looking at tableless
>> layouts, always used tables before.


> You would do well to study better examples. Here is a place to start:
> <URL:http://nemesis1.f2o.org/templates.php>


I checked out a few of the examples and every one broke down in IE when
screen size was not at max.
That is the purpose of the main container. So the the internal divisions do
not break down.
http://www.fu2k.org/alex/css/layouts...4_FMFM_B.mhtml
This one though, is the same basic layout I use and it does not break down.



> --
> Reply address is a bottomless spam bucket.
> Please reply to the group so everyone can share.



 
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
C++ design/over desiging : stl style vs OOPS, OOAD persres@googlemail.com C++ 15 10-21-2011 11:28 AM
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
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments