CSS - Replace Tree Menu With Modern Alternative

hello everyone and thanks for reading

i want to create a family tree and i can't seem to find the right solution.
check the image for the way it should be.

each person has its own DIV (this is done by CMS so not changeble)

state:

- if a person is not present, the DIV won't be there too, but all the other persons should stay where they are -> float does not work (?)

- if a whole level of persons is missing (like grand-grand-parents) the rest should move up to the top -> position: absolute; not working (??)

- choosing position:relative; i can't get the div's to be side-by-side
when i use a negative margin-top: I can fix this, but then i NEED the first person in each level, because otherwise the rest will move up, right (???)

maybe this is really simple, but can anyone please tell me which way the divs should be done with CSS?

thanks a lot!!!!!!!!!!!!!!!!!!!!!!!
here is the link to the image (I am a new user, so i am not allowed to post a complete link, please "repair" the link)
www .css-info.de/forum/download/file.php?id=170

All i want to do is put text on a new line like

[code]
<div>

text<br />
text<br />
text

</div>

do i just use <br> or this there a "proper" CSS way to do it?

I was just wondering if there was an alternative other than adding a last class to the last element in a list for internet explorer.

To explain the situation, I have a navigation list in a ul: Code:

<div id="navigation">
      <ul>
         <li><a href="/" title="Homepage">Home</a></li>
         <li><a href="/" title="Homepage">About</a></li>
         <li><a href="/" title="Homepage">News</a></li>
         <li><a href="/" title="Homepage">Contact</a></li>
      </ul>
   </div> <!-- navigation -->

To get the look I want, tiled vertically with a white line in between elements, I am applying this style Code:

div#navigation
{
   width: 200px;
   margin: 0 0 0 10px;
   float: left;
}
   div#navigation ul { list-style-type: none; margin: 0; padding: 0;}
      div#navigation ul li { background: #585858; border-bottom: 2px solid #e4eaef; padding: 0; }
         div#navigation ul li a { display: block; color: #e4eaef; text-decoration: none; padding: 6px; }
         div#navigation ul li a:hover { background: #fab511; display: block; color: #2c2c2c; text-decoration: none; }
         
      /* only works in Mozilla */
      div#navigation ul li:last-child { background: #585858; border-bottom: none; }

but of course the last-child pseudo class does not work in IE. Just curious.

Also, what is the fix for the anchor element not expanding to the full width of the list item?

I am now learning CSS and I usually use iFrames to make dynamic content but I was wondering if there was a CSS equivalent.

I have a two buttons, that when clicked, will load an image to an iFrame called "window".

Is there a CSS way to do this?

Thanks

In my website i have used a minus value for three div tags with absolute positions contained in a parent div.

i have done this to allow me to use multiple background images in an automatically heighten content wrapper. image on top, image below and repeating image between.

you can see for yourself at imatechi.co.uk, its the writen block inside the box.

apparently using neg values in the z-index causes problems with various browsers, so im wondering if there is another way to do this.

thank you

flos

It is my understanding that the EMBED tag is not XHTML compliant correct? If so, how can you get around it as i also understand that without the EMBED tag within the OBJECT, mozilla fails to pick up the content.

Hi guys,

I've recently been updating a flash games site, but i ran into a little problem. Check out this page:

Spank the monkey

The size of the game is so big in width, that it overlaps the "Related" box. (I currently have overflow set to "hidden", so you cant see it now). Back when a table was used for that portion of the site, whenever a game was too big, it pushed the "Related" box outside of the main container.

How can i achieve a similar effect with CSS?

Regards,

I'm trying to force table cells to wrap their contents by using max-width, only to find out that IE doesn't support it. Are there any alternatives to this?

I need to create a page that has a header that takes up 20% of the page and the other 80% of the page will be tables. The issue is that the header must not move and the other 80% will be scrollable.

I know how to implement this with frames but I understand that frames are looked down upon now in proper html/xhtml design. Can this be accomplished using css? If so how?

Thanks in advance.

Hello,
I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code:

<div id="main_container">
	<div id="navigation_menu">
		This div is set to float left with a width of 20% (assuming there's no margin, border and padding)
	</div>
	<div id="contents">
		This div is set to float left with a width of 80% (assuming there's no margin, border and padding)
	</div>
</div>

I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash.

Is there really no easier way to extend the color of the navigation div all the way down to the page?

Thanks in advance

I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks.

Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer:
http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements:
Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong!

Hello! Is it possible to get iframe fully fill the div when div is in the middle of the screen and it is absolutely positioned and left,right,top,bottom: 100px;

using the sibling selector like this

Code:

p, h3
{
margin-bottom: 1em;
}

p + h3
{
margin-top: 2em;
}

should produce output like this (taking mrgin collapsing into consideration)
Code:

first h3 at top of page

paragraph


h3 with 2em gap to preceding paragraph

paragraph

secondary paragraph with 1em gap to preceding paragraph


h3 etc

but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup?

I'm working on a web app that includes a wysiwyg html/css editor. The idea is that people can use the editor to create a webpage. Seems simple enough.

The trick is that I want all webpages created to have a small header at the top. Basically a 15-20px tall navigation strip. Currently, I have it setup so that people can create pages using the editor, but as it is now, the header is simply inserted as an 'included document' when they view the page they created.

Depending on the complexity of the page they make, they CSS, and formatting of the banner could affect how their page is displayed. Even as simple as pushing their content down 15pixels and mis-aligning content they may have set against their background. I'd also like to try and prevent user code from affecting how the header is rendered.

I'm hoping there is a way to seperate the rendering of the header and the user content in the browser. Basically, I'd like the css rendering of the user's content to start BELOW the header, rather than the header being combined with the user content. If a user creates a page that has their own header and it's set to be fixed to the top, it would basically cover up my header. I'm hoping that any element they would fix to the top would be fixed BELOW the header I insert.

This almost seems like a job for 'html frames'. With HTML frames, I could basically split the page into two rendered browser pages. Is there a CSS alternative to this?

Hello,

I am using a series of nested ULs to display information in a kind of tree structure with some DHTML involved to make it behave pretty. What I am trying to achieve is to have the information in the LI elements well spaced apart, using <span>s. Since these elements are inline I cannot give them a specific width. A workaround that solves the problem in using the property display:table-cell and then I can give it a width. Of course this doesn't work in IE. Could someone please suggest an alternative way of achieving the following:

Code:

<ul id="tree">
<li id="node1">
  <a href="#">
    <span>CB200801</span>
    <span>02/03/2007</span>
    <span>IPS20003</span>
    <span>17.58</span>
    <span>3.08</span>
    <span>0.00</span>
  </a>
  <ul>
    <li id="node2">
      <a href="#"><span>12028077</span></a>
    </li>
    <li id="node3" >
      <a href="#"><span>12046086</span></a>
    </li>
  </ul>
</li>

etc etc

and then I give the <span> the display:table-cell and a width.

In Firefox this is giving me the visual layout I require. Can something be done to help IE?
Thanks in advance
Andy