hi there,
I created two different backgrounds for the same page to obtain a (fake)
left margin and a (true) right margin.
-> left background, defined in body section, aligned bottom and with
vertical repeat.
-> right background, defined in html section, aligned top and without repeat
it may look weird, but I don't think my problem is due to these margins.
now, the problem :
if I define html,body{heigh t:100%;} then for long pages (much content - text
or images) the background isn't displayed while scrolling down : http://www.antipolis.fr/fr/concept-hommes.php
if I *don't* define html,body{heigh t:100%;} then for short contents the
background is cut in the window.
you may try this page, removing height:100%; in html and body sections : http://www.antipolis.fr/fr/even-hall.php
my goal :
I would like the left background being continued while scrolling down *and*
this background being displayed even if the content (class "bloc-texte") is
smaller than the window's height.
FYI here is my stylesheet : http://www.antipolis.fr/style/antipolis.css
--
Serge Hartmann
jabber-id : le******@amessa ge.info 8  5037 
Serge Hartmann wrote: now, the problem :
if I define html,body{heigh t:100%;} then for long pages (much content
- text or images) the background isn't displayed while scrolling down
: http://www.antipolis.fr/fr/concept-hommes.php
if I *don't* define html,body{heigh t:100%;} then for short contents
the background is cut in the window.
you may try this page, removing height:100%; in html and body
sections : http://www.antipolis.fr/fr/even-hall.php
my goal :
I would like the left background being continued while scrolling down
*and* this background being displayed even if the content (class
"bloc-texte") is smaller than the window's height.
FYI here is my stylesheet :
http://www.antipolis.fr/style/antipolis.css
I have exactly the same problem, I have just been googling for several hours
and playing around with Barbara de Zoetes tutorial at http://home.wanadoo.nl/b.de.zoete/vo...en-layout.html
My test case may be a little bit easier to get through than yours, though it
shows the same issue: http://www.markusernst.ch/zanre/
When scrolling down, the left menu bars are not extended to the bottom of
the contents.
I know there are solutions with tricky floats, but I need absolute
positioning for the top illustration color change to work at variing font
sizes.
Though this problem has been discussed over and over, I doubt that there is
an elegant solution for this, and rather than applying a sequence of
browser-specific hacks I will go back to a simple table layout for the macro
structure of the page.
Anyway I still hope there is a nice CSS only solution out there...
--
Markus
Blacksmith wrote: My test case may be a little bit easier to get through than yours,
though it shows the same issue:
http://www.markusernst.ch/zanre/
When scrolling down, the left menu bars are not extended to the
bottom of the contents.
I assume you know about faux columns:
http://www.alistapart.com/articles/fauxcolumns/
Thank you for pointing me to this article; I knew it before and also used
this technique in the past, and will use it again. But it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style. Even the ALA layout breaks at big font sizes. So it is actually a
very good workaround, but not a solution to a lack in CSS.
--
Markus
Markus Ernst wrote: I assume you know about faux columns:
http://www.alistapart.com/articles/fauxcolumns/
this technique in the past, and will use it again. But it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style. Even the ALA layout breaks at big font sizes. So it is actually
a very good workaround, but not a solution to a lack in CSS.
These solutions requires absolute width.
I don't want to "control" the user's window size, or the displayable area.
And I don't wan't to choose between small screens capability and wasting
space on left or right sides.
To understand my grievance, here is a screenshot of "faux columns" on my
1280x1024 screen : http://www.antipolis.fr/tmp/capturetmp-browser02.jpg
More than a half of the window is wasted.
In comparison my website matches the browser's window, whatever is the
size : http://www.antipolis.fr/fr/accessmap.php
I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.
--
Serge Hartmann
jabber-id : le******@amessa ge.info
> These solutions requires absolute width. I don't want to "control" the user's window size, or the displayable area.
And I don't wan't to choose between small screens capability and wasting
space on left or right sides.
To understand my grievance, here is a screenshot of "faux columns" on my
1280x1024 screen :
http://www.antipolis.fr/tmp/capturetmp-browser02.jpg
More than a half of the window is wasted.
In comparison my website matches the browser's window, whatever is the
size : http://www.antipolis.fr/fr/accessmap.php
I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.
--
Serge Hartmann
jabber-id : le******@amessa ge.info
can you use background-attachment ?
Markus Ernst wrote: Blacksmith wrote:
http://www.alistapart.com/articles/fauxcolumns/
it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style.
You can make widths in em or % if you want, it just requires modifying
the background image and its positioning. % is quite easy to do, em
takes more experimenting to get the positioning where you'd like it. 2
columns is also pretty easy. More columns mostly means more containers,
each with a different background image. Transparent images are often
required.
For just a vertical bar separating columns, make your image width the
size you want it and position at whatever horizontal em or % position
suits you.
For different colored columns in %, use a very wide image, like 2000px,
color one end, and position accordingly.
I'm sure I've done different colored columns in em, but can't find any
of my samples at the moment. IIRC, the image width is not as wide, maybe
500px or so, just positioned at em.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Blacksmith wrote: I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.
can you use background-attachment ?
I did.
it does not solve anything, the only difference is : fixed or scrollable
background
but it disapears anyway while scrolling down.
--
Serge Hartmann
jabber-id : le******@amessa ge.info
Serge Hartmann a écrit :
| Blacksmith wrote:
|
| > can you use background-attachment ?
|
| I did.
| it does not solve anything, the only difference is : fixed or scrollable
| background but it disapears anyway while scrolling down.
My web site is in no way a CSS-reference, but I managed to have
- #content {width: 100%, max-width: 50em; } (content uses available width
but avoids long lines)
- background to the bottom on short pages[1,2]
- background "to the bottom" on long pages[3], because background is attached
on the viewport (background is inside DIV's whose position are fixed)
[1] http://yo.dan.free.fr/bridge.phtml
[2] http://yo.dan.free.fr/TSI.phtml.en
[3] http://yo.dan.free.fr/profils-reseau.phtml.en
I had the added complexity of using a non-solid background, and that
required a somewhat complicated markup. Also, it degrades poorly in older
IEs (this is of little concern to me, maybe not to you).
Not a reference, as I said earlier, but it could hint you to a solution.
Especially, fixed background could be the way to go.
HTH,
--
Daniel Déchelotte http://yo.dan.free.fr/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Curtis Morrison |
last post by:
Can anyone lend some advice as to why I'm getting an object not supported
error (no error code given) when loading a page with the following CSS Style
using a background image? The page loads fine, but the image doesn't load.
This only occurs when loading the page using the https url.
#ContentHeaderMiddle {
background:#333333 url(/images/headings/orange.gif) no-repeat scroll;
height: 72px;
width: 698px;
color: #FFFFFF;
|
by: slawek |
last post by:
Hi i have following stylesheet:
..linklist
{
width: 100%;
font-size: 75%;
background: #EEEEEE;
margin: 5px;
height: 300px;
overflow: auto;
|
by: Roderik |
last post by:
Hi,
At: http://www.sylviastrijk.nl/examenklas/
In Internet Explorer we see the background of the wrapping div
(#namenlijst) (with the columns (kolom 1, kolom 2, kolom 3) inside) as
far as the content inside it. In Firefox you see no height for the
wrapping div and the background-color won't stretch to the end of the
columns. The view in internet explorer is the desired one. What might be
the reason that FF has no height for the...
|
by: Jörg Ellermann |
last post by:
Hi,
I'm quite unused to CSS and I want the following layout to work using CSS and
tables:
Page split into table with two cells of 50% width:
Left cell | Right cell
|
Navbar |
|
by: RC |
last post by:
I found background-color, background-image, but
I don't see background-text. I would like have some
text write to the padding areas like
th, td { margin: 0; border-width: 1; width: 40px; height: 20px;
padding-left: 30px; padding-top: 0; padding-right: 0; padding-bottom: 0;
background-text: 'Hello World'; background-repeat: no-repeat;
background-position: left center; background-attachment: scroll; }
| | |
by: lovely_angel_for_you |
last post by:
Hi,
I have following link. By visitng first in IE, and then in Firefox, you
would get to know my issue.
http://lovely.angel.for.you.googlepages.com/test.htm
http://www.geocities.com/lovely_angel_for_you/test.htm
To explain in simple terms, the CSS code that I am using is not
providing the colors to Table backgrounds.
|
by: darkpowrjd |
last post by:
I've been trying to create a new navigation system for my site, and I got everything figured out except for one thing. Here is the CSS code I'm using right now:
body {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #FFFFFF;
height: auto;
width: auto;
margin: 0px;
padding: 0px;
|
by: AAaron123 |
last post by:
<body runat="server" id="MainBody">
<form id="form1" runat="server" style="background-color:green; width: 100%;
height: 100%">
<br />
Table1" runat="server" Style="background-color:Yellow; width: 100%; height:
90%" BorderColor="Maroon"
|
by: Alexei Prada |
last post by:
Hi guys, I'm not really advanced in html or css, and I'm having a problem that is really getting me out of my nerves. So I redesigned my portfolio site with dreamweaver as my main html css editor. But with the Web developer toolbar I modified things to take the final choises.
In fact my site is just a html file with a flash file with my portfolio, and a modal box with the contact form.
The problem I'm having is that my wrapper background is...
|
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: 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...
|
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...
|
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: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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: 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...
| |
