Re: [WSG] two column ALAS!
Thanks for all the replies about two column layouts. It certainly helps. Alas, I see I need more. I am trying to change a current html page with massive tables to the css layout. I inherited this page. There are some things I don't know how to switch to the css style. For instance, just under the banner, there is a bar that displays the current date and year. I can't figure how to get that bar in the layout. If someone is willing to look at the page to see what I need to change I would be grateful. I really want the layout the same, but I want css with the content first in source. Will someone help me, please. Thanks! JoAn - Original Message - From: Scott Swabey - Lafinboy Productions [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Saturday, September 17, 2005 9:07 PM Subject: RE: [WSG] two column Hi JoAn, and welcome to the list Have a read of some of the articles over at A List Apart (http://www.alistapart.com/articles/negativemargins/) which should give you a good grounding for a source ordered 2 column layout. Regards Scott Swabey Lafinboy Productions www.lafinboy.com -Original Message- Subject: [WSG] two column Hi! I'm new to the list and to CSS. I really need a two column source-ordered CSS layout so that the left column can be used for navigation and the 2nd column would be for content. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] two column ALAS! BIG OOPS!
LOL! I forgot to put the page address in. DUH. Here it is: www.norfolkwholesalefloral.com The current css is very minimal with only font style, link colors, and that's about it. Thanks again! JoAn - Original Message - From: JoAn [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Sunday, September 18, 2005 12:51 PM Subject: Re: [WSG] two column ALAS! Thanks for all the replies about two column layouts. It certainly helps. Alas, I see I need more. I am trying to change a current html page with massive tables to the css layout. I inherited this page. There are some things I don't know how to switch to the css style. For instance, just under the banner, there is a bar that displays the current date and year. I can't figure how to get that bar in the layout. If someone is willing to look at the page to see what I need to change I would be grateful. I really want the layout the same, but I want css with the content first in source. Will someone help me, please. Thanks! JoAn - Original Message - From: Scott Swabey - Lafinboy Productions [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Saturday, September 17, 2005 9:07 PM Subject: RE: [WSG] two column Hi JoAn, and welcome to the list Have a read of some of the articles over at A List Apart (http://www.alistapart.com/articles/negativemargins/) which should give you a good grounding for a source ordered 2 column layout. Regards Scott Swabey Lafinboy Productions www.lafinboy.com -Original Message- Subject: [WSG] two column Hi! I'm new to the list and to CSS. I really need a two column source-ordered CSS layout so that the left column can be used for navigation and the 2nd column would be for content. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] two column
This works as long as the side column is shorter than the main column.
View it here: http://www.manisheriar.com/wsg/twoColumn/
html:
div id=container
div id=header
h1This is the Head/h1
/div!-- end head --
div id=wrapper
div id=content
h2This is the content./h2
... several paragraphs here ...
/div! -- end content --
div id=sidebar
h3This is the sidebar/h3
... list here ...
/div!-- end sidebar --
/div!-- end wrapper --
div id=footer
h4This is the footer/h4
/div
/div!-- end container --
css:
body {
font:normal .9em/1.2em Verdana,Arial,Helvetica,sans-serif;
color:#333;
padding:20px 40px;
background-color:#33;
}
#container {
border:10px solid #fff;
}
#header {
background-color:#FFCCFF;
border-bottom:10px solid #fff;
padding:20px;
}
#wrapper {
position:relative;
background-color:#99;
}
#content {
margin-left:160px;
background-color:#CC;
padding:20px;
border-left:10px solid #fff;
}
#sidebar {
position:absolute;
top:0;
left:0;
width:140px;
padding:10px;
font-size:90%;
}
#footer {
clear:both;
border-top:10px solid #fff;
background-color:#99;
padding:20px;
}
HTH,
Mani
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] two column - CORRECTION
Oops - always test in IE before posting, eh? ;~)
Changed the css code of sidebar to:
#sidebar {
position:absolute;
top:0;
left:0 !important;
left:-190px;
width:140px;
padding:10px;
font-size:90%;
}
To deal with IE.
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] two column
Hi! I'm new to the list and to CSS. I really need a two column source-ordered CSS layout so that the left column can be used for navigation and the 2nd column would be for content. I suppose I'd need about 160px for the left nav and the balance for the content. But I'd like the content source to show first in the source code. Plus I'll need the header and the footer. I've searched and searched but can only find the 3 column source-ordered layout and can't figure out how to redo it to two column. Would you help me out please? Thanks in advance! JoAn
RE: [WSG] two column
Hi JoAn, and welcome to the list Have a read of some of the articles over at A List Apart (http://www.alistapart.com/articles/negativemargins/) which should give you a good grounding for a source ordered 2 column layout. Regards Scott Swabey Lafinboy Productions www.lafinboy.com -Original Message- Subject: [WSG] two column Hi! I'm new to the list and to CSS. I really need a two column source-ordered CSS layout so that the left column can be used for navigation and the 2nd column would be for content. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] two column
Hi JoAn, WSG member Andrew Krespanis put together an excellent presentation on a 3-column content source ordered layout at http://www.leftjustified.net/site-in-an-hour/ with the actual site at http://www.leftjustified.net/site-in-an-hour/site/. I realise that you're after a two column layout and that is the beauty of Andrew's design, it couldn't be easier to convert it two a 2 column layout. Here's a quick and dirty guide: - Remove the column #right in the HTML source code (was the right column) - In the default.css style sheet, change the percentage of #sub to 99% to fill the container width (#outer) - In the default.css style sheet, Change the width of #center to fill the width of #sub (the container of the two columns) Presto, a rock solid two column layout. I imagine you'll want to do some tweaking to the above and both the CSS and HTML is well documented in terms of how the design works. Note from Andrew: Get rid of the ie7 script that is included as it has been known to cause IE to crash. It's only there for max. and min width support, which you won't be needing if you're making a fixed width design. Best of luck, Ryan Blunden From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of JoAn Sent: Sunday, 18 September 2005 10:41 AM To: wsg@webstandardsgroup.org Subject: [WSG] two column Hi! I'm new to the list and to CSS. I really need a two column source-ordered CSS layout so that the left column can be used for navigation and the 2nd column would be for content. I suppose I'd need about 160px for the left nav and the balance for the content. But I'd like the content source to show first in the source code. Plus I'll need the header and the footer. I've searched and searched but can only find the 3 column source-ordered layout and can't figure out how to redo it to two column. Would you help me out please? Thanks in advance! JoAn ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Two column left navigation
I have a web site with a left navigation system consisting of images and text in 2 columns. The image is displayed on the left, with the text link to the right of it. At the moment this is displayed using a table. What would be the best way to display this without using tables, i.e. with a couple of divs for each image and text pair? The width of the container is fixed (at 220px), and the size of the left images is 100px. Thanks, Stephen -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.344 / Virus Database: 267.10.17/84 - Release Date: 29/08/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two column left navigation
G'day
I have a web site with a left navigation system consisting of images
and text in 2 columns.
The image is displayed on the left, with the text link to the right of
it.
...
The width of the container is fixed (at 220px), and the size of the
left images is 100px.
Why not use a simple (unordered) list? Since (as I read it) all the
images are the same size (width AND height?) you can float the image
left. Something like:
ul#nav li { height: 100px; } /* add whatever else you need */
ul#nav img { float:left; width:100px; height:100px; }
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Two column left navigation
Hi Kenny, That almost works, except the text of my links is more than one line long and wraps onto the next line. When it wraps, the 2nd line wraps underneath the image for some reason. Any suggestions? Stephen - Original Message - From: Kenny Graham To: wsg@webstandardsgroup.org Sent: Tuesday, August 30, 2005 11:39 AM Subject: Re: [WSG] Two column left navigation http://www.kennygraham.net/projects/wsg/stevio/index.htmlhttp://www.kennygraham.net/projects/wsg/stevio/style.css At the moment this is displayed using a table. What would be the best way todisplay this without using tables, i.e. with a couple of divs for each imageand text pair? No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.344 / Virus Database: 267.10.17/84 - Release Date: 29/08/2005
Re: [WSG] Two column left navigation
http://www.kennygraham.net/projects/wsg/stevio/index.html http://www.kennygraham.net/projects/wsg/stevio/style.css At the moment this is displayed using a table. What would be the best way to display this without using tables, i.e. with a couple of divs for each image and text pair?
Re: [WSG] Two column left navigation
Seems the list filtered out my last response (probably thought it was spam) so this time I'll include text along with the links. Is this what you want?: http://www.kennygraham.net/projects/wsg/stevio/index.html and the css: http://www.kennygraham.net/projects/wsg/stevio/style.css
Re: [WSG] Two column left navigation
In that case: http://www.kennygraham.net/projects/wsg/stevio/index2.html style: http://www.kennygraham.net/projects/wsg/stevio/style2.css
Re: [WSG] two column equal width fixed centred layout
On 8/19/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is there a best practice for having two columns of equal width side by side in a fixed width layout? I mean, is it better to float both columns left, or one left and one right etc. Are there any examples of this somewhere? You could try the css-discuss mailing list their wiki, e.g. http://css-discuss.incutio.com/?page=TwoColumnLayouts http://css-discuss.incutio.com/?page=TwoColumnFloat or Google the whole wiki for more discussion: http://www.google.com/search?q=site:css-discuss.incutio.com+two%20column HTH, James ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] two column equal width fixed centred layout
Hi Is there a best practice for having two columns of equal width side by side in a fixed width layout? I mean, is it better to float both columns left, or one left and one right etc. Are there any examples of this somewhere? Thanks Helen *** Helen Rysavy Web Designer Teaching Learning Development Group Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] CRICOS Provider No: 00300K *** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Two-column lists aligned side-by-side
Good evening all, I've tried researching this question online, and reviewing the following books in my library, Web Standards Solutions, and The CSS Anthology: 101 Essential Tips, Tricks and Hacks, but to no avail. Is there an accepted method of laying out two unordered lists, side-by-side (a two-column look), within the same content area? Any suggestions are always appreciated. Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two-column lists aligned side-by-side
Google search always brings up results on info you might need. Here's what I found: http://www.alistapart.com/articles/layeredfudge/ http://www.communitymx.com/content/article.cfm?cid=27F87print=true [EMAIL PROTECTED] wrote: Good evening all, I've tried researching this question online, and reviewing the following books in my library, Web Standards Solutions, and The CSS Anthology: 101 Essential Tips, Tricks and Hacks, but to no avail. Is there an accepted method of laying out two unordered lists, side-by-side (a two-column look), within the same content area? Any suggestions are always appreciated. Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two-column lists aligned side-by-side
Fantastic! Thank you David! I didn't even think of Google, but instead reviewed articles posted on some of my favorite standard's sites. The WSG members have been an enormous help, and I take my Stetson off to ya all! With much gratitude, Mario in Dallas Google search always brings up results on info you might need. Here's what I found: http://www.alistapart.com/articles/layeredfudge/ http://www.communitymx.com/content/article.cfm?cid=27F87print=true [EMAIL PROTECTED] wrote: Good evening all, I've tried researching this question online, and reviewing the following books in my library, Web Standards Solutions, and The CSS Anthology: 101 Essential Tips, Tricks and Hacks, but to no avail. Is there an accepted method of laying out two unordered lists, side-by-side (a two-column look), within the same content area? Any suggestions are always appreciated. Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] two column content problem
Hi everyone! I so much hate when I have to ask stupid questions, but I really can`t figure out what`s wrong with this page I`m working on. What I`m trying to do is divide the content in two columns, one with the main texts and such and the other one with details regarding the page. They are contained in a larger div called content which has the background an image that repeats itself on the y axis. The problem is that the background is not extended to cover the content of the larger column. I have no idea why this happens. It looks ok on IE6/Win, but not in Firefox 1.0.1. The URL for the page is http://claudius.dap.ro/smv/index.htm and the URL for the stylesheet is http://claudius.dap.ro/smv/style.css Any ideas please? Thank you Clau ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] two column content problem
Hi Claudia,
I haven't looked at the site, but it sounds like you need to add a clearing
element before closing content. There are a number of ways to do this, the
easiest being to create a class called something like .clear {clear:both;}.
Stick it in your html right before closing the content div like so:
div class=clear/div
/div !-- closes content --
IE doesn't require this, but just about everything else does.
Hope this helps
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Claudiu RADUT
Sent: Monday, March 07, 2005 4:38 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] two column content problem
Hi everyone!
I so much hate when I have to ask stupid questions, but I really can`t
figure out what`s wrong with this page I`m working on. What I`m trying
to do is divide the content in two columns, one with the main texts and
such and the other one with details regarding the page. They are
contained in a larger div called content which has the background an
image that repeats itself on the y axis. The problem is that the
background is not extended to cover the content of the larger column. I
have no idea why this happens. It looks ok on IE6/Win, but not in
Firefox 1.0.1.
The URL for the page is http://claudius.dap.ro/smv/index.htm and the URL
for the stylesheet is http://claudius.dap.ro/smv/style.css
Any ideas please? Thank you
Clau
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] two column IE issues - SOLVED
Hi, I'm having difficulties with that IE shift bug thing. The one where the content moves when you hover over a link. I've tried adding _height:100%; _line-height:100%; _width:100% To every element in the div to no avail. Example here: http://www.websemantics.co.uk/workshop/sessions/session2/ Hover over any Activity link and the div box changes proportions. Hover over a footer link and it changes back. Are there any solutions to this? Cheers. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] two column IE issues - SOLVED
Darren Wood wrote:
snip /
IE completely wrecks my design, refusing to float the sidenav to the right.
Any ideas how I could possibly fix this?
[NOTE: this thread is likely to bore most of you so please send
responses offlist, and I'll send the solution at the end once one
presents itself.]
Hey all,
Thanks for the replies. The issue has been solved by using a decedant
selector to hide the correct width from IE.
Joseph Lindsay provided the solution:
#sideNav {
width: 223px; /*fixed for IE */
margin-left: 453px;
background: #cdd2e0;
border-top: 20px solid #FFF;
text-align: left;
}
#wrapper#sidenav {
width: 225px; /* corrected for compliant browsers */
}
Thanks Joe!
Cheers
Darren
www.webdeveloper.co.nz
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] two column IE issues
Hey team! Like the rest of you I wish I didn't have to worry about IE. I do all my dev on a linux box running Firefox 0.10. Needless to say all my XHTML and CSS looks exactly the way I want it to...then I start testing in IE...sigh / http://dev.webdeveloper.co.nz/site/ [The CSS is in the source...] u: dev p: w3dev IE completely wrecks my design, refusing to float the sidenav to the right. Any ideas how I could possibly fix this? [NOTE: this thread is likely to bore most of you so please send responses offlist, and I'll send the solution at the end once one presents itself.] Thanks in advance! Darren www.webdeveloper.co.nz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] two column IE issues
Have you fixed it already? IE6 on WinXP looks the same as Firefox 0.9... On Wed, 27 Oct 2004 16:13:13 +1300, Darren Wood [EMAIL PROTECTED] wrote: Hey team! Like the rest of you I wish I didn't have to worry about IE. I do all my dev on a linux box running Firefox 0.10. Needless to say all my XHTML and CSS looks exactly the way I want it to...then I start testing in IE...sigh / http://dev.webdeveloper.co.nz/site/ [The CSS is in the source...] u: dev p: w3dev IE completely wrecks my design, refusing to float the sidenav to the right. Any ideas how I could possibly fix this? [NOTE: this thread is likely to bore most of you so please send responses offlist, and I'll send the solution at the end once one presents itself.] Thanks in advance! Darren www.webdeveloper.co.nz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Jason Foss Almost Anything Desktop Publishing www.almost-anything.com.au Windows Messenger: [EMAIL PROTECTED] North Rockhampton, Queensland, Australia We can do almost anything! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] two column IE issues
Same here, tested on Firefox and IE all looks the same (and very nice to boot). On Wed, 27 Oct 2004 15:35:28 +1000, Jason Foss [EMAIL PROTECTED] wrote: Have you fixed it already? IE6 on WinXP looks the same as Firefox 0.9... On Wed, 27 Oct 2004 16:13:13 +1300, Darren Wood [EMAIL PROTECTED] wrote: Hey team! Like the rest of you I wish I didn't have to worry about IE. I do all my dev on a linux box running Firefox 0.10. Needless to say all my XHTML and CSS looks exactly the way I want it to...then I start testing in IE...sigh / http://dev.webdeveloper.co.nz/site/ [The CSS is in the source...] u: dev p: w3dev IE completely wrecks my design, refusing to float the sidenav to the right. Any ideas how I could possibly fix this? [NOTE: this thread is likely to bore most of you so please send responses offlist, and I'll send the solution at the end once one presents itself.] Thanks in advance! Darren www.webdeveloper.co.nz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Jason Foss Almost Anything Desktop Publishing www.almost-anything.com.au Windows Messenger: [EMAIL PROTECTED] North Rockhampton, Queensland, Australia We can do almost anything! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Website Designer/Developer www.nataliebuxton.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Two column CSS layout. One fixed when scrolling in IE?
Can anyone point me to a resource or let me know if it is possible to have
a two column layout and have one of them fixed when the page is scrolled in
Internet Explorer.
I am aware that position: fixed works in CSS 2 supported browsers but IE
doesn't recognise this.
I have seen some javascript API's that do something similar but want to try
and avoid API's if I can.
I have also tried this hack
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
but there is some strange behaviour with the browser scroll bars floating
below the content and the browser scrollbars now appear when the page is
printed.
I also looked at left: expression(document.body.scrollLeft + offsetWidth -
offsetWidth + 625); and the equivalent top property for IE browsers but
the div still flickers.
So if anyone has any other suggestions that would be great.
-- -- -- -- -- -- --
David Marsh
[EMAIL PROTECTED]
http://www.marshy.com/
*
The discussion list for http://webstandardsgroup.org/
*
