I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see http://users.telenet.be/sacn/tmp/layout.png.
I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...
I want to use as few div's as possible, e.g. something like below:
<div id="container" >
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
I did search on the internet for a suitable template to start with, but
couldn't find one.
Jul 12 '06
16 3043
Jef Driesen wrote:
>>And there is also the possibility to specify those fixed widths in ems...
Which means that when you only have an 800x600 screen, and you crank up the font-size, you end up scrolling horizontally for each line you wanna read.
If you view a liquid layout with a large font on a such a small screen,
you have to read a very narrow column. Also not optimal!
True, but if I'd have to choose between very narrow columns or using
my mouse and scrollbar for every single line, I'd choose the narrow
column. What would you choose?
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Dr Alban - Sing hallelujah
Els wrote:
Jef Driesen wrote:
>>>And there is also the possibility to specify those fixed widths in ems... Which means that when you only have an 800x600 screen, and you crank up the font-size, you end up scrolling horizontally for each line you wanna read.
If you view a liquid layout with a large font on a such a small screen, you have to read a very narrow column. Also not optimal!
True, but if I'd have to choose between very narrow columns or using
my mouse and scrollbar for every single line, I'd choose the narrow
column. What would you choose?
I would also prefer the narrow column.
Jef Driesen wrote:
(http://users.telenet.be/sacn/tmp/v5)
None of your samples fit in my browser window without a horizontal
scrollbar.
Your liquid is drying out... <g>
--
-bts
-Warning: I brake for lawn deer
Beauregard T. Shagnasty wrote:
Jef Driesen wrote:
>(http://users.telenet.be/sacn/tmp/v5)
None of your samples fit in my browser window without a horizontal
scrollbar.
Your liquid is drying out... <g>
How large is your browser window? And there never was any liquid...
On Fri, 14 Jul 2006 12:34:46 +0200, Jef Driesen
<je********@hot mail.com.invali dwrote:
>IE can be made to play nice (albeit quite a bit more complex than other browsers): <http://www.svendtofte. com/code/max_width_in_ie/>
I will certainly take a look at that. But after a very quick reading, it seems they are using non-standards syntax, which will not validate.
To put it mildly. However one can put this in a separate file and
include it within an IE conditional comment. Then nothing other than IE
receives it.
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
Jef Driesen wrote:
I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see http://users.telenet.be/sacn/tmp/layout.png.
I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don't like
reading very long lines and IE does not support the max/max-height
properties.
* columns don't need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...
Based on the feedback in this newsgroup an some further research, I
decided to drop the fixed width template and create a liquid layout. My
first attempt can be viewed here: http://users.telenet.be/sacn/www/templates/liquid/v1/
It is based on http://www.alistapart.com/articles/negativemargins/. Only
disadvantage is I need an extra <divin the content column, but the
advantage is I don't need any box-model hack anymore. The only issue
remaining (as far as I know) is the bottom-margin of the last element in
the two columns is added to the padding, which results in to much
whitespace. I don't know a method to remove this margin (besides adding
a special class to the last element, but this is easily to forget when
creating pages). And removing the padding results in no whitespace in
older browsers like IE5.x.
Is there a way to hide the max-width workaround for all browsers (except
IE <= 6) without using conditional comments? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Doug McCrae |
last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html
As it says in the subject, a two column layout (plus header and footer
boxes). I feel the left column really needs to be fixed width (151px) as it
contains an image, while everything else is fluid. However this only works
in IE 6.0. In Netscape and Opera I found that the auto width of the right
column is 100% so it jumps down below the menu if the left column is fixed -
not...
|
by: Zak McGregor |
last post by:
Hi all
I have a simple 3 column css layout here:
http://www.carfolio.com/newlook.dhtml
However, when the centre column is wider than the screen (yes, it does
happen on some pages on the site and no it can't happen differently) then
the 3rd column overlays itself over the middle column's content. Is there
a css-based 3 column layout without ugly hacks that will give me a 3rd
column as far to the right as need be? Can anyone suggest a...
|
by: Dan V. |
last post by:
How do you do a css 2 column layout with header and footer, with the 2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as min.
and 1024 x 768 resolution as a max?
Ideally the layout would be centered so it scales better visually.
This would be great for me.
Thanks,
|
by: Ed |
last post by:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?
I know I can add float: left; to the content div and it sort of works,
but it doesn't seem right either. In this case the content div and the
side bar div will no longer stay in their...
|
by: Tamblyne |
last post by:
This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)
I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus...
| |
by: Spondishy |
last post by:
OK... After a previous post, I've decided that the site layout will be
two columns
The layout will be:
1) Page 100% wide
2) Right column will be fixed 150px, left column will use the rest of
the space
|
by: Andrew |
last post by:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.
I have the following (very simple) markup:
<div id="head">...</div>
<div id="left">...</div>
|
by: Sarita |
last post by:
Hello,
this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.
Any way this is possible?
Thanks for your help, it is highly appreciated!
|
by: hzgt9b |
last post by:
I want a page with a centered div containing two rows. Top row has an
image and some text. The bottom row needs to have three columns. I'd
love to have the 1st column set to a fixed width then have the 2nd and
3rd columns fill the remaining space but I've given up on that and am
willing to settle for the second row to have a fluid 3-column layout
(or something else simple).
Anyway, I've developed a page where the second row has this 3...
|
by: Death Slaught |
last post by:
I will be showing you how to make a very simple but effective three column layout.
First we will begin with the HTML, or structure, of our three column layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| |
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |