|
CSS - Help Getting Repeating Layers To Flow With Content
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 Similar TutorialsIve seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other What 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 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. 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. '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. 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> 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? 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? 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> 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 Hi guys, Test site at http://www.bartlett-family.net/BBCON/ The vertical BG image on the left is not repeating vertically. I can't for the life of me figure out why not. Anyone, please? CSS is at http://www.bartlett-family.net/BBCON/main.css. TIA! Chris Hello people, Before I start, I know nothing much about CSS, and have a site that has upto for levels of nested tables. Though it looks nice, the site of the html file is massive, and I wanted to try and make a smarter file using css's. I have been looking at this all weekend, and need some help, as I seem to keep repeating the same statements in the css file just to change the colour. Quote: categorylinks1{ list-style-type: none; padding: 0; margin-left:18px; margin-right:auto; margin-top:5px; margin-bottom:10px } .categorylinks1 li{ padding-bottom: 1px; } .categorylinks1 li a{ margin-left: -3px; padding: 0px 1px; font-size: 10px; display: block; color: #2175bc; text-decoration: none; font-weight: bold; border-bottom: 1px solid #ececec; } .categorylinks1 a:visited{color: #449805; } .categorylinks1 a:hover { color: #000000; background: #95C5EC; text-decoration: none; } #leftbar1 .headers{ color: white; font: bold 110% Arial; background-color: #2175bc; padding: 2px; text-align: center; } #leftbar1 .menuitems li a{ text-decoration: none; font-weight: bold; } #leftbar1{ width: 165px; /*background-color: white;*/ } and my html is Quote: <table id="maintable" border="0" width="163" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111"> <tr> <td id="leftbar1" valign="top" width="149"> <div class="headers">Malia 2007</div> <ul class="categorylinks1"> <li id="c7"><a href="/" >Welcome to Malia</a></li> <li id="c6"><a href="/">Pictures of Malia</a></li> <li id="c3"><a href="/">Weather</a></li> <li id="c17"><a href="/">Maps</a></li> <li id="c16"><a href="/">Distances</a></li> <li id="c12"><a href="/">Phone Numbers</a></li> <li id="c4"><a href="/">Speak Greek</a></li> <li id="c5"><a href="/">Bank & Post Office</a></li> </ul> <tr> <td id="leftbar2" valign="top" width="149"> <div class="headers">Malia Sights</div> <ul class="categorylinks2"> <li id="c7"><a href="/" >Welcome to Malia</a></li> <li id="c6"><a href="/">Pictures of Malia</a></li> <li id="c3"><a href="/">Weather</a></li> <li id="c17"><a href="/">Maps</a></li> <li id="c16"><a href="/">Distances</a></li> <li id="c12"><a href="/">Phone Numbers</a></li> <li id="c4"><a href="/">Speak Greek</a></li> <li id="c5"><a href="/">Bank & Post Office</a></li> </ul> </td> </tr> </table> Is there anyway I can do this, without using the same CSS code as above, and creating - .leftbar2, categorylinks2 and all the components in the CSS file, just to change the colours. In the CSS file above I have made bold the codes I have to change to make a new version in different colours. The way I am doing it at the moment, it means for me to have 10 sections, I would need to create the CSS above 10 times, meaning it will be a massive CSS file for something that seems fairly straight forward. Any help would be greatly received, I am sure there is another way, but as i said right at the top, all I know about CSS's I have read this weekend. Kind Regards Graham Hi there. I'll try to explain this as clearly as I can: I have a site that needs these requirements - 3 column elastic layout with footer - left and right columns are static - center column is flexible to fill screen problem i am having is that the left and right columns ONLY need to have a repeating background (because of a required drop shadow in the design) on the y axis. Unfortunately I can't seem to get the left and right columns to assume the height of the content area, which also has to be elastic (so there's no fixed height either). Basically, the background images either don't show up, or only go as far down as "content" or based on a specific height (which is useless in this layout) Any suggestions or code samples would greatly appreciated! Thanks in advance , humanv3 I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images. What is the best way to do this (sans javascript)? Any help is much appreciated. I have a div #footer at the bottom of a page. All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer: http://www.jobsinkent.com/v5c/home/index.php If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!! Please take a look at my site: http://unoriginalblog.com I want to fill the space below my navigation sidebar with a repeating image div that would grow with the content. How would I achieve this? At the moment the div works like this: Code: <div id="page"> <div id="header"> header img... </div> <div id="content"> main blog bit. </div> <div id="sidebar"> navigation bar </div> <div id="footer"> footer... </div> </div> and the css: (only the relevent bits...wordpress divides ids/classes by layout/font/etc etc) Code:
#page {
margin: 0px auto 0px;
padding: 0;
width: 760px;
}
#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
#content{
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 490px;
}
#sidebar{
margin: 5px 10px 10px 10px;
padding: 10px 0 10px 10px;
margin-left: 565px;
width: 170px;
}
#footer {
padding: 0px;
margin: 0 auto 0px;
/* for some reason, it has to be 761px so that the whole page is aligned in ie.. firefox works both ways, 760 or 761 */
width: 761px;
height: 100px;
clear: both;
}
perhaps... i can set the bg of the #page as a repeating bg image and the sidebar bg white?... but then how can I make sure that the repeating image blends nicely? is there another way to make it so that I don't have to use bg images in #page? Thanks for the help Hi there, I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links. For example: Segate Hard Drive 250gb $150.00 Buy Now Maxtor Hard Drive 300gb $200.00 Buy Now etc I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display. Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again. Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together? I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'. I haven't posted any code, but can if people need more of an idea of what I am trying to do. Cheers Scott Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it. |
|||||||