473,788 Members | 2,825 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

four divs on one page?


I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Any hints?

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Jul 20 '05
16 2310
rc**@panix.com (Pierre Jelenc) wrote:
...and a full-window fixed div to provide a border.


That's probably the source of your link problems. What's wrong with:

body {border: thin solid red}

?

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society
Jul 20 '05 #11
Eric Jarvis <we*@ericjarvis .co.uk> wrote:
in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?


Capitalization? ;-)

The poor design of the CSS2 Recommendation itself. It says, there are
three formatting models: flowed, floated, and absolutely positioned.
Reader thinks, "I have three options, which to choose? Better read
on..."

Then under the guise of explaining "normal flow", it starts to waffle
about "line boxes", a "block formatting context" and an "inline
formatting context". Reader's brain starts to numb and he thinks "Too
weird, what's my next option?"

The next section describes floats, but only deals properly with inline
floats - moving an image to the side and letting a paragraph flow
around it. That is the CSS1 equivalent for replacing the HTML align
attribute. Reader thinks that is irrelevant to laying out blocks of
text, "What's my last option?"

Absolute positioning.

All that business of inline formatting will always be there,
regardless of whether the blocks are laid out using flow, floats or
positioning. So the explanations of line boxes and inline formatting
should really be in the chapter that deals with text formatting, not
in the "visual layout model" chapter at all.

But the text chapter comes after the layout chapter, and you really
need to know about the box model before you can position boxes. The
authors of CSS2 assumed their readership would be familiar with CSS1
so they put all the shiny new stuff (positioning) at the front. That
was a mistake (that CSS 2.1 should have fixed).

If the box model was explained in the text chapter, and that was read
before the layout chapter, people's eyes wouldn't glaze over while
they were trying to read about "normal flow".

--
Karl Smith.
Interim President,
International Global World "Jonathan Frakes
must never work in films again!" Society
Jul 20 '05 #12
Neal <ne*****@spamrc n.com> wrote:
Eric Jarvis <we*@ericjarvis .co.uk> wrote:
The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.


No, Karl used floating. That's quite different from relative positioning.


True, but I took Eric's comments in a more general sense of, "Why do
people start with the most complex possibility, before fully exploring
simpler options?"

I don't think people are masochists, as Eric is possibly implying. I
think the CSS2 rec. itself is to blame.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society
Jul 20 '05 #13
Karl Smith go************@ kjsmith.com wrote:
Neal <ne*****@spamrc n.com> wrote:
Eric Jarvis <we*@ericjarvis .co.uk> wrote:
The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.


No, Karl used floating. That's quite different from relative positioning.


True, but I took Eric's comments in a more general sense of, "Why do
people start with the most complex possibility, before fully exploring
simpler options?"

I don't think people are masochists, as Eric is possibly implying. I
think the CSS2 rec. itself is to blame.


I wasn't implying anything...it was pure curiousity...wh ilst I do my best
to work out a logical design process, there's always the possibility that
I've completely missed something...so I was wondering if there was a
genuine advantage to starting a layout by looking at absolute positioning

your explanation, however, makes perfect sense

--
eric
www.ericjarvis.co.uk
"live fast, die only if strictly necessary"
Jul 20 '05 #14
Karl Smith <go************ @kjsmith.com> writes:

That's a z-index issue - when links don't work it means they're
"behind" some transparent element with a higher z-index. Check
anything you've absolutely positioned, something is probably a lot
bigger than you intend.


It is the div called "mainbox" which is intended to provide a 2px border.
If I remove it things are OK, but if I leave it in, no matter what its
z-index, it blocks the links unless I make the z-index negative, but then
the border disappears, behind <body> I suppose.

How do I make a border around the window, keeping the scrollbars where and
when needed? If I put a border in body, it frames the entire contents, not
exactly the window.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Jul 20 '05 #15
Harlan Messinger <hm************ *******@comcast .net> writes:

As soon as I removed position: fixed; from the #mainbox the links
reactivated.


Right, but then the framing border collapses into a single line at the
top, it does not surround the window anymore.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Jul 20 '05 #16
Karl Smith <go************ @kjsmith.com> writes:
rc**@panix.com (Pierre Jelenc) wrote:
...and a full-window fixed div to provide a border.


That's probably the source of your link problems. What's wrong with:

body {border: thin solid red}


That's a border around the contents, less than a window or more than a
window depending on how long the contents are. They want a frame around
the entire window, and the contents accessible with scrollbars if they
overflow the window size.

I suppose I could use 4 separate divs stuck along the 4 edges but that
would be a really ugly hack.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Jul 20 '05 #17

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

Similar topics

2
3047
by: Egon Pasztor | last post by:
Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The prototype "scaffolding" page I'm playing with is here: http://www.eecs.berkeley.edu/~pasztor/test.html It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three "nav" blocks are rendered right after one another in a vertical column.
12
6307
by: deko | last post by:
Is there any way to work around the blank space created by hidden divs? I'm trying to use a relatively postioned divs with show/hide behaviors to annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a blank space on the page when hidden (the space where the divs would normally be). Is it possible to use z-indexing to put regular content where the hidden divs would be? When I try to do this, the layers don't unhide as...
15
13507
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side with float. But I can't center two side by side divs. If I float them and give them auto margins, the auto margins are ignored. If I wrap the two floated divs in another div, the two divs have no
3
13778
by: Marc | last post by:
Hi to all, I have several DIVs in a page, each has a unique name. I'd need a method to cycle through all DIVs so that I can change their style. For example, let's say I need to set a red background to DIVs whose name begins with "a". This is the pseudo code: For Each Div in The Page If Div's name starts with 'a' then set Div's background to Red Next
2
8289
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs have a grey background. When I view the page in Firefox, I get what I hoped for: there is a solid grey rectangle at the top of the website. When I view the page in Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs (i.e. a...
3
1829
by: Carl Gilbert | last post by:
Hi I am looking to convert a site from HTML to ASP.NET making use of CSS. I have tried various combinations but I can not seem to get the correct combination of div and CSS tag configurations. I have uploaded a screenshot (http://www.bwbfc.com/math/regions.jpg) of how the screen will be laid out. Firstly it is all cantered in the window. I plan to create a master page which would contain the header (in blue), the footer (in yellow)...
19
6200
roula
by: roula | last post by:
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them work in a certain way (like some should scroll with a fixed background and others shouldn't scroll bla bla..) and the divs are nested and positioned in different ways and if i change something it gets messed up and what works in in IE doesn't work...
4
8413
by: Adam | last post by:
I have four roughly square DIVs, all the same height, which I need to line up horizontally across the page. What would be the best way to do this? At the moment I have a very botched solution where I have display:table-cell set on each of the DIVs. This works as far as lining them up is concerned, however to get any spacing between them the only thing I could do was to put some &nbsp; in between each one (margin had no effect). This...
11
7844
by: dusk | last post by:
Hi, I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy. I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it. I can hide all divs and display...
0
9656
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
10366
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
10175
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
9969
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...
0
8993
agi2029
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...
1
7518
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
5536
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3675
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2894
bsmnconsultancy
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...

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.