[css-d] Looking for advise on how to implement a design

[Jan Erik Moström]

I need some advise on how to design a web site the way I want, my attempts
works partially but I'm pretty sure it can be done in a better way.

The layout I want is pretty simple, I want it to look like this:

  -
  |   |
  |text   |
  |   |
   ---
   | |
   |photo|
   | |
   ---
  |   |
  |text   |
  |   |
  -

I want to have the text in the middle of the page, I want to have large
photos so they need to "stick out" on the sides of the text.

My idea for solution






Test

Etiam luctus ...



...


Duis et turpis...



and the CSS

body{
font-family: Times, "Times New Roman", serif;
}
h1, h2, h3, h4, h5, h6 {
margin:auto;
color: gray;
font-family: Helvetica,"Helvetica Neue", "sans-serif";
font-weight: bold;
}
#main p {
margin:auto;
margin-bottom: 1em;
min-width:20em;
max-width:40em;
}
figure{
margin:10px 0px;
text-align:center;
}
figure img{
padding:3px;
border: 1px solid #bbb;
}
figcaption { font-style: italic; }

I would appreciate some advise on how to improve this.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] image width in CSS?

[Jan Erik Moström]

Since I like photography much of my dabbling in CSS is about showing my photos 
in various ways. One thing I've always wanted to do is to get the image width 
so I can use it in my declaration but I've never found a CSS-only solution. 

For example, assume some HTML code along these lines



Bla bla bla bla bla


Now I would like a parts of my figcaption and figure styled based on the photo 
width (not same for all figures/figcaptions)

Is this possible without using javascript or some server-side scripting. So far 
I've done this using server-side scripting but I would like to know if there is 
a way to do it using CSS only (I haven't found a way in my searches).


- jem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a div with an image

[Jan Erik Moström]

Gunlaug Sørtun <[EMAIL PROTECTED]> 07-12-21 14.03

>Not being able to turn W3C's descriptions into something useful, has
>nothing whatsoever to do with stupidity on your side :-)
>The various IE/win teams have had since 1998 to do that, and still
>haven't got it right. Maybe in IE8 - now that they've solved the smiley?

:D


>Thus, what you're asking for is simple in better browsers, but we have
>to hack IE/win...
><http://www.gunlaug.no/tos/alien/jem/test_07_1221.html>
>...with styles that would make all somewhat standard-compliant browsers
>choke.
>
>Remember to keep the various IE/win hacks (all 4) separate and in that
>order, and it should turn out quite well across browser-land.

Thanks, I would *never* have been able to come up with that !!

 jem
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a div with an image

[Jan Erik Moström]

Gunlaug Sørtun <[EMAIL PROTECTED]> 07-12-21 11.08

>It was ... 10 years ago :-)

I was afraid of that :D

>Try a suitable "shrink to fit" block formatting...
><http://www.w3.org/TR/CSS21/visuren.html#block-formatting>
>...directly on the #jem-photobackground instead, and set those margins
>directly on the same as 'margin: 0 auto'.

I'm probably slightly stupid but from that text I don't 
understand how I achieve "shrink to fit", I tried searching for 
a solution but I don't understand how to do it.

>FWIW: your case is as clear as fog, so you'll only receive info on the
>basics behind centering of elements with unknown dimensions unless you
>provide a proper - live - example for what you're after - the actual case.

What I want is something similar to this:
 <http://www.latik.se/tablesolution.html>
my attempt to get this using only CSS is here:
 <http://www.latik.se/csssolution.html>
which unfortunately requires that I know the picture width.


 jem
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a div with an image

[Jan Erik Moström]

Jan Erik Moström <[EMAIL PROTECTED]> 07-12-20 23.09

>What I've done is this:
>
>
>
>src="foto5/2007/2007-05-10_fritids/2007-05-10_09-46-46_549.jpg" 
>alt="" width="800" height="535" />
>Någon rubrik
>
>Här kommer nu själva beskrivningen
>
>
>

Of course there is one solution that seems to work fine:

 
 
 
 
 Någon rubrik
 
 Här kommer nu själva beskrivningen
 
 
 
 

and

 table
 {
     margin: auto;
 }

But I'm not sure if this is a good solution.
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Centering a div with an image

[Jan Erik Moström]

OK, this is probably really, really simple but I can't for the 
life of me figure out how to do it, my only excuse is that I'm 
no CSS expert.

