|
CSS - Css For A Tree Structure With Options
Hi,
I have used the UL and LI elements to build a tree as follows: Code:
<div class="tree">
<ul>
<li>
<span>One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
<ul>
<li>
<span>Child of One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
</li>
</ul>
</li>
...
</ul>
</div>
The result of the above XHTML would be somethings as follows: Code: - One <Radio> <Button> - Child of One <Radio> Button> ... Now I want to try and get the following result through CSS: Code:
- One <Radio> <Button>
- Child of One <Radio> Button>
- Another Child <Radio> Button>
- Second Child <Radio> Button>
- Two <Radio> Button>
- Child of Two <Radio> Button>
...
That is in other words I want to have still have elements indented for every child element but all the controls of the elements are under each other at the right side of the div element. Is this possible? If so are there any example I can use? I have wrapped the controls inside a span because I felt that this would help. However I do not know how I can change the width of each 'li' element depending on its position in the three! (unless I use javascript, which I am trying to avoid). Also I do not know if CSS wise this is the best way forward. Thanks for any suggestions. Regards, Sim085 Similar TutorialsHi, I've been trying to create a CSS tree menu with no luck - there seem to be lots of javasript expandable tree menus out there but I can't seem to find a description of how to make a static one. Ive got some gif images which I planned to attach to a list using CSS. The result I have been trying to get is shown in the picture below, with the transparent gif's im using in the top right. www.hdgc.co.uk/example.jpg After a few hours searching and working with list examples I haven't succeeded. Is what I'm aiming for possible and does anyone know any relevant tuorials? My current status: Code:
<html>
<head><link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="navcontainer">
<ul class='tree'>
<li><a>1</a>
<ul>
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li><a>2</a></li>
</ul>
</div>
</body>
</html>
Code:
#navcontainer ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navcontainer a
{
display: block;
width: 9em;
padding: 3px 12px 3px 8px;
background-image: url(page-file.png);
background-repeat: no-repeat;
background-position: 0 50%;
}
#navcontainer li li a
{
display: block;
width: 9em;
padding: 3px 3px 3px 17px;
background-repeat: no-repeat;
background-position: 0 50%;
}
www.hdgc.co.uk/test.html www.hdgc.co.uk/test.css Thanks for any helpful comments (Image url's) www.hdgc.co.uk/i-bottom.gif www.hdgc.co.uk/i-repeater.gif www.hdgc.co.uk/l.gif www.hdgc.co.uk/t.gif www.hdgc.co.uk/page-file.gif 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 I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative. I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items. I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that? Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem? I am trying to create a table where I could toggle visibility of certain rows by style="display: block" and style="display: none" It works well in Internet Explorer. In Firefox the following table structure displays rows "First Name" and "Last Name" on left side. Why? I would like it positioned exactly above "State" row, like it is in IE. How do I do it? Code: <table width="100%"> <tr align="left" id="f_name_holder" style="display: block"><td width="30%" align="right">First Name:</td><td>Mike</td></tr> <tr align="left" id="l_name_holder" style="display: block"><td width="30%" align="right">Last Name:</td><td>Rourke</td></tr> <tr align="left"><td width="30%" align="right">State:</td><td>Alabama</td></tr> <tr><td width="30%"></td><td colspan="1"><input type="submit" name="submit" value="Submit" /></td></tr> </table> Thank you. Hello, I have 3 type of h2 headers on my web site: 1 - Post titles on a blog (Ex: <h2>New documents available for download</h2>) 2 - Content section title (Ex: <h2>Contacts</h2>) 3 - Sidebar content section title (Ex: <h2>Publicity</h2>) I am trying to build my CSS to style the 3 different headers but I am having some problems. I could use: h2.Post, h2.Content and h2.Sidebar or: h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar or even: h2 (for Post), h2.Content for content and then h2.Sidebar to change Content class so it fits Sidebar. So a section in sidebar would be: <h2 class = "Content Sidebar">Publicity</h2> Could someone help me in deciding how should I structure my classes? Thank You, Miguel I want to make a seperate component with style sheets associated with it so I can change the look in the future. My intended goal is something that will look like a two column table with the contents of each column being aligned to the right, and left, respectively so they nearly meet in the middle. Text: SelectDropDown Text: AnotherDropDown More Text: AnotherDropDown Kind of like that, where the colons should be matching up, and the drop downs should begin at the same place. What would the div/span structure look like? For example if I want the component to be 400 pixels wide, and the two columns meet at the center. Thanks in advance. Hi, Im just starting another website and have coded the first page, ive run into a few problems on other projects later on indevelopment so would like it if someone could look over my code, let me know if there are sections that can be coded better? LINK HERE Also in FF it doesnt line up perfectly on the date, any ideas? Thanks in advance, Mike I am working on a multi-css document website for the May 1 Reboot and hit a huge snag on one of the websites. The CODY version's navigation keeps jumping around. The navigation is really similar to one of the other sites (BRIANNE) and hers is stable. If anyone can help that would be awesome! web address http://www.studio66design.com/html/hidden/may_1_reboot/ css files http://www.studio66design.com/html/hidden/may_1_reboot/css_files/cody_rules.css thanks When I zoom into my webpages, the structure of the website does not stay the same, all my elements start shifting and moving around... I am trying to figure out a way to position elements so when I zoom in or out they stay in the exact same position... any suggestions? Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Hi, I'm building a table -like structure with divs and spans. When the columns have long text, the text overflows a bit funnily, so that the text in right column continues from left column. I have example at: http://www.viewinteractive.fi/tests/div.htm The page was validated before I put the code there within the textarea. The important part is he Code:
<html>
<head>
<style type="text/css">
div.r1 {
background-color: #ccc;
width: 400px;
}
div.r2 {
background-color: #eee;
width: 400px;
}
span.s1 {
color: #700;
width: 150px;
border-right: 2px solid black;
float: left;
}
span.s2 {
color: #070;
}
div.sep {clear: both; }
</style>
</head>
<body>
<div class="r1">
<span class="s1"> Sometimes this stuff get's quite long. </span>
<span class="s2"> And it is not a problem, if both columns are long.</span>
</div>
<div class="sep"></div>
<div class="r2">
<span class="s1"> Now if... </span>
<span class="s2"> ... only right column is long, the page looks a bit funky. </span>
</div>
<div class="sep"></div>
<div class="r1">
<span class="s1"> If left is long, it looks ok in IE, but not Firefox. </span>
<span class="s2"> And right is short.</span>
</div>
</body></html>
I'd rather do this with tables, but that is not an option atm. Any helps? t.j Hi all, I have created a tree menu that is dynamically loaded from the directory structure on my web server. Because it takes a while to load, I was wondering if there is any way to cache the menu so that the browser doesn't have to load it again and again. My idea is to cache it twice a day maybe (to keep up to date as it is accessing the report). Does any one know a way of doing it? Regards, Sameer. Hello, I work with ASP.NET and I never liked the way some controls are rendered. Fortunately .NET 3.5 has a new control, ListView, which lets me render my HTML code the way I want. I need do display tabular data on various pages of a web site. Should I use tables? Should I use lists? What other option is best and which should I use? And if I use a table what is the cleaner and better table code I should have? For example, should I consider this a good code: <div class="PrettyGridView" id="GridView1"> <div class="AspNet-GridView"> <div class="AspNet-GridView-Pagination AspNet-GridView-Top"> <a href="javascript:__doPostBack('GridView1','Page$1')">1</a> <a href="javascript:__doPostBack('GridView1','Page$2')">2</a> <span>3</span> </div> <table cellpadding="0" cellspacing="0" summary=""> <thead> <tr> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort $Operation')">Operation</a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Reps')">Repetitions</ a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Duration')">Total test</a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Average')">Average</ a></th> </tr> </thead> <tbody> <tr> <td>Sin</td> <td>27124</td> <td>31</td> <td>1.1521</td> </tr> <tr class="AspNet-GridView-Alternate"> <td>Sinh</td> <td>19777</td> <td>31</td> <td>1.5801</td> </tr> </tbody> </table> <div class="AspNet-GridView-Pagination AspNet-GridView-Bottom"> <a href="javascript:__doPostBack('GridView1','Page$1')">1</a> <a href="javascript:__doPostBack('GridView1','Page$2')">2</a> <span>3</span> </div> </div> </div> Thanks, Miguel I'm using the max-width in IE in my site - specifically I'm using it to set the minimum height of certain elements. Now that it has become a key part of my design, I realized that it generates errors in the W3 validator. Does anyone know a valid way to use the min-height that will work with IE? I've got a dynamically generated <select> list, where the <option>s are styled using both 'class' and 'style' - like in the following example: PHP Code: <style> .thm_img { height:30px; } </style> <select> <option class="thm_img" style="background: #99CC00;" value="1" >Image 1</option> <option class="thm_img" style="background: #FF3300;" value="2" >Image 2</option> <option class="thm_img" style="background: #CC9999;" value="3" selected="selected" >Image 3</option> </select> No big deal - pretty standard stuff. The "selected" <option> displays in the 'visible' part of the field and also as part of the drop list ... as one would expect. But, and this is where I am baffled - the attributes from both class and style show up in the option listing, whilst only the 'class' attributes show up in the 'visible' part of the list. If I'm not making any sense here, just cut and paste the above code into an html editor to see what I mean. You'd note that 'Image 3' has a white background in the visible part of the field, but a coloured background in the drop list. Would anyone know why the attributes from the 'style' aren't being applied but that from the 'class' is ? ... and how (if possible) would I resolve this without combining the style into the class (since combining them is not an option - no pun intended). Cheers I have a website/application that I want to give the users the option to select from multiple CSS's on their browser. How do I go about letting the user change the style sheet? -Dynasty Hi, I am new at this. I am using a software to create my website . I dont want the customer to see a shipping option on the checkout page as my product cannot be shipped. How do I remove the shipping information part and show only the billing information from the checkout page? Someone gave me this css: <style type="text/css"> #DisplayShippingSpeedChoicesTD { display: none !important; } #CalcShippingDivContainer { display: none !important; } </style> Where should I put this css? SHould it go in the main css file or html template? Any particular location in the css? Thanks Hi all I have two questions about the great Firefox extensions Web Developer Toolbar. 1) Is there a way to keep selected options (e.g. Images > Display Alt Attributes) even when reloading the page? Or even forever (until I deselect them)? 2) Can I alter the default CSS used to display information? E.g. I want the displayed alt attributes of images to be displayed absolutely and with an opacity of 50% or so. This way I always see while working on a web when there is no alt attribute or an inappropriate one (maybe from copy pasting or so)... Thanks a lot for help :-) Josh Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? |
|||||||