|
CSS - Is This Best Way To Make Liquid Banner/header?
I like the way this liquid banner degrades as the browser is narrowed. Is this the preferred way to accomplish this effect? I like the way the overflow: hidden attribute causes objects to basically disappear rather than force the banner div to be taller as content shifts. If you could please pick this apart I would appreciate it before I update 500 product pages with it.
For testing purposes I have simply styled the html tags directly. When I get it right I'll make it external. Code: <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"></meta> </meta> </head> <body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="overflow: auto"> <div style="border: 1px solid gray; text-align: center; height: 72px; background: white url(site_images/share_logo_header_middle.gif) repeat-x; overflow: hidden"> <div style="float: left; margin-top: 0px"><img src="site_images/share_logo_header_left.gif" alt=""></img></div> <div style="float: right; margin-top: 0px"><img src="site_images/share_logo_header_right.gif" alt=""></img></div><h1 style = "font: 1em/1.2 Verdana, Arial, Helvetica, sans-serif; color: navy; font-size: 1em; margin-top: 0px; line-height: 40px">The finest Specialty Chemical Products Since 1971</h1> </div> <div>Content is king </div> </body> </html> See the page here. As I'm writing this thread I see that I need to clean up a few unneeded declarations in the css - please disregard. Thanks for looking, Rob Similar TutorialsI'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height? Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box? jarsandmixes.com/liquid.php body { background-color: #FFF7EF; } div { text-align:center; } div#wrapper { background-color: transparent; border:0px solid black; margin:0px auto; text-align:left; position:relative; width:100%; height:100%; min-height:100%; } div#border { background-image: url(images/bkg2.gif); background-repeat: repeat; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:10px; } div#page { background-color: #DEC6B5; border:1px dashed black; position:relative; clear:both; float:left; width:100%; height:100%; min-height:100%; padding-bottom: 10px; overflow:hidden; } div#header { background-image: url(images/.gif); background-repeat: no-repeat; border:1px dashed black; margin:0px; padding:0px; width:100%; height:80px; } div#menu { clear: both; background-color: #CA7B93; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } div#left1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; float:left; margin:5px; width:20%; height:auto; } div#left2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#content1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; margin:5px auto; width:54%; height:auto; } div#content2 { background-color: #DEC6B5; background-image: url(images/bkg3.gif); border:1px solid black; margin:0px 5px 0px 5px; padding:4px; width:96%; height:auto; } div#divider { background-image: url(images/.gif); background-repeat: no-repeat; margin:10px auto; width:439px; height:60px } div#right1 { background-image: url(images/bkg2.gif); background-repeat: repeat; float:right; border:1px solid black; margin:5px; right:10px; width:20%; height:auto; } div#right2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#footer { clear: both; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } 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 want to place a Logo and Banner in the header using CSS, i tried this but no use its not working properly. PHP Code: div#main #header{ width:100%; height:95px; text-align: center; background:url(images/top_bg.jpg); } div#header #header_title{ text-align:left; font-family: Arial, Helvetica, sans-serif; font-size:25px; color:#ffffff; padding-left:20px; padding-top:20px; } div#header #header_title #banner{ text-align:right; width:468px; height:60px; background:url(images/banner.jpg); background-repeat: no-repeat; padding-right:20px; padding-bottom:20px; } Then i used this in html PHP Code: <div id="page"> <div id="header"> <div id="header_title"> Your Logo <div id="google"></div> </div> </div> But its not working properly, please please please help me....thanks... vinodkv Hi everyone, I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes? This is the HTML I have so far: Code: <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>
<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>
</html>
Hi. How to make my header and footer stick to bottom? For the header div, I have background image and a logo (test) but the bg image does stick to the bottom to touch the menu? For the footer, it doesn't stick to the bottom of the page? Anyone can help me out? Here's the link of the test page with css inside the source code. Really appreciate if anyone can help. Thank you. yourbestproduct dot com/test.html (Sorry, I'm new user so can't put exact url) Hi, Basically, this is one of my site pages: http://www.zombiemod.com/rm/nina2/about.html I want the white box in the middle to auto expand its height so it fills the vertical height of the page. Ive tried setting its height to 100% but that doesnt seem to work. This is my CSS for the white space: Code: #frame {
position: relative;
padding: 2px 15px 20px;
/* background-color: #000;*/
color: #000000;
height: 410px;
}
Can anyone help me with this? Im not great with this stuff, so I just want the easiest way possible, whether it is javascript or css. Hello css gurus. I'm trying to fit a flash movie with 100% height in a liquid layout but i cant get rid of scroll bars. i have tied to explain the problem in this image: http://i(dot)imgur(dot)com/PhvSZ.gif (sorry new members are not allowed to post with links) in that image you can see its fine in case (1) but in case (2) when i add a header div on top, flash movie doesnt fill available space. Can anyone tell me how can i fix it with a heading div on top? Thanks. I'm getting ready to tackle a new project, it will be a hard one indeed. There will be two phases to the design. First a full css layout, I'm most likely going with a three column, header and footer layout. The left column will give the appearance it is outside the main design but it will be inside. I'll be using it to hold an events schedule on all the pages. The second phase I will do my best to attempt to integrate the layout as a WP theme so that it has all the WP back end control for a CMS but it will look nothing like a blog. I'm curious before I get started though should I go with a liquid design using % and ems measurements or a fixed width design? I know that there are advantages and disadvantages to both but which one is more widely used in website design these days I don't want it looking small on a high res monitor but I also don't want 800x600 users to be scrolling the width either. One more thing, The look I want is for the header and footer to stretch the entire width of the browser window and I know that is accomplished with liquid design but can it be with fixed width too? LB 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; }
I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. i'm trying to write a liquit layout based in layers and css and have the next code: Code:
<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>
and in the body: Code: <body> <div id='header'>header</div> <div id='menu'>menu links</div> <div id='content'>contents</div> the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window but i've seen a lot of pages that do not behave this way... what am i missing???? When I view my web pages with IE6 or resize the window the footer items fall start falling out of place. Link: website CSS Link: CSS Code Hello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? I am redesigning a web application . I want to introduce color themes in it. When i click on a particular theme i want a new look to appear including buttons. For this i m using the below css code which uses only 3 button images(single image sliced in 3)wherin only the background color is to be changed thru css and new button gets created. Code: body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
HTML code:
<div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red
For eg in a login screen The earlier web application used: <input type="image" onclick="javascript:return validate()> wherin the validate function includes Code: function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;
if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
}
I am not able to use javascript:return validate() with this new html code i.e. <div class="btn btn_addtocart"> <a href="#>Submit</a><span></span></div> <div class="clear"></div> Background Color: Red Please help me with a similar css to run the above javascript or an alternative javascript to run the above css code. Hello, To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully. What would be the best technique for liquid layouts? I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux? Any suggestions? Hi all, I'm trying to get this mock up's structure finished STAT so that I can move on to the graphical, stylistic, and textual elements that need to be done, but I'm running into issues with IE... (surprised?) The goal is to get it to render as it does in FF and Safari. The issue right now is that, while the #body div is where I want it, it is not accepting the 85px bottom margin I am trying to code. Any help? (keep in mind I had to throw it in quirks mode to get it all to render like this) SITE is at: w w w [DOT] w h o l l y l i f e [DOT] o r g [SLASH] d r u m 2 [SLASH] Thanks, Michael Now that I've decided to use CSS and divs to hold my content, how do I make my page expand if a reader enlargens font size through his or her browser (especially if they use Firefox which can keep enlargening the font many sizes)? After enlargening the font size two steps in FF, the text expands so much it covers up other text in other divs, hides to the left and right, etc. Is liquid design what I want? Is liquid design what keeps divs expanding to accommodate enlargened font size? If so, where can I best learn liquid design online? Hey guys, how are you? So, I got two questions. Right now, on my main pages I have a fixed height, and wondering the best way to change it to a liquid one, so no matter how long the page is, I get a white background that's consistent with my 'main' <div>. And the second one, is how do I get a second background image on the body? I'm probably going to use almost almost a mirror type gradient of the top gradient, but not sure how to add it. You can view the two problems here http://thecheckoutplace.com/ home page). Thanks for your time, cheers. This post can be deleted. I figured out the problem. |
|||||||