The effect I'm trying to achieve is a photo page. It should have 
a dark background color, a "photo background" in a lighter color 
with the image and caption text.

What I've done is this:


 
 
 Någon rubrik
 
 Här kommer nu själva beskrivningen
 
 


My problem is how I center the photobackground div, I've played 
with various way of doing it but I can only figure out how to do 
it if I know the width of the of the photo (this is going to be 
used in a gallery generating program over which I have no control):

singlephoto
{
 position: absolute;
 left: 50%;
 margin-left: -410px;
}

So my question is: Is it possible to center the photobackground 
without knowing the size of the image? If so, can anyone please 
give me an hint on how to do it?

         jem
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical alignment of title and nav menu

[Jan Erik Moström]

David Laakso <[EMAIL PROTECTED]> 07-09-11 12:19

>Jan Erik Moström wrote:
>>I would like to create a page that have the title and nav menu 
>>aligned at the top, something like this
>>
>>X  N
>>X
>>X
>>
>>
>
>
>
>Do you mean like this?
><http://www.chelseacreekstudio.com/ca/cssd/test.html>

Bad explanation on my part, this is what I meant:

 TitleTitleTitleTitleTitleTitle  one two 
three four
 TitleTitleTitleTitleTitleTitle
 TitleTitleTitleTitleTitleTitle

 Hello there

 Footer

(the title is one only one line but has a larger font size than 
the nav menu)

 jem
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertical alignment of title and nav menu

[Jan Erik Moström]

I would like to create a page that have the title and nav menu 
aligned at the top, something like this

 X  N
 X
 X

I have this code


 
 
 
 One
 Two
 Three
 Four
 
 Title
 
 
 Hello there
 
 
 Footer
 
 



and use the following CSS code

#pageHeader
{
 background-color: #0f0;
}

#pageHeader ul
{
 float: right;
 background-color: red;
}

#pageHeader li
{
 display: inline;
 list-style-type: none;
 padding-right: 10px;
}

#pageHeader h1
{
 margin: 0px;
}

This aligns the title and the menu at the bottom. I tried using 
vertical-align but since that aligns inline elements it 
shouldn't work and it doesn't.

Is there some way to do this?
-- 
Jan Erik Moström, www.mostrom.pp.se

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Why isn't the left column pushed down??

[Jan Erik Moström]

Reply to Gunlaug Sørtun <[EMAIL PROTECTED]> 07-02-14 12:56:

>There are a few more potential traps when it comes to 'collapsing
>margins', as IE does not understand and react the same as other browsers
>on all standard properties we can use to "fix" the problems, and IE also
>has a few variants of its own that are not written in any standard but
>Microsoft's. See: 'hasLayout'[3].
>
>
>Who said "learning CSS isn't fun" ;-)


:-)

Is it enough if I say "interesting" :-D

Thanks

 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Why isn't the left column pushed down??

[Jan Erik Moström]

I'm trying to create a template and there is (at least) one 
thing that I don't understand.

An example of the template can be found at 


My problem is the "blue" area, the left column. When I increase 
the padding of the horizontal navbar the content area is pushed 
down but not the left column and I don't understand why. Can 
anyone tell me why this happen?

The relevant (I think) parts of the CSS and HTML files look like this
-
#pagebar
{
 padding: 3px 5px 10px 5px;
 width: 100%;
}

#pagebar ul
{
 background-color: red;
 display: inline;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 0px;
}

#pagebar li
{
 border-right: 2px solid #fff;
 display: inline;
 padding: 0px;
 margin: 0px;
}

#leftcolumn
{
 background-color: #3FF;
 width: 150px;
 float: left;
 margin: 0px;
 padding: 0px;
}
--

 
 ...
 
 
 One
 Two
 

 
 
 
 Lorem ipsum dolor
 
 One
 Two
 

 
 
 Lorem ipsum dolor sit ...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] sigh, CSS and Explorer

[Jan Erik Moström]

Thanks, I took the easy way out (and it actually made some 
sense) and set a fixed width ... and I was able to understand 
why IE didn't center stuff (well, at least I understand how to 
work around it ;-)

All of you who work with these "anomalies" all days have my 
respect (standards are so nice ...)

 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] sigh, CSS and Explorer

[Jan Erik Moström]

