|
CSS - Fixed Width(pixels) Nav Menu And Changing Width(percetage) Content Div..help
i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Similar TutorialsHello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov 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.... After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice. Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something. Below represents what I *think* are the key parts of my .css file. #wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages. Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like. Code:
#wholePage {
font: 90%/1.1 trebuchet, arial, helvetica, serif;
width:96%; margin:0px auto; color:#333;
}
#contentLeft {
float:left; width:180px; margin:0; padding:0 1em;
font-size:12px; border-right:1px solid #ddd;
}
#contentMain {
margin-left:200px; /* border-left:1px solid #ccc; */
margin-right:200px; /* border-right:1px solid #ccc; */
padding: 0 1em;
}
#contentRight {
background: url(../images/bg_logoRt.png) repeat-y fixed top right;
float:right; width:180px; margin:0; padding:0 1em; font-size:12px;
border-left:1px solid #ddd;
}
#footer {
clear:both; margin:0; padding:0.5em; color:#333;
border-top:2px solid green;
}
Thank you very much for your valuable time. I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Is there a size difference between css pixels and html width pixels? The question I ask is because I am using the embed code from flickr and vimeo`s width of 220 and the search input bar in css is set to 220px, but when viewed through a browser they have different lengths. Is there a solution for making it the same length? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html I tried to do this CSS drop down menu with 2 methods, but none of them work perfect. The first method is this: PHP Code: #menu1main { /* Top drop down menu styles */ height : 31px; display : block; } #menu1main a { /* Top drop down menu hover styles */ display : block; color : #000000; text-decoration : none; border : none; background-repeat : no-repeat; } .menu1 .menu1list { /* Hide top drop down menu submenu */ display : none; } .menu1, .display { /* Top drop down menu top level styles */ float : left; width : 110px; text-align : center; vertical-align : middle; font-family : Comic Sans MS; font-size : 10pt; line-height : 31px;} /* Top drop down menu submenu hover styles */ a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { background-image : url('image/menu_banner_1.jpg'); background-position : 12px 50% ; } a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { background-image : url('image/menu_banner_2.jpg'); background-position : 12px 50% ; } /* Top drop down menu submenu hover styles */ a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { display : block; text-decoration : none; border : none; color : #000000; text-indent : 16px; text-align : left; font-size : 8pt; line-height : 20px; width : 130px; } a.menu1lv2:hover, a.menu1lv2:active { background-image : url('image/menu_cube_1.gif'); background-position : 0% 100% ; background-repeat : no-repeat; } a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { font-weight : bold; } The HTML for this is: Code:
<div id="menu1main">
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b1lv1" href="">Intro</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Title</a>
<a class="menu1lv2" href="">Part 2 Title</a>
<a class="menu1lv2" href="">Part 3 Title</a>
</div></div>
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b2lv1" href="">Chapter 1</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Long Title</a>
<a class="menu1lv2" href="">Part 2 Long Title</a>
<a class="menu1lv2" href="">Part 3 Long Title</a>
</div></div>
</div>
The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method: PHP Code: ul.top { /* Top drop down menu styles */ display : block; padding : 0; margin : 0; border : none; font-family : Comic Sans MS; font-size : 10pt; text-align : center; vertical-align : middle; } #topnav li.topnav0 { /* Top drop down top level menu styles */ position : relative; float : left; background-image : url('image/menu_banner_1.jpg'); background-position : 50% 0% ; background-repeat : no-repeat; width : 110px; line-height : 31px; } #topnav li.topnav0 a { /* Top level link styles */ color : #000000; text-decoration : none; } li.topnav0 a:hover { /* Top level hover styles */ text-decoration : none; font-weight : bold; } #topnav ul.topnav1 a:hover { /* Drop down hover styles */ text-decoration : none; background-image : url('image/menu_cube_1.gif'); background-position : 0 50% ; background-repeat : no-repeat; } li.topnav0 ul.topnav1 {/* Drop down box style */ display : none; background : #FFFFFF; padding : 0; margin : 0; position : absolute; top : 100%; left : 0; } #topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */ display : block; padding : 0; margin : 0; text-indent : 16px; text-align : left; font-size : 8pt; line-height : 20px; width : 250px; } #topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */ display : block; } And the HTML is as follow: Code:
<div>
<ul class="top" id="topnav">
<li class="topnav0"><div><a href="#">Home</a></div>
</li>
<li class="topnav0"><div><a href="#">Intro</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Title</a></li>
<li><a href="#">Part 2 Title</a></li>
<li><a href="#">Part 3 Title</a></li>
</ul>
</li> <li class="topnav0"><div><a href="#">Chapter 1</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Long Title</a></li>
<li><a href="#">Part 2 Long Title</a></li>
<li><a href="#">Part 3 Long Title</a></li>
</ul>
</li>
</ul>
</div>
The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up. Any help of making either method to work is great appreciated! Thank you very much! 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 im trying to fix my website layout to show up the same in IE and firefox. right now the demensions are fine in firefox. in IE they show up to be too big http://mrsako.gotdns.com/index.php i made a class for the TD on the left (where the green part is as you can see in FF. im pretty sure the whole problem involves that im trying to set a certain width to a TD instead of a Table. heres the CSS Code:
A:link{color:#ADD8E6;text-decoration:underline}
A:visited{color:#ADD8E6;text-decoration:underline}
A:active{color:#ADD8E6;text-decoration:underline}
A:hover{color:#ADD8E6;text-decoration:underline}
#mastertable {max-width: 1024px;}
#max800{max-width: 800px}
#max750{max-width: 750px}
#max500{max-width: 500px}
#max400{max-width: 400px}
TD{text-align: left; }
#tLeft{text-align:left; vertical-align:top;}
.right{text-align: right;}
textarea, submit{background-color:#19665a;}
table.nounderline a, table.nounderline a:link, table.nounderline a:visited, table.nounderline a:active, table.nounderline a:hover {
text-decoration:underline
}
table.trhover tr:hover {
background-color:#0b5b4e;
}
.container{
border-style: none;
border-width: thin;
padding:0;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
}
.PlainTable{
border-style: none;
padding:0;
}
.topbarTD{
border-style: none;
border-width: thin;
padding:0;
height:187px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/2newbanner.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
}
.innertopbarTD{
border-style: none;
border-width: thin;
padding:0;
width:290px;
height:24px;
background-image:url("images/fluidgoldline.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.LeftSideLinks{
border-style: none;
border-width: thin;
padding:0;
width:159px;
width: expression(document.body.clientWidth < 159 ? "159" : "auto" );
height:474px;
background-image:url("images/space.gif");
background-repeat: repeat-y;
text-align:right;
vertical-align:top;
}
.TopPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
width: expression(document.body.clientWidth > 865 ? "865" : "auto" );
height:99px;
background-image:url("images/toppagespace.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.ExtraPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
height:99px;
background-image:url("images/miniextrapagespace.gif");
background-repeat: repeat-y;
text-align:left;
vertical-align:top;
}
.BottomBorder{
border-style: none;
border-width: thin;
padding:0;
height:107px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/bottomborder.gif");
background-repeat: no-repeat;
text-align:center;
vertical-align:top;
}
heres the html Code:
<table height="768" class="container" cellspacing="0" summary="Foo dot Com">
<tr>
<td class="topbarTD" colspan="2"><table class="innertopbarTD" cellspacing="0" align="right"><tr><td class="right">Please <a href="login.php" title="Login">Login</a> or <a href="register.php" title="Sign-Up">Sign-up</a><font size="2" color="red">    </font> </td></tr></table></td>
</tr>
<tr>
<td class="LeftSideLinks" rowspan="2" align="right">i thoguht i saw a putty cat i thought i saw a***** cat</td>
<td class="TopPageSpace"><font size="26"></font><img src="images/fluidtoppage.gif" height="99"></td>
</tr>
<tr>
<td class="ExtraPageSpace">
<div style="text-align:center;">
<h2>Foo.com<br>
Game Servers and VOIP Servers<br>
admin@foo.com</h2>
</div>
</td>
</tr>
<tr>
<td class="BottomBorder" colspan="2">
<table border="0" height="107" summary="Navigational Links">
<tr><td width="159"><!-- side -- ></td>
<td width="865"><center>
<br><a href="index.php" title="Home">Home</a> - <a href="services.php" title="Services">Services</a> - <a href="contact.php" title="Contact">Contact</a> -
<a href="login.php" title="Login">Login</a><br>
<a href="faq.php" title="Frequently Asked Questions">FAQ</a> - <a href="termsofservice.php" title="Terms and Conditions, Acceptable Use Policy, Legal Information">Terms and Conditions</a><br>
Copyright © 2006 Foo. All Rights Reserved<br>
<small>All logos and images are the trademarks of their respective owners.</small>
</center>
</td></tr></table>
</td>
</tr>
</table>
i know theres some table tags which i havent taken out yet, im in the process of trying to convert everything i can to CSS edit: i forgot to mention my problem the left side green bar is supopsed to be 159px wide. in firefox it shows the correct width, byt in IE it thinks 159px is almost double that I've had a look at the CSS for this website onerailway .com but cannot seem to find out how the width of the entire site is defined. If you are using any screen res upto 1024x768 its 100% of the browser (assuming its not windowed) but then go over 1024x768 and it limits its self to around 1000 px wide. This is the sheet it appears to be using Many thanks if anyone can point me in the correct way for finding out how to do this Pretty much what the title says, is it possible to center a div in the middle of the screen without giving it a fixed width? I having a bit of a problem with my div tags. I have set a table inside the divs to a fixed width of 300px and the same with the div tag. But if I was to insert text into the table such as: 11111111111111111111111111111111111111111111111111111111111111111111 this makes the table and div tag expand to fit the text on one line. Making is disappear off the page so people have to scroll to view the text. I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text. Is there anyway round this?? I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. Hi everyone, I'm interested in making the ads in the rightmost sidebar stay within the 900px of the layout. How can I alter this page so that: 1. The images stay inside the container div 2. If the images are larger than the rightmost column, the column expands to the left and will make the main content feed smaller. I'm still kind of rusty with how fluid width works. Site is h**p://www.topofferspage.com Hello all, I am implementing a 2 column fixed width template. The problem is that the smaller column does not stretch to match the height of the taller column. All of the online templates I have found remedy this problem by setting a 1 px high background image to span the width of the container div. My problem is that I would like to place an image at the top and bottom of the smaller column. How can I achieve this? 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? this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. Well, this would be the first time I actually am starting to use full DIVs to code a website, usually use tables. Anyways, I have most bugs fixed out since I do somewhat know how to code in DIVs - the question is though, on one of the "right" side content area things I have, the content part extending right over the DIV, and even the container. I also gave both with fixed widths, no idea why this is happening. Anyone have any ideas? http://www.futuregamers.net http://www.futuregamers.net/style.css |
|||||||