|
CSS - Please Help Test A Layout I'm Working On
In it I meld Tonico Strasser's brilliant "Flexible Layout" (http://www.webproducer.at/flexible-layout ) with Stu Nicholls' mega-cool "How to Use CSS to Solve min-width Problems in Internet Explorer" (http://www.webreference.com/programming/min-width/ ).
From a geek perspective this is a pretty cool layout: fully flexible source ordered pure CSS three (or two or one) full column layout with headers and footers and no javascript. It should look pretty much the same on any modern browser and should scale up and down smoothly as the font sizes are changed by the user. I'm curious how it works on real world browsers. Does it jerk or flicker as it is loaded or the browser window is resized? Does it scale up and down smoothly as you change the font size? Are the contents of the side columns always visible as you play with the browser window and font size? Do the side columns maintain their size and the center column shrink as the browser window shrinks until a minimum center column size is reached? Does it do anything funky? I've already found some minor funkiness on older versions of modern browsers running on Macs, but nothing awful, and the funkiness is due to browser bugs about which I can't do anything (data table captions, for example, don't seem to be understood well by Opera 6 for Macs . . . but then this is a data table caption issue, not a layout issue . . .). How does this layout work for you? In addition to the feedback, let me know the browser and platform you are using (eg., Firefox 1.0.6 on Windows XP). I'm particularly interested in feedback from folks testing it over a modem. Thanks! Here's the link to my test page: http://www.econinformation.com/layout_test.htm -- RS Similar TutorialsHi Folks, I'm trying to merge my template into my asp.net storefront css file and somewhere there seems to be a conflict. the result I'm going for is a centered page that slides over the background if the page is resized. In Firefox I get what I want. In IE my content wrapper seems to be tacked to the upper left corner of the screen. There are a lot of styles in the sheet I'm trying to modify, but I can't id which one(s) are causing my problem. I made a template page that works as I'd like that is here eliteportraits.com/teetest/template.htm the page that doesn't seem to produce what I want is pinkgolftees.com/default.aspx?skinid=9 any ideas on where to start? also, with the merge, everything seems to validate except the moz-overflow line...is that a real problem? I don't know if it's really needed by the storefront or not. thanks a bunch Mark cannot get my css layout to work on my php page, it works fine if I change to a HTML extension on my file. Is there is difference in how we code when working with php?? Or can someone see what I am doing wrong? Just using a simple layout My css code: Code: /* ----------container to center the layout-------------- */
#wrapper{width:1200px; background-color: #cfc;}
#header {width:1200px; background-color: #ccc; border: 1px solid #ccc; height: 100px;}
#leftcolumn{border: 1px solid #ccc; width:800px; background-color: #cff; float: left;}
#rightcolumn{float:right; width:400px;}
#footer {width:1200px; background-color: #ccc; border: 1px solid #ccc; height: 10px;}
#form {float:left; width:800px; background-color: #fcc;}
#nav2 {float:left; width:800px;}/
php/html code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="admin.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="print" type="text/css" href="../print.css" />
<title>The Art Database - Admin Console</title>
</head>
<body>
<?php
include("../library/login.php");
login();
?>
<div id='container'>
<div id='header'><h3>The Backend</h3></div>
<div id='wrapper'>
<div id='leftcolumn'>
<div id='nav'>Navigation</div>
<div id='form'>Left Form Pink</div>
</div>
<div id='rightcolumn'>Right</div>
</div>
<div align="center">Footer</div>
</div>
</body></html>
I have also tried to enclose it in php tags Code:
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="admin.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="print" type="text/css" href="../print.css" />
<title>The Art Database - Admin Console</title>
</head>
<body>
<?php
echo "<div id='wrapper'>";
echo "<div id='header'>This is the Header</div>";
echo "<div id='leftcolumn'>Left</div>";
echo "<div id='rightcolumn'>Right</div>";
echo "</div>";
echo "<div id='footer'>footer</div>";
?>
</body></html>
Any ideas why it doesn't work? I'm working on tidying up my wiki's Main Page. You can see the progress here; it seems to work fine in FireFox, but in IE the yellow div gets pushed below the two green div's floated to the right of the page. If you don't have firefox, then the top of the yellow div should line up with the top of the green div. The source is too big to post here, just view it from the page I llinked to... Any idea why this is happening? Thanks for your time, -Ross [edit] Nevermind, sorted it Hi there, I am trying to use a 3 column css layout. It works fine in IE7, but the divs just appear under each other in FF. This is my css: PHP Code: #1_left { float:left; width:250px; background-color: #f6f6f6; } #1_right { float:right; width:250px; margin:0; padding:0; background-color: #f6f6f6; } #1_middle { margin:0 250px; background-color: #f6f6f6; } and this is my HTML: PHP Code: <div id="1_left">text</div> <div id="1_right">text</div> <div id="1_middle">text</div> Any ideas? Hi, I am trying to code a new verwsion of my site which has a style sheet switcher. The main page includes a home file (by php) and the home file is just divs. I want the thin column on the left for one style and on the right for the other. The layouts are now messed up . Page is here The two css files are here and here . I'd appreciate any help in sorting this out. Also there are gaps at the end of the navbar, I don't know why!! Thanks Bye Hi. I'm making a slightly unusual layout at the moment, and I could do with some help. I've seen it done before, but I don't know how they did it and cant find the site any more. Its probably easier for me to explain this is pictures: Wide Screen: Smaller Screen. Note that the last column as flowed onto the next row since there isn't enough space (this is perfect): However, it doesn't fill up the available space. This is an example image I photoshopped to show how I want it. Notice how the block on the bottom row fills the wasted space: This is a link to my site so you can try it out for yourself if you are interested: http://www.zombiemod.com/blog/?cat=1 The source is all there too, but I can post that here if it helps. How can I achieve this? Is it something to do with the overflow function? Thanks for any help you can give! James Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<p>more content</p>
<p> </p>
<p>and even more</p>
<p> </p>
<p> </p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>
I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol. Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc. thepennydreadful.com That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either. I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'( PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright.... Code: /*
Theme Name: The Penny Dreadful
Theme URI: http://www.thepennydreadful.com
Description: The layout for the gothic and lolita blog "The Penny Dreadful."
Version: 1.0
Author: Kate Bartlett
Author URI: http://nozomiwhitewolf.livejournal.com/
*/
body{
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align:left;
vertical-align: top;
/* background-color: #29001E; */
}
div#content{
padding:180px;
width: 400px;
float:left;
}
/*Header, Container, Footer*/
div#header{
background-image: url('Top.png');
background-repeat:no-repeat;
height: 519px;
}
div#container{
background-image: url('Middle.png');
background-repeat: repeat;
margin-right: 639px;
height: 476px;
text-align: left;
padding: 1px;
}
div#footer{
background-image: url('Bottom.png');
background-repeat:no-repeat;
clear:both;
float: left;
width: 1050px;
text-align: left;
padding: 160px;
height: 360px;
}
/*
End of file.
*/
I am curious how people go about testing their CSS code in all browsers? I am a mac user and don't have a PC sitting next to me. I am using browsershots.org .... but its awfully slow (I even paid for priority processing) Just curious how everyone checks their CSS code on a Mac? Because IE is the big problem causer.... Hi there. Please have a look here. Could you please report any prob you come into and the browser you're on? Check out the layout section. Thank you in advance :) I have a caption text in a span tag appear on an image rollover. I'm trying to make the caption text selectable and having a terrible time. Can anyone point me in the right direction? Thanks! Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
div#img a span {display: none;}
div#img a:hover span{display: block;
position:fixed; top: 300px; left: 350px; width: 125px;
padding: 5px; margin: 10px;
color: #AAA; background: black;
opacity: .5;
font: 10px Verdana, sans-serif; text-align: left;
}
-->
</style></head>
<body>
<div id="img"><a href="#"><img src="http://i43.tinypic.com/2irct0.jpg" width="500" height="392" border="0"/><span>here is the caption text!</span></a></div>
</body>
</html>
I've uploaded a test page re how do I get a content div to scroll under [apologies for new thread]. It renders fine in Camino-Shiira, Safari, iCab, Firefox, IE Mac 5.2x, but not too good on Opera 8.52 Mac [fuhgeddabout Netscape 4x]. 1) Can someone provide some feedback on how it renders in Windows IE/FF? 2) Is the CSS a reasonable structure to convert the other pages of my site to? The template would be a fixed sidebar, fixed clock header (different-pages different-heights) and relatively positioned content. Two of the javascript clocks and the table are running ahead of time in debug mode. The test page is [obsolete link deleted]; clicking w3c css validator at bottom shows .css file. Issues in Opera-Mac indicate all is not well: a) table is one to two pixels wider (cut-off by overflow: hidden) b) scrolling table div eventually "catches" and drags fixed header when it scrolls. c) anchor "top" doesn't work from the bottom link. This works on Opera while still working on IE and Firefox. Does it work on Konqueror?
html4strict Code: Original - html4strict Code <style type="text/css"> wbr { display: inline-block; width: 0; overflow: hidden; } .test { width: 150px; } </style> <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div> <style type="text/css"> Since it's in the news since a few days that the upcoming Internet Explorer 7 will not be passing the Acid Test meant to demonstrate browser support or lack thereof for CSS2, I thought I'd humor everyone and post results from a quick experiment on how the four main browsers on Windows platfrom performed. In order of success, reference image first: Click here to view screenshots in full size Note the "ERROR" texts in Opera and IE. Ironically, despite The Opera Challenge to Microsoft in the Acid2 ring, Opera performs sub-standard itself. How do i change img button to 3d on hover or mouseover using css. Please advise. thanks ASP css database List menu. Tested in IE6, IE7 and Firefox OK. Check it out and respond to my blog if problems. Has single click editing of menu items, iframe masks over objects, SQL server and access databases supplied and ready to test. css List database Menu version 1.0.0 : being a new forum user I cannot add url links, so copy and paste blog address below rwstewart.blogspot.com 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? |
|||||||