Reply to Ed Seehouse <[EMAIL PROTECTED]> 07-01-13 14:50:

>First you have to get rid of the comments before your DOCTYPE
>declaration.  For IE6 (and 7) the declaration must be the very first
>thing in the file or it will render in "quirks" mode instead of
>"standards" mode.  In IE that's a much bigger deal than with other
>browsers because in "quirks" mode it sizes screen boxes incorrectly.

OK, some small modifications of template should fix that

>Next you must make sure to have valid xhtml.  Use the W3C  validator
>and squash any markup errors in your file.  CSS is defined for valid
>code only.

At least it validated :-)

>IE6 doesn't support min-width or min-height but "width" and "height"
>work just like the "min" rules are supposed to work so you can just
>use the "Holly Hack" to feed it a height and width rule that other
>browsers will ignore, or use conditional comments for the same
>purpose.

Thanks I'll try this,

>Cheer up!  It's ever so much easier to get IE looking right when
>Firefox also looks right than it is to go in the other direction.

That sounds good ... so let's see if I can get this working

 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] sigh, CSS and Explorer

[Jan Erik Moström]

Please be kind, CSS - web design isn't really my expertise ...

I've created a few web pages and managed to create something 
that looked OK in Safari, OmniWeb and Firefox. Then I used my 
sons PC and used Explorer 6 ... disaster.

I looks like Explorer 6 doesn't handle max-width, min-width and 
margin: auto.

So my design looks pretty awful on Explorer 6, so my questions are:

+   How common is Explorer 6, should I bother to try to fix this?

+   Is there some simple way of fixing this (I tried to find some
 reference of how to fix it but I didn't find anything)?

My "problem code" looks like this:

#pagecontent
{
 padding: 30px 4px 0 4px;
 margin: auto;
 max-width: 550px;
}

and the actual page can be found here 

 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Would like some advice - creating a theme for different sub-domains

[Jan Erik Moström]

I'm trying to create a basic theme for different sub-domains 
(just a private site), each sub-domains will have a variation of 
the theme:

+   One will have a three column fixed width layout

+   One will have a fixed width left column with a variable width
 right column (actually a minimum width column)

+   One will have a fixed width 2 column layout where some pages
 will have only one column

All of them will have a header and a footer (one will use 
drupal, one pmwiki and the third is built "manually").

Not being very good at CSS and trying to do something like this 
for the first time I'm playing around trying to figure out how 
to do things (sometimes getting really frustrated and start 
thinking about using tables ;-).

Anyway, I've got a 3-column layout that seem to work, except 
that I want a thin line between the columns ... which are of 
different heights. In trying to figure out a solution I found 
this page  which 
got me thinking - "Am I doing this the right way???"

The reason I ask is that my current solution seem to be very 
"fragile", that is the different columns are specified by a 
specific number of pixels (margin, padding, etc) and if I change 
something then I have to recalculate all the measurements. Then 
I will have three different versions of this theme ... and if I 
understand things correctly I will then have to adjust for 
different browsers.

Being a programmer I get the feeling I'm going about this the 
wrong way, that there is some simple way of "modularizing" the 
layout so it becomes easier to maintain, not having to think 
about browser specific things, etc.

So being a CSS "simpleton" ;-) I would like to ask for some 
advise on how to go about a task like this? Should I continue 
doing these "fragile" solution and using things like what is 
suggested in page above or is there some better way of doing this?

I tried to find some page that describes/gives advice on this 
but failed (I'm probably using the wrong search terms) so if 
anyone have a suitable link to share I would be grateful.

 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Moving stuff to the right ?

[Jan Erik Moström]

Thanks to both of you, now it works. I used H1 for the page 
title and
set a suitable style, moved the list above the menu and floated 
it to
the right. The problem with the "mess" was solved by setting 
margin to 0
for the menu.

I don't know if this is the best way to solve this but now it 
looks like
I want ;-)

 jem (who never seem to be able to understand 
how CSS works)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Moving stuff to the right ?

[Jan Erik Moström]

I'm trying to create a page header that should look like this

--
| Page Header| Main | About | Blog | 
... |
--

But I always end up with

--
| Page Header   | Main | About | Blog | 
...  |
--

In other words I don't understand how to get the menu to move to 
the right. The HTML code looks like this:

 
 
 Page header
 
 Main
 About
 Blog
 Research
 Photo
 Code
 
 


