473,804 Members | 2,296 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

3 columns: fixed center column

Hello

i like to make the following lay out:

- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
- left column has a background picture
- right column has another background picture

So the left and right column are fluid and the width wil change when the
browser window width is changing.

I don't know how to do this. Anyone?

Here is some code:

http://www.keyone.nl/temp/

Nov 26 '05
40 4497
Mark <sc*****@xs4all .nl> wrote:
Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm


A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.


Resize images with your graphics editor and code them with their natural
size in the HTML, don't use HTML or CSS to get the browser to resize
them. Browsers do a poor job at resizing, the graphics looks quite ugly
now.

Your masthead alignment is also messed up now:
http://homepage.ntlworld.ie/spartanicus/keyone.png

--
Spartanicus
Nov 28 '05 #21
Spartanicus wrote:
Mark <sc*****@xs4all .nl> wrote:

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm


A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.

Resize images with your graphics editor and code them with their natural
size in the HTML, don't use HTML or CSS to get the browser to resize
them. Browsers do a poor job at resizing, the graphics looks quite ugly
now.

Your masthead alignment is also messed up now:
http://homepage.ntlworld.ie/spartanicus/keyone.png


Yep, that is a problem. But i like to build a zoom-layout. But i am
still not sure if i go on on that. The masthead alignemtn is indeed
messed up now, so i have to make a choice: try to get the alignement
right, or don't build a zoom-layout like this.

Mark

Nov 28 '05 #22
Mark wrote:

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.


This is what i want:
http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. [...]

How about this: <http://twosohnens.us/test/t.html>.
Because of the fixed width padding and border, content_rechts
eventually wraps below content_links. But the viewport has to be fairly
narrow before that happens.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Nov 29 '05 #23
Mark <sc*****@xs4all .nl> wrote:
So far i have this result: http://www.keyone.nl/temp/site05/
But i like to build a zoom-layout.


There is no point in having the logo image resize if you want a layout
that accommodates user text zooming (I assume that's what you mean by
"zoom-layout").

The current logo graphic is perfect for building a masthead whose width
varies depending on the user's text settings:
http://homepage.ntlworld.ie/spartanicus/keyone2.htm

There's a z-index issue in IE that I couldn't be bothered to work
around, it's left in for you to fix.

--
Spartanicus
Nov 29 '05 #24
Spartanicus wrote:
Mark <sc*****@xs4all .nl> wrote:

So far i have this result: http://www.keyone.nl/temp/site05/

But i like to build a zoom-layout.

There is no point in having the logo image resize if you want a layout
that accommodates user text zooming (I assume that's what you mean by
"zoom-layout").

The current logo graphic is perfect for building a masthead whose width
varies depending on the user's text settings:
http://homepage.ntlworld.ie/spartanicus/keyone2.htm

There's a z-index issue in IE that I couldn't be bothered to work
around, it's left in for you to fix.


Thanks again.

I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

Mark

Nov 29 '05 #25
Jim Moe wrote:
Mark wrote:

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.

This is what i want:
http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. [...]

How about this: <http://twosohnens.us/test/t.html>.
Because of the fixed width padding and border, content_rechts
eventually wraps below content_links. But the viewport has to be fairly
narrow before that happens.


Thanks!

I am working on a final one now and all the info was very welcome.

Mark

Nov 29 '05 #26
Mark <sc*****@xs4all .nl> wrote:
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.


Definitely not something to emulate.

--
Spartanicus
Nov 29 '05 #27
On Mon, 28 Nov 2005 21:15:01 +0100, Stephen Poley
<sb************ ******@xs4all.n l> wrote:
On Sun, 27 Nov 2005 20:09:34 +0100, Mark <sc*****@xs4all .nl> wrote:
kchayka wrote:
It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content" ></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.


What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.


I tried to knock up a very quick attempt. I think this is approximately
what you're looking for:

http://www.xs4all.nl/~sbpoley/misc/backgrtest.html

Worked in Opera at the first attempt, but sadly not in either IE or
Firefox. Not sure what the problem is - any suggestions?


Now fixed in Firefox, which apparently doesn't like negative z-indices.
IE still isn't co-operating though.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Nov 29 '05 #28
In article <43************ **@xs4all.nl>, Mark <sc*****@xs4all .nl>
wrote:
But i like to build a zoom-layout.


I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.


I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?

--
http://www.ericlindsay.com
Nov 30 '05 #29
Eric Lindsay wrote:
In article <43************ **@xs4all.nl>, Mark <sc*****@xs4all .nl>
wrote:

But i like to build a zoom-layout.

I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?


If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

Mark

Nov 30 '05 #30

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
5634
by: Dennis | last post by:
In CSS3 it looks like we'll have multiple column flowing of text (newspaper style) in which the number of columns can be determined automatically given the available horizontal space. http://www.w3.org/TR/css3-multicol/ Until then, what's the current best practice for achieving the same effect? Or is it just not possible yet? Thanks ... Dennis
7
3248
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my rough layout:
1
1320
by: Jennifer | last post by:
I have a datagrid where I am trying to align some columns to the center. The rest should be aligned to the right. When I try the code below I get an error message saying that the index is out of bounds. When debugging I get the column count of the datagrid to be 1. I find this rather ridiculous only because there are 61 columns that I can physically see. :) Plus, the data table that I am using to bind the datagrid has a count of 61. ...
13
2495
by: scorpion53061 | last post by:
Very urgent and I am very close but need a little help to get me over the edge........ I need to write these columns to a html file with each row containing these columns (seperated by breaks). Currently this code write all columns to a single row which works but is not what the boss wants. If anyone has suggestions how you would do a report like this I very much would like to hear them as well. vb.net windows app. ...
4
1337
by: Chuck Foster | last post by:
I have a datagrid and I want 3 columns to share the same column header. I have ColID, ColName, and 3 Hyperlink columns that need to have AdminFunctions as their header. Anyone know how to accomplish that? Thanks in advance for any help! Thanks, Chuck Foster
5
3799
by: Abhijeet Kumar | last post by:
Hi I am working with ASP.NET2.0, How can i freeze some of the columns of GridView Control. Thanks in Advance.
2
11726
by: Jacksm | last post by:
How can I align an asp:table columns with gridview columns (the widths)? I have tried setting table.column(0).width = gridview.column(0).width at page_load but it doesn't work. Thanks in advance
31
3116
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!
2
14737
by: bgold12 | last post by:
I have a problem that can be simplified to the following: I have a table with three columns. I need the middle column to be fixed width, let's say 100px. The other two columns I want to be variable width, such that one (say the left column) will minimize its width to the smallest it can be while still fitting a short line of text (no more than 32 characters) on a single line with no breaks. The right column I would then want to maximize...
0
9714
marktang
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...
0
9594
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,...
0
10599
Oralloy
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...
0
10346
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10090
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7635
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6863
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();...
0
5673
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4308
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.