|
CSS - Much Benefit To Em Based Layout?
i'm considering moving my site to an em based layout but all the info i can find on the topic is a year or two old. this is fine for accomplishing the task but i'm curious what the current benefits are. it seems than most browsers have moved toward page zooming rather than just text zooming.
thoughts? Similar TutorialsAlright, so I took advice I was receiving and made a tableless template for a site. Now I have one problem - my two columns are <div> tags, floated to the left and right. At the bottom of the page, however, I need to align the ends of the column horizontally - without using 'height' attributes that I'd have to change upon updating or changing any page. The site files are attached. I basically need a way to end each column at the same line. Changing the entore layout of the page is not an option because I do not have the time to re-configure everything - the solution does not need to be absolutely perfect as far as CSS validation goes, but it needs to be cross-browser compatible. Thanks in advance - you guys are always excellent with my questions no matter what I ask. I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 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. 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? Hi All, I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages. There are three main issues: 1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE) 2. The links for the nav buttons are not rendering 3. The rollover states for the nav buttons are not rendering Here's the relevant code as it's presently constituted: Code: CSS .twoColLiqLtHdr #mainContent {
margin: 5px 20px 0 291px;
background-image: url(../assets/structure/main_background.png);
width: 638px;
height: 622px;
background-repeat: no-repeat;
position: relative;
}
#mainContent #navMenu {
width: 636px;
height: 60px;
background-image: url(../assets/navigation/navigation_buttons.png);
background-repeat: no-repeat;
}
#mainContent #navMenu ul {
margin: 0;
padding: 0;
float: left;
}
#mainContent #navMenu li {
float: left;
}
#mainContent #navMenu li a {
display: block;
}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
background-position: 0 0;
}
#mainContent #navMenu li#faq a:link {
background-position: -167px 0;
}
#mainContent #navMenu li#about a:link {
background-position: -272px 0;
}
#mainContent #navMenu li#contact a:link {
background-position: -422px 0;
}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
background-position: 0 -60px;
}
#mainContent #navMenu li#faq a:hover {
background-position: -167px -60px;
}
#mainContent #navMenu li#about a:hover {
background-position: -272px -60px;
}
#mainContent #navMenu li#contact a:hover {
background-position: -422px -60px;
}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
background-position: 0 -120px;
}
#mainContent #navMenu li#faq a:active {
background-position: -167px -120px;
}
#mainContent #navMenu li#about a:active {
background-position: -272px -120px;
}
#mainContent #navMenu li#contact a:active {
background-position: -422px -120px;
}
Code: XHTML <div id="mainContent">
<div id="navMenu">
<ul>
<li id="services"><a href="services.html"></a></li>
<li id="faq"><a href="faq.html"></a></li>
<li id="about"><a href="about_us.html"></a></li>
<li id="contact"><a href="contact_us.html"></a></li>
</ul>
</div>
</div>
I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that). Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one. Sam Hello! I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button. The menu is CSS based, and uses ul and li tags. Here is the CSS Code: Code: @charset "ISO-8859-1";
#nav {
list-style: none;
margin: 0;
padding: 0;
}
/* This keeps the menu from interfering with the main content. */
#nav + *{
clear: left;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
z-index:99;
position:relative;
overflow:visible;
display:inline;
}
#nav > li ul {
text-align: center;
display:inline;
list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
position: relative;
background: #E7E7E7;
/* background: url(trans/white80.png);*/
color: #00F;
border: solid 1px #AAA;
height: auto;
width: 6.5em;
max-width: 6.5em;
overflow: hidden;
font-weight: normal;
}
#nav ul ul {
width: 8em;
}
#nav > li {
margin: 0;
float: left;
text-align: center;
height: 3em;
overflow:hidden;
}
#nav a {
text-decoration: none;
padding: 0 0.5em;
line-height: 1.2em;
background: transparent;
color: inherit;
overflow: hidden;
}
#nav li li a {
line-height: normal;
/* TEST: Is This Better?
/* padding: 0.25em 0.5em; */
}
/* #nav ul, #nav li, #nav a{
* display: block;
}
#nav ul{
visibility: hidden;
}
/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
position:absolute;
top: 0;
left: 95%;
visibility: hidden;
}
/* Shadow! */
#nav li:hover {
/* border-style: outset;*/
/* background: #D7D7D7;*/
background: #1AD;
color: white;
}
#nav > li ul {
/* background: #666;*/
background: transparent url("trans/black40.png");
}
#nav > li > ul {
margin: -1px; /* This is to make the width equal to parent li width. */
position: relative;
top: 4px;
left: 4px;
}
#nav > li ul li {
position: relative;
top: -4px;
left: -4px;
}
/* end shadow */
/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
margin: -0.2em;
padding: 0.2em;
z-index: 2; /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
margin: -0.2em;
padding: 0.2em 0.7em;
}
/* end enlarger */
/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
visibility: hidden;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
visibility: visible;
}
.skipnav {
display: none;
}
#nonav {
display: block;
background: transparent;
height: 1px;
border: 0;
margin: 0 0 -1px 0;
padding: 0;
}
Here is the other file: Code: <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/style/MainMenu.css"> <title>Main Menu</title> </head> <ul id="nav"> <li><a href="index.php">Nova Health Center Home</a></li> <li><a href="drtoufigh.php">About Our Doctor</a></li> <li><a href="approach.php">About Our Approach</a></li> <li><a href="clients.php">Client Testimonials</a></li> <li><a href="nutrition.php">Nutrition Information</a></li> <li><a href="faq.php">Questions And Answers</a></li> <li><a href="directions.php">Directions & Office Hours</a></li> </ul> </html> Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here. I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF. Thanks in advance for any assistance you can provide! Regards, Riley F. Marquis III I'm attempting a page layout that contains a scrolling div for the main content (overflow: auto. I want this div to be placed a fixed position from the top of the browser window but to expand vertically to fill up the rest of the window space. I can get something working in IE6 using an MS expression for the height of the DIV Example 1 But obviously this doesn't work on Firefox. I tried a different method to avoid the expression. Example 2 This one is odd, in that at first site it doesn't look as though it works in IE6... BUT if you re-size the window (even slightly) it then appears how I would expect. However this version still doesn't give a scrolling div in Firefox, it seems the height of 100% given to the div #bottomHalf is over ridden. Is there actually a way I can achieve what I'm after that will work across the latest browsers? (I'm not worried about IE5, NN4 etc). I have delved into building websites using CSs instead of tables. It looks great in IE 7 and above and Firefox, but in IE 6 it is out of whack badly. Like all the divs are on one side, when all the measurements are correct and should fit. Is there something I am doing wrong, it looks right even when I look at it in Dreamweaver. Is there a special method you should always apply when building a CSS website, like always add border:none; on all divs, just the same way, that you always have to add border: 0; on all images otherwise a border will appear? Good morning. I'm in the procces of changing my old table based site to css/ divs layout. Instead of using a "position: absolute" setup, I was trying to get the page to fit dynamicaly with different screen resolution (I placed the initial divs with "left: 20%;" and "right:20%;" which seems to work fine in FF, but fails completely in IE). So, in the end I had to resort to fixed positions and sizes... not what I wanted... but it'll do in the meantime (Until I find the propper tutorials to get this done). Meantime, I have a problem with two small divs I'm trying to place at the center and bottom of the page. They do display at the right position with FF, but are placed on the left with IE. text-align: center doesn't seem to do the trick... and since the "align" tag is going to be deprecated... I don't want to use it. How do I set these to be placed in the bottom/center? The page: http://www.onpoi.net/ah/ (Note that only the index.php has been redone, the rest is still with the old table layout). Thanks in advance I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav. Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16 If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16 In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from a list apart. Here are the things I'm struggling with: 1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left. 2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area. The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list) Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless. Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute. Thanks! I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case... With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach. Thanks. Hey everyone. I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu. The menu is text based, vertically stacked and has two main criteria: 1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options. 2. When the above occurs, the text of the Work menu changes to a specific colour. Eg: Work - HIMALAYAS | LIONS EDITORIAL About Links Blog At the moment I am using the following code to show and hide: <a href="#"onmouseover="showhide('script'); return(false); ">WORK</a> <div style="display: none;" id="script"> <a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a> </div> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> Can anyone help me out? Ray. IE seems to have a lot of trouble with percentage based heights. In certain circumstances they seem to be okay, other times they seem be completely ignored. Pixel based DIV heights seem to work, but I don't know if it is just the circumstance or what not. Does anyone know what the actual "rules" are about this as it applies to IE? I can't see it working (and in practice it hasn't). Surely the background position needs to be fixed as the image is not scalable. I hope I am right on this or it's back to the drawing board. If you take a look at the following site... http://www.impulsive-solutions.co.uk/test/test.htm In the central column you will see a grey border. On the left of that border there is a gap between the left border and the connecting top and bottom bits. Why is this happening? and secondly why is it only happening on the left hand side. Furthermore, in firefox it works fine, there is no gap. Andy Colleagues, I seem to be having an issue on a page I am developing, where I am using CSS to position many of my elements. I have a banner at the top, and then have used absolute positioning of a couple of flash movies, a graphic and a javascript menu. I have used Xara Webstyle for creating the JS-based Menu. The problem I am experiencing, is that these are positioned in the order I mentioned, from the top to the middle of the page. I also then have some CSS positioned items below the menu. This menu is a tiered, or flyout menu of sorts, and when it drops down is should overlap the absolutely positioned items in the bottom of the page, but those items are overlapping the menu, I assume, because they are absolutely positioned. What I would like is to make the bottom items "go to the background" so to speak, so the javascripted menus writes over them. Is there some setting I am missing that would allow these bottom elements to be in background, so to speak, so that the menu drops will be on top?? Thanks for your help, in advance. Kork |
|||||||