And the relevant parts of the CSS

#page
{
 background-color: #fff;
 padding: 2px;
 margin: auto;
 width:900px;
}

#pagetop
{
 background-color: #9F9;
 padding: 2px 4px;
}

.sectionlist
{
 display: inline;
 list-style: none;
}

.sectionlist li
{
 border-left: 2px solid #fff;
 display: inline;
 padding: 3px 10px;
}

I would be grateful if anyone could give me a hint of how to 
achieve this. Among other things I've tried using float but that 
makes a mess of things ... I'm sure there is a really simple 
solution to this but I can't figure it out.


 jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] centering picture/text

[Jan Erik Moström]

Reply to Jan Erik Moström <[EMAIL PROTECTED]> 06-08-04 19:25:

> Another basic CSS question. What I would like to do is to create a
> part of page that contains a photo with a caption that is centered on
> the page, something like this:
> 

Opps, I forgot to say that the section shown in the sketch is in itself a part
of the page that is centered on the page so the whole page looks like this

 ###
 #   ---   #
 #   |   some other part of the page   |   #
 #   ---   #
 #   | |   #
 #   |   ---   |   #
 #   |   | |   |   #
 #   |   | |   |   #
 #   |   |   picture   |   |   #
 #   |   | |   |   #
 #   |   ---   |   #
 #   | Caption line 1  |   #
 #   | Caption line 2  |   #
 #   | |   #
 #   ---   #
 #   |   some other part of the page   |   #
 #   ---   #
 ###

jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] centering picture/text

[Jan Erik Moström]

Another basic CSS question. What I would like to do is to create a part of page
that contains a photo with a caption that is centered on the page, something
like this:

---
|   some other part of the page   |
---
| |
|   ---   |
|   | |   |
|   | |   |
|   |   picture   |   |
|   | |   |
|   ---   |
| Caption line 1  |
| Caption line 2  |
| |
---
|   some other part of the page   |
---

After some experimenting and checking the web I've come up with the following
HTML




Ett litet test



and the CSS

#pagecontent
{
width: 480px;
margin: 0 auto;
}

#picture img
{
padding: 6px;
margin: 0px;
border: 1px solid #555;
}

#picture p
{
padding: 0px;
text-align: center;
}

while this works it requires that I adjust the width of pagecount. My problem is
that I want to generate these pages automatically, and while the program I use
generate height and width tags that I can use I can't do math. Which means that
if I want to have the border around the picture the centering will be slightly
off.

So I start to wonder if there is some better way of doing this that doesn't
require me to know the picture size.

jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dummy needs advice - "list of albums"

[Jan Erik Moström]

Reply to Christian Heilmann <[EMAIL PROTECTED]> 06-08-03 15:00:

> Get the sample code for "Bulletproof CSS" by Dan Cederholm at
> http://www.simplebits.com/publications/bulletproof/code/
> 
> Chapter 4 has an example that is exactly what you need.

Thanks (even the "sweden" part of the css code matches ;-)

jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS dummy needs advice - "list of albums"

[Jan Erik Moström]

I'm playing with CSS trying to learn more but right now I don't know what to do
(or even search Google for). I want a part of a page to contain a list of
different photo albums, I want it to look something like this

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   ||
--

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   ||
--

etc

Unfortunately the result becomes

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   | ---|
--| Thumbnail  | Header  |
  || info|
  || text text   |
  || text text   |
  

A screen dump can be found at  (the colors
are just for debugging purposes ;-)

I don't know if know I've understood things correctly but I think that the
thumbnail "reaches below" the div in which it's defined pushing the following
thumbnail to the right.

Unfortunately, I don't understand how I can fix this so the result will look
like I want. I would appriciate if anyone can tell me what I'm missing.

jem

The HTML code looks like this (at the moment)



Hans och Johannas
torp, 22 juli 2006
2006-07-22, swedish, A (???)

Vi var och kollade på Hans och Johannas torp.



and the relevant parts of the CSS like this

div.swedishpict
{
background-color: #7f0;
margin: 0 auto;
width:400px;

}

div.swedishpict h1
{
background-color: #0f0;
margin: 0px;
font-size: 120%;
}

div.swedishpict p
{
background-color: #00f;
margin: 0px;
}

