|
CSS - Mental Block- Liquid Site, Centering, Etc.
Ok, I know there must be a simple solution to this that I'm blanking on.
The website has a background image: Code:
#background {background-image: url(x.jpg);
margin-left: auto;
margin-right: auto;
width: 1024;
height: 760;
z-index: 1;}
So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so? Similar TutorialsAfter 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. Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? Hello, I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance. test site is http://mtbireland.com/hkr Code: </div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 1') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 2') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 3') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
Code: #footer {
height:200px;
padding:20 0 0 0;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
line-height:20px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
width:100%;
float:left;
background:#392E2C;
text-align:left;
}
/* Footer Widgets */
#footerwidgets {
display: block;
width:100%;
background:#392E2C;
}
#footer-left {
width: 210px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
text-align:left;
}
#footer-middle {
width: 210px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
#footer-right {
width: 210px;
float: right;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
Here is my website... in progress... xygps .com .au See my wrapper border extending up into the header at the top? I want this hidden under the header backgrounds. I have been messing around with z-index for ages with no luck... can anyone point me in the right direction?? sorry, this is probably a super newbie question but I just can't work it out!! Hi I'm having some problems with CSS and was hoping that somebody on here could help me. Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering. Second none of my images are showing, I've attempted to add a background and header image but neither are showing. I'm a little confused because the same methods work fine on my wordpress site. Here is a link to the dev site; C:\Users\Keith\Documents\Site\index.html And below is the CSS code; Code: /* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
width: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url (img/background.jpg) no-repeat bottom;
}
input, form, textarea
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
color: #999999;
}
h3 {
font-size: 13px;
border-bottom: solid 1px #DEDEDE;
padding: 4px 0;
margin-bottom: 10px;
}
a:link, a:visited {
color: #0033CC;
}
a:hover {
text-decoration: none;
}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container {
width: 1024px;
background: #ececec;
margin: 0px auto;
}
#topbar {
width: 1000px;
height: 118px;
display: block;
background: url(img/header.png);
float: left;
position: relative
}
#navbar {
width: auto;
display: block;
height: 28px;
}
#navbar a {
heigth: 28px;
line-height: 28px;
padding: 0 8px;
display: inline;
}
#main {
width: auto;
display: block;
padding: 10px 0;}
#column_left {
width: 332px;
height: 387px;
margin-right: 1px;
margin-left: 13px;
background: #000;
float: left;
}
#column_right {
width: 332px;
height: 387px;
margin-right: 1px;
background: #000;
float: left;
}
#column_right_adsense {
width: 332px;
height: 387px;
background: #000;
float: left;
}
div.spacer {
clear: both;
height: 10px;
display: block;
}
#footer {
width: 1000px;
height: 150px;
display: block;
margin: 0 13px;
padding: 10px 13px;
font-size: 11px;
color: fff;
background: #737373;
}
For IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size. That method doesn't seem to be working for Firefox, yet I have seen it done before. A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything? Again, it works fine in IE, but not in Firefox or Safari If body {text-align:center;} is not a good centering tool, I would love any other suggestions. Thanks! Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... 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. 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 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 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. 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; }
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? 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. 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. 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 I'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; } |
|||||||