|
CSS - Set Maximum Width Of Fluid Design...
Is it possible to set a maximum width that a fluid design can expand to?
I have a regisration form that needs to work from 640x480 upwards but I don't want the form to infintely get wider and wider. I would like it to cap out at 1280x1024 resolution. thanks. Similar TutorialsA random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc? I'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use. Here's the code I have so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>LAYOUT</title> </head> <body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);"> <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div> </div> </div> </body> </html> I'd love some advice, as I'm very much a hobbyist at this. P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks. Robin Hi guys, need some help for my layout. What I am trying to do is set a div to: When screen width is <1024 x 768 width should be fluid When screen width is >1024 x 768 width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs. Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%. 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 Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates. I'm trying to convert a horrendous table layout into CSS. What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo. I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing. This is my current code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
<style type="text/css">
body {margin: 0px; padding: 0; background-color:#ffffff;}
#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }
</style>
</head>
<body>
<div id="header">
<div style="width: 425px; float: left;">
<img src="logo.jpg" width="220" height="66" alt="logo">
</div>
<div style="float: right;">
<p>This is annoying</p>
</div>
</div>
<div id="nav">
</div>
</body>
</html>
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, 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 attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! 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 need a combination of this: http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! Running into some issues with a design. I have provided a link to show what is happening. at the end, with some code, css, etc The design calls for using up as much space width wise as possible, so that if the resolution gets bigger, the content in the main content section will expand. There is a left side nav, which is a fixed width, and then the main content section, which I do not know the width. both are floated left. The problem is, when the content in the main section expands to get bigger, in Firefox, will expand the size of the main section div to 100% of the screen before the text will flow to the next line, and thus, throws the div (which is floated) down to the next line. Without setting a width of the main content div, and wanting to keep the left side nav a specific width, I am not sure how to avoid this problem. I just happened check in IE7, and it seems to do what I want (I haven't checked IE6). I have posted a screenshot of what happens. On the left side, is IE7, at a bigger resolution also (1280) right side of screenshot is firefox, at a smaller resolution (1024) http://ricebox.whiteazn.com/liquid.png here is some code. Also, the CSS will seem to be declared more than once, but that is because they are split up between structure.css, text.css, and theme.css. I also only put in the CSS for the main body part. Any help would be appreciated. ======================= html4strict Code: Original - html4strict 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> <title>Control Panel: Company Name</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="scripts/p3p.xml" rel="P3Pv1" /> </head> <body> <div id="header"> <div class="logo"> <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" /> </div> <div class="nav"> <div class="parent-drill"> </div> <div class="manage-nav"> <ul id="main-nav"> <li><a href="?ebxid=221" class="inventory">Inventory</a></li> <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li> <li><a href="?ebxid=500" class="analytics">Analytics</a></li> </ul> </div> </div> <div class="details"> <div class="account-info"> Company Name <span class="rep">First Name</span> </div> <div class="account-details"> <ul id="account-nav"> <li><a href="?ebxid=725">Settings</a></li> <li><a href="?ebxid=244">Account</a></li> <li class="logout"><a href="?logout">Logout</a></li> </ul> </div> </div> </div> <div id="header-seperator"> </div> <div id="main-body"> <div class="top"></div> <div class="bot"></div> <div id="section-nav-narrow"> <div class="title-hdr"><h3>Leads</h3></div> </div> <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> CSS Code: Original - CSS Code #main-body { overflow: hidden; margin-left: 10px; position: relative; } #main-body #section-nav-narrow { float: left; width: 133px; } #main-body .title-hdr { margin: 6px 3px 0 3px; padding: 0 0 6px 9px; } #main-body #section-nav-narrow .title-hdr { width: 118px; } #main-body .top { position: absolute; top: 0; left: 0; width: 133px; height: 8px; } #main-body .bot { position: absolute; bottom: 0; left: 0; width: 133px; height: 1px; } #main-body #body-content { float: left; min-width: 860px; } #main-body { background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y; } #main-body #section-nav-narrow { } #main-body .top { background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat; } #main-body .bot { background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat; } #main-body .title-hdr { background-color: #fff; color: #1b5094; } #main-body #section-nav-narrow h3 { } #main-body .title-hdr h3 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
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 I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Dear CSS gurus, I have a problem that I have been wondering about for quite some time. I'm sure you have heard this one before, of which I apologise. The only thing I can find when searching for a solution to this is some JavaScript code. Ideally I would like to stay clear of JavaScript for this problem, as it would require script for every element within the site (a lot) which is a maintenance nightmare. Basically from the short and sweet example below, I would like div with id "test2" to expand to fill the height of the containing div, i.e. 100% - 25px. I have defined "test1" with a fixed pixel height and wish it to remain like that but have "test2" expand fully and resize whenever the browser window resizes. PHP Code: <html> <head> <style type="text/css"> .test_container { width: 100%; height: 50%; border: 1px solid red; } .test1 { width: 100%; height: 25px; background-color: grey; } .test2 { width: 100%; height: 100%; background-color: lightgrey; } </style> </head> <body> <div class="test_container"> <div class="test1"> test1 </div> <div class="test2"> test2 </div> </div> </body> </html> Any help would be much appreciated. Thanks. Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. I'm creating a blog for someone, and my issue resides in <h2>. Using Wordpress, <h2> is typically the blog entry title. As you know, blog entry titles vary, because people put in different titles for different entries. I have <h2> formatted to my friend's likings, but an issue has arisen. If a blog entry title is particularly longer than the average, <h2> breaks into another line of text. This results in corrupting the layout entirely. So my question: How do I go about formatting <h2> so that the blog entry title text fills up the entire width of <h2> without breaking into a new line? Clarification (if needed): I want the font size to be dependent upon the physical length of text in the blog title Here's my code for <h2>. It resides in two containers of sorts. Code: h2
{
float:left;
font-family:"Franklin Gothic Medium";
font-size:55px;letter-spacing:-2px;
width:728px;
padding: 0;
margin: 0;
}
This is my first post/topic. Be gentle! Thanks. I am a total newbie to CSS + DIV. I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header." I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser. Here is my CSS, so far for this portion: #header { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 10px; background: url(images/CATScreenMiddle.png); width: 100%; height: 265px; font-family: verdana, arial, helvetica, sans-serif; font-size: 25px; Thanks for any help, in advance. |
|||||||