|
CSS - Best Practice For Layout
Hi Everyone,
I'm currently building a site for a client that has a 3 column layout and horizontal footer at the bottom of the page. The client has requested the navigation column (which is running down as the far left column, (I have attached an image for clarification) has a background-color that runs down the full length of the page, from the top of the browser window until it meets the footer at the bottom of the page. The footer needs to do the same, but expand horizontally so it stretches from the left of the browser window to the right. Additionally, if the user is on a larger screen size that creates more vertical space at the bottom of the browser window, the background-color of the footer needs to stretch down to meet the bottom of the browser window. Currently, the website is set up so the 3 columns (including the navigation) is housed in a div tag with relative positioning, auto margins for centering and 960px width. The site is currently in offline development so I unfortunately won't be able to share it with you at this stage. However, please see the attached image for clarification. What I'm after is opinions on a best practice to achieve this. I have tried setting the navigation height to 100% and footer width to 100%, however it's producing undesirable results. Any help would be greatly appreciated! Please let me know if you would like further descriptions. The image can be found he www . harrycourt . com /temp-images/layoutimage01.png Edit: I forgot to mention an important point. I would prefer if this can be achieved while keeping the height of the main wrap container as auto, as opposed to a pixel value. Thanks, Harry Similar TutorialsWhat do you guys think....just a template I made for practice http://csstest.dmsbdesign.com/templates/templates%201/ heres the color scheme I used too incase you guys have any suggestions http://colorschemedesigner.com/export/ Hi team, Ok, so I'm biting the web2.0* buzzword bullet, and decided I want a tag cloud & I'm wondering what's the best (standards compliant, portable, etc ) way to handle this in css? The main issue I'm having is how to handle the random positioning of the tags in the cloud? Any ideas on the semantics of these tags - are disconnected href's ok, or should I be wrapping them in p's or something? Another question - is there a more elegant way of handling different sizes without having one style for each size? Cheers all, Simon (* ) Is it more common practice to place all div's within one div as seen he Or to have all div's independent, as shown he Hi I wanted to see what some of you folks do with web files as a "best practice" for testing. I try to be as economical as possible with my css, but sometimes it seems like i have way too many styles going. Anyway, I usually go to the W3C validator and test my files here first. (especially if i am doing standards strict) http://validator.w3.org/ Then I usually run it through HTML tidy to make sure i haven't made any mistakes. Does anyone have any better ideas for checking to be sure you are doing things the best way? Or a better web production file release protocol? Thanks in advance! Shana I saw the use of multiple classes in one "class" attribute at a contract I was on, I wanted to know how DevShed people felt about this practice. Basic Example: css Code: Original - css Code .redFont { color: red; } .blackBack { background-color: black; }
.redFont {
html Code: Original - html Code <pre class="redFont blackBack">test</pre> <pre class="redFont blackBack">test</pre> Seems to work with javascript in Firefox and IE, anyway.. javascript Code: Original - javascript Code element.className = 'redFont blackBack'; element.className = 'redFont blackBack'; I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan I've seen where the "primary" font and size are set in the body tag, and in various sub-tags, the size and other characteristics such as line height and color are then set. As to size, in the case I describe, I've seen it expressed as a percentage. Is this how it's done, "best practice"? I've seen it on a number of high-profile sites, specifically the NYT site. Example: Code:
body {
font-family: Georgia, Times, serif;
font-size: 12pt;
}
#main {
font-size: 80%;
color: #330;
line-height: 1.5em;
}
I'm just pondering over the performance differences between having a flexible css sheet which requires the html to call several classes for the desired effect, against having each element specifically styled and therefore having code repetition... ie; CSS: Code: .emphasise{
color:#ed5200;
}
.txt_bold{
font-weight:bold;
}
.txt_big{
font-size:2em;
}
HTML: Code: <div class="emphasise txt_bold txt_big">Hi there!</div> <div class="txt_big">I'm not as bold</div> ----- or this method ----- CSS: Code: .title{
color:#ed5200;
font-size:2em;
font-weight:bold;
}
.sub-heading{
font-size:2em;
}
HTML: Code: <div class="title">Hi there!</div> <div class="sub-heading">I'm not as bold</div> Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so. Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas. I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about. I'm anxious to hear whether this can be acheived or not. Thanks! -B heyya, I'm doing a quick layout, and I'm running into some problems with my floating menu. 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">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:white;
font:normal 1em/150% Verdana,Arial,sans-serif;
}
#container {
width:750px;
padding:0;
margin:0;
background:#FAA;
}
#contents {
width:566px;
margin:10px 0 0 162px;
border:1px solid #999;
border-bottom:none;
padding:10px;
background:#FFF;
}
#contents p {font-size:80%;line-height:150%;}
#menu {
width:160px;
background:#FFA;
margin:0;
padding:0;
float:left;
}
img {border:none}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
<div id="contents">
<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
<h3>Welcome to mook</h3>
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
</div>
</body>
</html>
readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case. So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode. TIA, Greg Hi, The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox. Can anyone suggest how I can fix this? Daniel Hi, Happy New Year This is a continuation of a thread begun in the javascript forum. I'm continuing it here because I think I've solved/avoided some of the javascript aspects of the problem by tackling the design in a slightly different way. I'm struggling with what should be the simplest part of this problem, which is to make the li elements arrange themselves like the attached image rather than the way they presently appear on my site. Furthermore, ideally, I'd like it all to work with the smoothness of Isotope or Quicksand, but maybe that's a problem for another day... As always, any and all help gratefully appreciated! (Also, I'm baffled as to why the thumbnails show up fine on my home PC, but not at all on my work one !?!? Oh, now it's working - this is too bizarre!?!?) Hi I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div. I would like some help if poss on how to put this design into divs before I plough staright in!! Thanks for any help or advice! I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s. Here is what I want in English: 1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page. 2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as 3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom. I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file. Here is my horribly borked attempt at using nested <div>s: Code:
<html><head><title>CSS Hell</title>
<style TYPE="text/css">
<!--
body {
margin: 9px;
margin-bot: 0px;
background: #FFF;
}
#level0 {
background: white;
}
#masthead {
background: blue;
height: 60px;
}
#level1 {
background: #DDD;
border: solid;
}
#menu {
background: #BBB;
width: 150px;
}
#level2 {
background: white;
float: right;
border: dashed;
}
#promo {
background: blue;
float: right;
}
#main {
background: #CCC;
}
-->
</style>
</head>
<body>
<div id=level0>
level 0
<div id=masthead>
branding
</div>
<div id=level1>
<div id=menu>
LEFT SIDEPANE<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
</div>
level 1
<div id=level2>
level 2
<div id=main>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
</div>
<div id=promo>
RIGHT SIDEPANE<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
</div>
</div>
</div>
</div>
</body>
</html>
Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!? I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom. I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done? FYI, the site is currently at http://users.adelphia.net/~mmorasch/ The site I'm working on is located at the following address: http://www.solinari.net/div.php On the left, the navigation is in two pieces - a left and a right piece. I need to have both pieces extend to the bottom of however long the page is. The bottom div's of both pieces of the navigation each have an image repeating vertically, my question is how to get the div to extend to the bottom of the page. Any help would be greatly appreciated. Regards, Solinari |
|||||||