|
CSS - Large Sized Layout With Fixed Element Positions - Frustrated And Stuck :(
Hi guys!
Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. Similar TutorialsI've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu. bit.ly/f2a4rC The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7. I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects. How can I achieve this look in IE7? Hi! I'm new here, so I'd like to greet everyone first. Secondly.. I have a minor problem with my test webpage. I'm not an expert in CSS, but I did manage to sort-of make my own web template and all. Now the problem is that with resolution smaller than 1024*768 main frame of the page (post frame - blog) jumps over the sidebar. Here's the webpage so you can see for yourselves what my problem is. I want it to be fixed in browser (as in "when I resize the browser window, the whole layout says fixed and I need to scroll to see the very right end of it"), but don't know how to do that. Any help, please? The whole template is still under construction.. and the webpage is just a test page. The real page is elsewhere waiting to get the new template. Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike What is your take on using "table-layout:fixed" property? I'm using tables strictly for data output, not for layout. Is it a good practice to use it? Having coded using tables for the past 5 years, I'm coding my first site using pure CSS (hold back the laughter) ... I'm new to change. In any case ... I'm attempting to setup a homepage that has a fixed width and height. So far I've got a one-column header working fine. Beneath the one-column header I wish to have three columns with--dare I say it Web 2.0ish rounded corner cells--However the caveat is that these three cells need to all be a fixed height to go along with the page design. After two days of research, coffee, banging my head against my desk, I haven't been able to figure this one out. I am using an image at the top of each cell and an image at the bottom of each cell, but cannot get the cells to maintain a specific height. Any help would be appreciated: CSS: Code: /*<agl.folder "general">*/
body {
color: #000;
font 76%/1.5em "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.footer { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.user_links a:link { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:visited { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:hover { color: #8da7fb; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
a:link { color: #7f7f7f; text-decoration: none; }
a:visited { color: #7f7f7f; }
a:hover { color: #8da7fb; text-decoration: none; }
/*</agl.folder>*/
#frame {
width: 965px;
margin: 0 auto;
}
#header {
background-color: #fff;
max-width: 965px;
margin-top: 10px;
}
#content {
position: relative;
max-width: 965px;
height: 200px;
}
#footer {
background-color: #fff;
position: absolute;
top: 265px;
width: 965px;
}
/*<agl.folder "box">*/
#portfolio {
position: absolute;
left: 0px;
top: 0px;
width: 475px;
height: 200px;
}
.portbox {
background-color: #ffffff;
border: solid 1px #b6b6b6;
padding: 4px;
}
.portbox:before {
content: url(../images/homepage/portfolio.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.portbox:after{
content: url(../images/homepage/portfolio_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "methodologies">*/
#methodology { position: absolute; left: 482px; top: 0; width: 237px; height: 200px; }
.methbox { background-color: #ffffff; max-height: 200px; border: solid 1px #b6b6b6; padding: 4px; }
.methbox:before {
content: url(../images/homepage/methodology.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.methbox:after{ height: 200px; content: url(../images/homepage/meth_bottom.png); display: table-row; margin: -5px; }
/*</agl.folder>*/
/*<agl.folder "design">*/
#design {
position: absolute;
left: 726px;
top: 0px;
width: 235px;
height: 125px;
}
.designbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.designbox:before {
content: url(../images/homepage/design.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.designbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "solutions">*/
#solutions {
position: absolute;
left: 726px;
top: 135px;
width: 235px;
height: 125px;
}
.solutionsbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.solutionsbox:before {
content: url(../images/homepage/solutions.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.solutionsbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
h2 { font-size: 1.5em; font-weight: bold; }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Test CSS</title> <link href="css/home_layout.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="frame"> <div id="header"> <p align="right"><span class="user_links"><a href="(EmptyReference!)">Login</a> | <a href="(EmptyReference!)">Register</a> | <a href="(EmptyReference!)">Contact</a></span></p> <img src="images/tabs.jpg" alt="" height="43" width="965" border="0" vspace="3" livesrc="images/tabs.psd" /><img src="images/homepage/flash_header.jpg" alt="" height="275" width="965" border="0" vspace="5"/><br /> </div> <div id="content"> <div id="portfolio"> <div class="portbox"> <p align="center"><img src="images/homepage/screenshots.jpg" usemap="#screenshotsc1fd8d76" livesrc="images/homepage/screenshots.psd" alt="" height="137" width="426" / border="0"><map name="screenshotsc1fd8d76"><area shape="rect" coords="290,9,418,129" href="http://www.pilatesmovementnyc.com" alt="Fitness Center Pilates New York City" target="_blank" /><area shape="rect" coords="146,9,281,129" href="http://www.emmestyle.com" alt="Emme Super Model" target="_blank" /><area title="Healthy Living NYC" shape="rect" coords="3,11,130,132" href="http://www.healthylivingnyc.com" alt="Healty Lliving NYC" target="_blank" /></map></p> </div> </div> <div id="methodology"> <div class="methbox"> <p><img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step i</span>s<br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span></p> </div> </div> <div id="design"> <div class="designbox"> <p></p> </div> </div> <div id="solutions"> <div class="solutionsbox"> <p></p> </div> </div> <div id="footer"> <div class="footer"> <a href="(EmptyReference!)">Home</a> | <a href="(EmptyReference!)">Portfolio</a> | <a href="(EmptyReference!)">Web</a> | <a href="(EmptyReference!)">Marketing</a> | <a href="(EmptyReference!)">Advertising</a> | <a href="(EmptyReference!)">Identity</a> | <a href="(EmptyReference!)">Hosting</a> | <a href="(EmptyReference!)">Profile</a><br> <a href="(EmptyReference!)">Design</a> | <a href="(EmptyReference!)">Technology</a> | <a href="(EmptyReference!)">Business Solutions</a><br> <a href="(EmptyReference!)">Contact Us</a> | L<a href="(EmptyReference!)">ogin to Your Account</a><br> Copyright 2007 Website Development Enterprises, LLc </div> </div> </div> </div> </body> </html> Hello, I created a 3 column layout with header and footer: http://www.27lamps.com/public/layout.htm The problems I have a 1. I am not able to extend my 3 columns so they have the same height. How can I do this? Do I need to use images somehow? I would prefer to use CSS only if possible. 2. I am not able to use padding in my columns without breaking the design. Could someone, please, help me fixing this problem and also improve my code? Thanks, Miguel First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short): http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! So this layout I'm working on has a fixed toolbar at the top, a header with variable height directly beneath the toolbar, and then the remainder of the window shall be taken up by a content area. The content area has a nested container which actually holds the content. (See attached gif for a visual explanation.) There's a minimum height and width set as well, but I'm not worried about that for IE6 just yet. Because of the variable height on the header, I was forced to use JavaScript in order to determine the top property of the content area. Originally I was told we could skip IE6, but after I'd happily gotten it working and styled, I was told it needed to work in IE6 after all. So now it's back to the drawing board. Despite having its position set as absolute with bottom, left and right set to 0, #content stays tiny. Possibly as a result or possibly as a separate problem, #mainContent automatically expands itself, rather than filling only the conten area. http://lab.waltercoots.com/sandbox http://lab.waltercoots.com/sandbox/.../inc/master.css I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width. I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm But none have a fixed width center column (could they be modified for a fixed width center col?) Any suggestions? Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
Hello, I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again. I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related: 1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones. 2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal). 3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored. Here is a test html: http://www.bsuto.com/test.html and here is the css: http://www.bsuto.com/fluid.css Thanks! -Brian Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... if you look under the top banner on my site, the navigation bar is too tall and wide, and all of the buttons don't even fit the full width of the page. it is partially complicated because two of the ten buttons have drop-down menus created through javascript. it is a horizontal ul with the buttons floated left. i'll give you the cut-down html code and then the css to go along with it so you get the general idea. navigation menu html: html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1"); $unvalidated_games=get_games("active=No"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; ?> onmouseover='mopen("m2")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a> <div id='m2' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1&cattype=videos"); $unvalidated_games=get_games("active=No&cattype=videos"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a> </li> <li> <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a> </li> <li> <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a> </li> <li> <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a> </li> <li> <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a> </li> <li> <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a> </li> <li> <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
$link=get_category_link("name=Unvalidated&page=1");
$unvalidated_games=get_games("active=No");
$num_unvalidated=count($unvalidated_games);
echo "
<a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
</div>
</li>
<li>
<a href='".get_category_link("name=all&page=1&cattype=videos")."'";
?>
onmouseover='mopen("m2")' <?php echo "
onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a>
<div id='m2'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
$link=get_category_link("name=Unvalidated&page=1&cattype=videos");
$unvalidated_games=get_games("active=No&cattype=videos");
$num_unvalidated=count($unvalidated_games);
echo "
<a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
</div>
</li>
<li>
<a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a>
</li>
<li>
<a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a>
</li>
<li>
<a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a>
</li>
<li>
<a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a>
</li>
<li>
<a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a>
</li>
<li>
<a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
navigation menu general css: css Code: Original - css Code #sddm { display:block; margin: 0; padding: 0; z-index: 30; position:absolute; } #sddm li { display:block; margin: 0; padding: 0; list-style: none; float: left; max-height:31px; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 4px 0.3em; margin:0; }
#sddm {
so what i want is for the buttons (<li>s) to have the exact height of their background div, which is 31px, and i also want them to fill 100% of their background div's width. how can i make this possible? I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it. BUT I want the rest of the containers to be the same size as the biggest. I.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- See the first one is bigger? Well I want the rest to be of the same size, i.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- Link he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks 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; I can't see it working (and in practice it hasn't). Surely the background position needs to be fixed as the image is not scalable. I hope I am right on this or it's back to the drawing board. Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? |
|||||||