|
CSS - Css Flow And Dhtml
I'm running into a problem with an interface that I'm developing. Basically it's a collapsible treeview using DHTML and the display property to 'open' and 'close' tables.
I need to have several of these tables side by side but without overflowing horizontally so that the user has to scroll horizontally. The best way I've found was to float the elements so that any overflowing tables would be wrapped. Example: [] [] [] [] [] [] [] [] [] [] [] [] However, a problem arised when I 'open' and 'closed' the tables repeatedly (three times or more). The other tables started to wrap immediately after the first table (the one I was opening and closing). So that all the tables lined up in a single column eventually and not flowing as they should've been. Example: [] [] [] [] [] Upon refreshing the page, everything flows as it should. Please let me know if I'm unclear in my description. Similar TutorialsWhat are some reasons that a div box could come out of the flow of the page. I know when you set an elements position to absolute, it comes out of the flow. Fixed does this as well. Any other reasons, or bugs. I have a couple div boxes which are positioned relatively and floated left and right. They have come out of the flow and now overlap other elements. I have no idea why. View the error he http://textcs.com/wimax/coverage-map/ Code: <div id="page">
<div id="city_bg"><img style="min-height:240px; min-width:800px" src="<?php bloginfo('template_directory'); ?>/images/city_bg_long.png" border="0" alt="" width="100%" height="100%" /></div>
<div id="info">
<!-- page content -->
<div id="info_content">
<?php if (have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
<!-- navigation -->
<div id="info_nav">
<ul>
<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>
</ul>
</div>
</div>
</div>
CSS: Code: #page {
position:relative;
margin:0;
width:100%;
height:auto;
min-height:500px;
border-bottom-color:#FFFFFF;
border-bottom-width:5px;
border-bottom-style:solid;
background-color:#413163;
}
#city_bg {
position:absolute;
left:0;
top:0;
z-index:1;
overflow:hidden;
width:100%;
height:450px;
}
#info {
position:relative;
width:836px;
padding-top:20px;
margin:0 auto;
z-index:20;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
}
#info div {
display:inline-block;
}
#info_nav {
position:relative;
float:left;
width:200px;
min-height:200px;
border-color:#FFFFFF;
border-width:4px;
border-style:solid;
background-color:#FFFFFF;
background-image:url(images/blue_fade_small.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#info_nav ul {
padding-left:5px;
}
#info_nav li {
list-style-type:none;
padding:3px;
margin:0;
}
#info_content {
position:relative;
float:right;
width:600px;
min-height:400px;
border-color:#FFFFFF;
border-width:4px;
border-style:solid;
background-color:#FFFFFF;
color:#110d1a;
padding:10px;
}
Hello Friends I've a problem where my images flow away after i did added an banner has the following css code Code:
#topbar{
position:absolute;
padding: 2px;
background-color: #F4F3B3;
visibility: hidden;
z-index: 100;
}
HTML Code Code: <div id="topbar"> <a href="" onClick="closebar(); return false"><img src="images/close.gif" alt="blah" border="0" /></a> ads goes here </div> now the images on IE below the banner flow away and after i make refresh it back again i've tired to change position:absolute; to fixed/relative ..ect but it will effect the banner since it moves down with the scroll thanks in advance Hi All, I am using DIV tags to hold content rather than using a table. I have about 16 elements with the following style applied: Code:
div.game {
text-align: center;
float: left;
height: 180px;
width: 150px;
overflow: hidden;
}
This works well, the DIVs will fit as many per row as possible but it can leave a lot of empty space to the right of the screen (up to 150px obviously) and if the last row has less DIVs they to the left of the screen like this: |--- page ---| [ ][ ][ ][ ] [ ][ ][ ][ ] [ ] I would like to be able to either center the DIVs or to space them out like this: |--- page ----| [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ______ [ ] Hope that is clear. I can't set relative widths, as I want the page to scale. So is there any way I can acheive the effect I want? Thanks. Hello, I'm stumped on how to float an image to the left, and still keep it in the flow of the document. Here is an example off my head. Code:
#container {
border: 1px solid #000;
}
img.floatleft {
float:left;
}
div {
display: inline;
}
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
The image will exceed the bounds of 'container' if the image is larger than the text is tall. How can I get around this? Thanks again for the help. webg <div>text</div> Hello, My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer. It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer. My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think? See online demo, http://tlcgiftsandbaskets.com/demo/positioning/position_css.php Code:
body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}
#Container{
position: absolute;
z-index:1;
width: 700px;
height:auto;
left: 50%;
margin-left: -350px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}
#ActionContainer { margin:0 0 0 0; text-align:left; border:1px solid orange; }
#CenterContainer { margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
#LeftContainer { margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer { margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
#HeaderContainer { margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer { margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }
Code: <div id="Container"> <div id="ActionContainer"> <div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div> <div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div> <div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div> </div> <div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div> <div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div> </div> 'Ello, This problem is a bit complex to try and explain on here so if this gets too confusing just let me know and I'll try and clear up whatever you are confused about. I am currently building a site that has a wrapper div with a width set to 100% and a max-width of 1000px so that on smaller screens the site will appear nicer and not have horizontal scrollbars. In this wrapper div is a content div that is 84% of the wrappers width and has it's margin set to 0 auto to make in then content div centre in the wrapper. What I'm wondering is if there is a way to change the content divs width from 84% to 100% once the wrapper div get to a small enough size. At the moment when the screen gets too small the content div is still 84% size of the wrapper div and centred, but say on a screen with a resolution of 800x600 I think it would be more beneficial to have to content div take up the whole wrapper to display more content. I was thinking of setting a min-width but then if the screen gets smaller than the min-width a horizontal scroll bar would appear. I was just wondering if something like this was possible, if not it doesn't matter to much as I can set the min-width up for a 800x600 screen resolution and anything below that probably isn't too important anyway. I've got a 2 column layout. It goes like this: .leftnav { position: absolute; left: 0px; top: 0px; } .content { position: absolute; left: 150px; top: 0px; } In the html: <div class="leftnav">A bunch of navigation</div> <div class="content">A bunch of content</div> Now, underneath both of these columns, spanning the width of both, I want a footer div. The leftnav and the content will not be the same length down the page. I don't know which of these 2 columns will be longer on any given page. However, underneath the longest column, I want to put my footer div. I could do this with a table easily enough. But how fun would that be? Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button? Can be all viewed here -> http://streaming.smad.jmu.edu/smad307/ring/gloo I have three layers starting at the same position on the page. Each layer has a Y-repeat repeating image that tiles seamlessly. There is one for the left spacer, the middle content, and the right spacer. The Nav menu on the left are just images placed in at the top of the left spacer layer. I'm trying to get each of these layers to expand as content fills up the middle Content layer. This doesnt work at all in Firefox - with any excess content just heading off into white space. And it works somewhat with IE - with only the Content layer to expand as content fills it. I know this is a recurring issue with CSS, but is there a simple fix for this? I've seen this done before without any Javascript hacks, but can't remember where. I do remember, it didn't look like the most graceful solution. And in IE, the navigation .gifs on the left have a gap between each of them. I found that odd since they're just <IMG>s within the layer. Any help would be greatly appreciated hi i have a table that has another small table of a fixed height aligned to the right. what i want is that when i enter text in the larger table, the text should 'flow' around the corner of the table. +----------+----+ +....1.....+..2.+ +..........+----+ +...............+ +---------------+ when i enter text in 1, i want that it wraps it around 2 as well. please tell me how to do it. HI, I have an A-Z contents list for my website. I can manually split the list into 3 columns of equal length, but that only works as long as the list doesn't change length and the window is the right size. Is there a way to have a single long list and automatcally show it in 3 newspaper style columns? Thanks Richard right now i have a page that has an iFrame and three tabs, when you click on each tab, it loads a different page into the iFrame. this is done as the data on the rest of the page is randomly generated via PHP.... so i cant have a refresh on the entire page... is there a way to hide all three sections of info the tab calls up in a "display:none" div? and then bring it up upon the tab being clicked? thanks. i want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me. I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window. You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
html, body
{
margin: 0px;
}
.window
{
background: gray;
position: absolute;
border: 1px solid black;
top: 20px;
left: 20px;
}
.ex2
{
left: 300px;
}
.topBar
{
position: relative;
color: white;
margin: 2px;
}
.ex2 .topBar
{
background: none;
}
.closeButton
{
width: 16px;
height: 16px;
background: red;
}
.window .content
{
width: 200px;
height: 200px;
background: white;
overflow: auto;
}
.bottomBar
{
position: relative;
}
.ex2 .bottomBar
{
background: none;
}
.resizeHandle
{
background-color: green;
height: 16px;
width: 20px;
}
</style>
</head>
<body>
<div class='window'>
<div class='topBar'>
Title
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'> </div>
</div>
<div class='window ex2'>
<div class='topBar'>
Title <div class='closeButton'> </div>
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'><div class='resizeHandle'> </div></div>
</div>
</body>
</html>
I have a website were the dhtml menu is driven from a seperate file. I have applied a style sheet to my page. The only problem is the style sheet is applied to my dhtml menu which i dont want. Any suggestions greatly appreciated. I have a problem in IE when dynamically adding elements through the DOM, the problem is basically: if i add a element(a div btw), with document.createElement and use setAttribute("class", "my_CSS_classname") to apply styling, the styling doesnt get applied when viewing it in IE6 (it works fine in firefox). Does IE force you to style dynamic elements though the .style proberty or wah? hi there! well i have been working on how xoops cms ( http://www.xoops.org ) and sothink dhtml menu (Sothink Dhtml Menu ) can be made to work, i have been successful to some extent. the issue When i use the sothink dhtml menu on mywebsite: my Website the submenu width is all over the place. ok here is what i got so far 1) my website: http://ayubians.com/thesite/index.php with default theme, of sev_zero style css file : Sev_zero Style.css 2) Scroll down mywebsite and on left side you will see a block called themes. Change the theme to 7dana-jane a new look website will appear: with working DHTML menu style css is: 7dana-Jane Style.css I want to use this menu with : sev_zero theme kindly tell me which what changes do i need to bring in my sev_zero theme to make the dhtml menu work! Regards billyvision P.S::: If you intend to try this on your own xoops website: please put the following codes: in head of ur theme html document add: Code: <script type="text/javascript" language="JavaScript1.2" src="http://www.ayubians.com/tasveer/stm31.js"></script> where as in body of ur theme html add: Code: <script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu0283",430,"http://www.ayubians.com/tasveer","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#FFFFF7","",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Menu Item 2","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFF7",0,"#B5BED6",0,"","",3,3,1,1,"#FFFFF7","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0]);
stm_aix("p0i1","p0i0",[0,"Menu Item 3","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]);
stm_bpx("p1","p0",[1,4]);
stm_aix("p1i0","p0i0",[]);
stm_aix("p1i1","p0i0",[0,"Menu Item 1"]);
stm_aix("p1i2","p0i1",[]);
stm_bpx("p2","p0",[1,2,0,0,2,3,0,0]);
stm_aix("p2i0","p1i1",[]);
stm_aix("p2i1","p0i0",[]);
stm_aix("p2i2","p0i0",[0,"Menu Item 4"]);
stm_aix("p2i3","p0i0",[0,"Menu Item 3"]);
stm_ep();
stm_aix("p1i3","p2i2",[]);
stm_ep();
stm_aix("p0i2","p1i1",[]);
stm_aix("p0i3","p2i2",[]);
stm_aix("p0i4","p0i1",[0,"Menu Item 5"]);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p0i0",[]);
stm_ai("p3i1",[6,1,"#000000","",-1,-1,0]);
stm_aix("p3i2","p0i1",[0,"Menu Item 1"]);
stm_bpx("p4","p2",[]);
stm_aix("p4i0","p0i0",[]);
stm_aix("p4i1","p0i0",[0,"Menu Item 1","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#fffff7",0,"#66ffcc",0,"","",3,3,2,5,"#00cc33 #0099ff #00ff99 #00ccff","#00ff99 #00ccff #00cc33 #0099ff"]);
stm_aix("p4i2","p3i1",[]);
stm_aix("p4i3","p2i3",[]);
stm_ep();
stm_ep();
stm_ep();
stm_em();
//-->
</script>
Other resources: Sev-Zero theme http://www.xoops.org/modules/library/viewcat.php?list=S&start=10 7dana-Jane theme: http://www.7dana.com/download/pafiledb.php?action=file&id=33 Your help in this regard will be highly appreciated billyvision I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code:
span.quality { color: #000000; font-weight: bold; padding: 2px;}
span.quality1 { color: #FFCC00; font-weight: bold;}
span.quality2 { color: #21E626; font-weight: bold;}
table.ttb {
background-color: #282828;
color: #FFFFFF;
margin: 0px;
padding: 1px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
font-size: 11px;
}
table.ttb a:link { color: #8888FF; }
table.ttb a:visited { color: #7777EE; }
table.ttb tr {
padding: 3px;
}
table.ttb h6 {
font-size: 10px;
}
.itemicon{
float: right;
padding: 2px;
margin-top: 12px;
}
Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) Hi, I spend many hours on the net to fix this problem, hope you can help me. I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link. With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html. Everything works fine, ecxept the position of the submenus. Here is some HTML: <table><tr><td> <a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a> </td></tr></talbe> ... <div id='layer1'> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br> </div> And here is some CSS: #layer1, #layer2, #layer3, #layer4 { position: absolute; z-index : 90; visibility : hidden; width : 150pt; left: 10pt } #layer1 { top : 0pt } Questions: 1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning. 2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame. 3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page? Hope some can help me! |
|||||||