|
CSS - Css Layout (minimum Width)
Im currently working on converting my companys site to CSS2 and XHTML (www.fwawest.com) as the current one dose not comply to any standard
I have managed so far to creat the top banner including down to "Construction News : UK News :" The problem Im having is the 3 colums under that. I have the 3 colums but when you resize the browser I dont want the 3rd colum to go behind the content. in other words I want the whole site to have a minimum width. becuase atm the 1st Colum (navAlpha) and the main contents (content) stay where they are which is not a problem and content has a minimum width of 300px but when you make the browser small anouth to hit the minimum width the 3rd colum (navBeta) gose behind the content. CSS Code:
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width: auto;
top:0px;
min-width:120px;
margin-left: 190px;
margin-right: 190px;
border:1px dashed black;
background-color:white;
padding:20px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:200px;
left:0px;
top:138px;
border:1px dashed black;
background-color:#eee;
z-index:2;
padding:10px;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
#navBeta {
position:absolute;
width:200px;
top:138px;
right:0px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
HTML Code: <!-- Main Content --> <div id="navAlpha"> <p title="'left' DIV">example text</p> </div> <div id="navBeta"> <p title="'right' DIV">example text</p> </div> <div class="content"> <p title="'middle' DIV">example text</p> </div> P.S No I did not make the orginal site , and yes it uses tables Similar Tutorialscan it be done? ideally in IE5-6 and Netscape6+ cheers 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.... 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;
}
Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. Hi, I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width). I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide). Can anyone tell me what I need to do or what I'm doing wrong please I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm HTML as follows: 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" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="fixlayout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id='wrap'> <div id="content"> <div class="searchresult1"> <h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0 /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p> <a href='info.php?id=486'>More details</a> </div> </div> </div> <!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> --> </body> </html> CSS as follows: Code: body {
color: #333333;
background-color: white;
font-size: 12px;
line-height: 1.3em;
margin: 0;
padding: 0;
border:1px solid black;
width:100%;
}
#wrap {
background: white;
margin: 0 0 2em 22%;
}
#content {
padding:0;
border-right: 1px solid #ccc;
margin-right: 4em;
width:97%;
margin-left:2.75%;
}
div.searchresult1 {
width:800px;
width: expression(this.width > 400 ? 400: true);
margin-top:20px;
margin-right:40%;
border:1px solid #9eceeb;
}
div.searchresult1:after {
content:".";
display:block;
clear:both;
height: 0;
visibility: hidden;
}
div.searchresult1{display: inline-block;}
/* Hides from IE Mac \*/
* html
div.searchresult1{height: 1%;}
div.searchresult1{display:block;}
/* End Hack */
div.searchresult1 h3{
background: #c0ddea;
margin:0;
padding:4px;
}
div.searchresult1 h4{
background: #c0ddea;
margin:0;
padding:4px;
border:1px solid black;
}
div.searchresult1 img {
margin: 10px;
float:left;
border:1px solid black;
}
Whenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting? Or designers do go wider these days? Thank you Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. 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 was trying to position what should have been a square of 5px by 5px on the screen, but ended up with a rectangle with a width of 5px but a height of what looked like at least 10px ! all margins + paddings had been set to zero, so that wasn't the reason in the end i managed to draw a square by adding : Code: max-height: 5px; overflow: hidden; to the div's style it still puzzles me though : does a <div> element have a default minimum height ? Hello all, I'm trying to find a solution for the problem hereafter : I'm building a css2 based website where all thelayout is controlled in the CSS. I have in my website a main "body" box identifier by a CSS ID. This "body" is a container for various articles. It has a background and borders. I would like this "body" box to have a minimum heigth so that even if the content (ie the article) is made of two lines, the background and the borders have this minimum size. The problem is that if i use the "heigth" attribute in my CSS id, when the content is longer for that heigth, the box is not extended, only the text, going out of the box. To summarize, i'm looking how to fix a minimum height to a DIV or any block component of a css, without limitating this block to this only height. I hope i have beel clear, if any of you have an idea for this, it would be very helpfull to me, as this is a very recurrent problem. Thanks by advance Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Hello! I'm working on a website right now and have sort of dived in further than I understand conditional CSS. The website is he www.kekoz.com I have that little menu in the upper right and the info in the lower right. I like those being fixed so when the user scrolls they are always up there. But I can't figure out how to make them stop from colliding with the main pictures when you change the height of the page. Any help would be grand! Right now they're position super simple: Code: #links{ position:fixed; top: 20px; right:20px; width:300px; }
Code: #info_box{ position:fixed; bottom: 25px; right:10px; width:550px; }
I tried to set a minimum height on them, but I think that would have to do with some sort of a container around them. Or maybe I'm just going about it all wrong. Also a couple other things I'm sort of thinking. I would like the "Scroll this way" thing to always be centered between the lower edge of the pictures and the bottom of the window. Not %100 sure how to get that set up. And the last thing I'm thinking for this page, which I'm not sure is all CSS would be to have the "scroll this way" thing actually fade based on the scroll position. I think this might be Jquery but thought I'd throw it out there to see if anyone had any advice. Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! I'm a newbie to css. I'm trying to convert tables to css and having a bit of a tough time. Latest problem - create a window or container with a one line border with minimum height, say 600px, but the height will expand as the content grows. Any help? Thank you kindly! I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc. I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em. I specified height and width on all <div>. Some used borders, some did not. An example would be: PHP Code: <div style="height:2px; width:3px; background:green" ></div> Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same. Any help appreciated. NotGoddess 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 |
|||||||