div.swedishpict img
{
background-color: #f00;
float: left;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
border-color: #999;
border-width: 1px;
border-style: dotted;
}

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I can never learn this - how do I center a part of my page

[Jan Erik Moström]

Thanks, everyone. I knew it would be something embarrassingly simple. 

jem
-- 
Jan Erik Moström, www.mostrom.pp.se
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] I can never learn this - how do I center a part of my page

[Jan Erik Moström]

It looks like I'm not able to learn how CSS does things, sigh, sorry for this
basic question. If I want to make a page that look like this

   
   |HH|
   |--|
   |c |
   |c |
   |c |
   |c |
   |c |
   |c |
   |c |
   |--|
   |FF|
   

Header and footer is no problem, it's the middle part that I don't
understand. I want to center the middle part (the c's) and have it a certain
width. What I've come up with is











and this

#pagebody   
{
background-color: #fbb;
width: 500px;   
}

but how do I center this part?

        jem
-- 
Jan Erik Moström, www.mostrom.pp.se
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I just don't get it (trying to create 4 panel design)

[Jan Erik Moström]

Roger Roelofs <[EMAIL PROTECTED]> 2005-08-21 22:42:

> The 'bottom: 0;' got lost in the translation.  Adding that should get 
> you what you are looking for.

I'm feeling more and more stupid, I added it and now I can scroll. Thanks.

            jem
-- 
Jan Erik Moström, www.mostrom.pp.se
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I just don't get it (trying to create 4 panel design)

[Jan Erik Moström]

Roger Roelofs <[EMAIL PROTECTED]> 2005-08-21 20:20:

>> You need to prevent the body from scrolling by making sure the content 
> doesn't flow below the bottom of the viewport (aka window).
> 
> Try something like this...
> #actioins {
>   position: fixed;
>   top: 130px;
>   bottom: 0;
>   background-color: #afa;
>   overflow: scroll;
> }

Thanks for the suggestion.

I tried that but the scrollbar isn't active. I've put up an example at
<http://y171.yttersjo.se/test.html> ( the CSS file is available at
<http://y171.yttersjo.se/office.css> ).

The HTML page contains 1000 lines, "Rad 1", "Rad 2" etc

jem
-- 
Jan Erik Moström, www.mostrom.pp.se
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] I just don't get it (trying to create 4 panel design)

[Jan Erik Moström]

This is probably a really stupid question but I barely know what CSS is so
I'm having some difficulties.

I'm trying to create a page design like this:

--
|   commandbar   |
--
|  | |
|quicklinks|   projects  |
|  | |  
--
||
||
||
|actions |
||
||
||
||
--

I want commandbar, quicklinks and projects to be fixed on the page while
actions should be able to scroll. I'm trying to do this using CSS only but I
can't get it to work.

Note that it only has to work using Safari/OmniWeb and it's only going to be
used by myself on my local server.

What I've come up with so far is the following:

BODY
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0mm;
margin-right: 0mm;
background-color: #FFF;
color: #000;
font-family: Optima, Verdana, Times, serif;
font-size: 9pt;
}

#commandbar
{
position: fixed;
background-color: #000;
width: 100%;
top: 0px;
color: #fff;
height: 30px;
z-index: 3;
overflow: default;
}

#quicklinks
{
position: fixed;
background-color: #faa;
width: 50%;
top: 30px;
left: 0px;
height: 100px;
z-index: 2;
}

#projects
{
position: fixed;
background-color: #aaf;
width: 50%;
top: 30px;
left: 50%;
height: 100px;
z-index: 1;
}

#actions
{
position: absolute;
background-color: #afa;
top: 130px;
z-index: -14;
}

and this test file
http://www.w3.org/TR/html4/loose.dtd";>



Untitled





Uppdatera


Blipp blopp


Flipp flopp


Rad  1 
Rad  2 
...



My problem is that the three top fields work as I want but the "actions"
field ends up behind the top three when I scroll. This means that when I open
my test file I see "Rad 1", "Rad 2" ... "Rad 44" and when I click on the
scroll list to go down page I now see "Rad 54", "Rad 55", ... while "Rad
45"-"Rad 54" is behind the top three fields. How do I fix this so that I see
"Rad 45" ... when I do a page down?

jem
-- 
Jan Erik Moström, www.mostrom.pp.se
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/