|
CSS - Approach To Ensure Website Remains Consitent??
I have a programmer who developed a CMS website using Javascript, PHP and CSS.
He is having alot of trouble getting the website to remain consistent within all the pages of the website. There is a misalignment going from page to page. It also tends to look inconsistent when comparing it with other browsers. What are the common methods to keep the website consistent. I have told him to use a Reset sheet, do you think this will work??? What are the common pitfalls or approaches a person should do to create a consistent website? eg. reset sheet?? Approach to coding? Not using certain type of coding?? Anyone have an approach or method that ensured them their websites were consistent and had no alignment issues? I read one was to avoid positioning coding. Any help appreciated!! Similar TutorialsIf I have <div class="menu"> <table> <tr> <td>Home page</td> </tr> and in my style sheet td.menu { color:red; } then too bad for me. I have to put class=menu in every <td> tag. There must be a better way. How do you guys approach rendering bugs do you try apply hack, separate style sheets for each browser or do you try to change around the css so it displays the same on all browsers. I seem to be finding niggly things and differences between ie6 and Firefox all the time quite frankly it make;s me wanna go For instance today I found out about the hasLayout bug, where the top margin was not showing in ie6. Messing around with margin and padding I manged to fix it by using padding instead of margin. But sometimes on a off day I will mess around with positioning. What is the recommend solution to prevent and solve such issues, Any Advice much appreciated Hello, I building a page with a form. Tables would be super easy, but my client expects web 2.0 Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC) Here's my CSS: Code: .last_name
{
margin-right:230px;
}
.first_name
{
margin-right:220px;
}
Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left. The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated. thanks -S Hi there. I am sick and tired of constantly working my fingers like slaves by writing <tr><td> etc all the time. I have decided to try out the tableless method of web design. So I began my quest only to trip up on the first hurdle. I wanted to create a <div> element which sits in the middle of my page, and to have paragraphs and images to the right, and perhaps a menu to the left of the div element. First off, the paragraphing to the right isn't working. I am clearly very talented. Anyway, here's my code: Code:
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
body {
margin: 10% 10% 10% 10%
}
.main {
padding:20px;
background-color:#ffffff;
border:solid 1px #333333
}
.inside {
float: right;
width:500px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="inside">
<P>
This is messed up.
</P>
</div>
</div>
</body>
</html>
So what's going wrong? Cheers I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar. 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>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="/dotastats">DoTA</a></li>
<li><a href="/phpmyadmin">phpMyAdmin</a></li>
<li><a href="upload.php">Uploads</a></li>
</ul>
<div id="content">
<table>
<thead>
<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<?php
require("functions.php");
updateFiles();
$page = $_GET['page'];
$sort = $_GET['sort'];
if($sort == "")
{
$sort = "ext";
}
$files = getFiles($sort);
$i = 0;
$colours = array('even', 'odd');
foreach($files as $v)
{
if($i >= ($page * 20) && $i < (($page * 20)+20))
{
echo
'<tr class="'.$colours[$i % 2].'">
<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
<td>'.$files[$i][1].'</td>
</tr>';
}
$i++;
}
?>
</tbody>
</table>
<?php
echo "<br/>";
$pageCount = $i / 20;
for($i = 0; $i <= $pageCount; $i++)
{
echo " [";
echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
echo "] ";
}
?>
</div>
</body>
</html>
Edit: Code: html, body {
margin: 0;
padding: 0;
}
a:link {text-decoration:none}
a:hover {text-decoration:underline}
#nav {
background: #9966CC;
height: 30px;
border: 1px dotted #000000;
margin:0;
padding:0;
text-align: center;
}
#nav li {
display:inline;
padding:0 10px;
margin:0;
font-size: 14;
}
#header {
background: black;
height: 100px;
}
#footer {
background: black;
height: 100px;
}
#content {
width: 800px;
margin: auto;
padding: 10px;
}
#upload {
text-align: center;
}
table {
font-size: 14;
}
table thead tr {
background-color: #6699FF;
font-weight: bold;
}
table tbody td {
width: 400px;
}
table tbody tr.even {
background-color: #B0C4DE;
}
table tbody tr.odd {
background-color: #CAE1FF;
}
table tbody tr:hover {
background-color: #9999FF;
}
runenation.com (By know means is this a advertisement, I'm not even ready for members yet!) I want that skin to expand the whole page. The skin is only random, I will edit the pictures and stuff later. Quote: body { background-color: #B0B0B0; text-align: center; margin-top: 50px; } #topline { background-color: #29363E; height: 9px; } #logocell { background-color: #FFFFFF; width: 174px; height: 134px; } #maintable { width: 770px; text-align: left; } #menu { background-color: #29363E; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; vertical-align: top; text-align: left; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 20px; } #menu a { font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; font-size: 10pt; text-decoration: none; line-height: 1.4em; } #menu a:hover { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 10pt; text-decoration: none; line-height: 1.4em; } /*================================================================================ >> Main Menu Links ================================================================================*/ td.vmenu_main_off { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } td.vmenu_main_on { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } div.vmenu_main_off { width: 100%; font-size: 13px; font-weight: normal; } div.vmenu_main_on { width: 100%; font-size: 13px; font-weight: bold; } /*================================================================================ >> Main Menu Links END ================================================================================*/ /*================================================================================ /* Sub Menu Links ================================================================================*/ td.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } td.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } div.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: normal; } div.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: bold; } /*================================================================================ /* Sub Menu Links END ================================================================================*/ #maincontent-index { background-color: #FFFFFF; width: 365px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #maincontent-index2 { background-color: #FFFFFF; width: 560px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index2 h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index2 p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #footer { background-color: #29363E; height: 20px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; text-decoration: none; font-size: 8pt; text-align: right; padding-right: 10px; padding-top: 4px; } #rightcontent { background-color: #FFFFFF; width: 196px; vertical-align: top; padding-top: 20px; padding-bottom: 10px; } #promo { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo2 { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo h1 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #D0440F; text-decoration: none; margin-bottom: 2px; } #promo p { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000; text-decoration: none; font-weight: normal; margin-top: 0px; } Someone recently recommended that I redo my website in all CSS. I started, but I can't do it for the life of me, I just don't know enough. If you want to see what I have so far, the page that I doing with all CSS is located here. The css file is here. I'm sorry if this seems like a big thing to ask in the forums. Any help is appreciated. Hi, I just registered with this forum because I cannot seem to solve a problem. I'm not a web developer or aspire to become one, I'm a photographer and I've decided to update my website using CSS (I've been reading here and there to learn about it). It's taking me a lot longer than I thought but I'm not willing to give up yet. I've uploaded to my server (where I have my current site) three pages not linked yet that will be part of the new website. http://www.barbarabadettipalumbo.com/ratesindexnew.html http://www.barbarabadettipalumbo.com/childrengallery/childrenportraitindexnew.html http://www.barbarabadettipalumbo.com/aboutindexnew.html I've placed the navigation in the footer and in the :aboutindexnew" page the footer doesn't stay at the bottom of the page as in the previous two pages but appears in the container. I tried clearing the footer and other things but cannot figure it out how to do it. I would also like to know how two reduce the space between the two columns of text and how to move the photo closer to the text. Any help or other advice will be appreciated as I've already spent way too many hours on this. Thanks for reading. Barbara Hey, I need someone to look at my website html/css and fix a few errors for me. I'm unable to fix them. I'll pay you! Its a quick fix I think and should not take too long. Kris Hello, I am having a problem with the aligning of m website. Whenever I view my website in a normal size window everything looks fine and in it's place. However when I full screen my browser window everything stays to the left, and my background repeats, nothing moves with the browser window. My question is how do I have everything on my webpage automatically adjust to the browser window? Thanks! hi there mail.diskbank.com.au:8080/rmbclient/ywam just wanted to find out the issue here associated wih my webpage on ie7. ive looked at the css and tinkled for hours but i cant explain why my website content has moved to the left by about 140px on ie7, whereas on every other browser, its OK. any help appreciated. thanks Hi all, Let me know of what you think my new website. It is a database/html/css website. http://www.tambourinewebdesign.com/ How will Google like it? Many thanks, Stephen O'Brien PS Don't be too harsh, we're students! Hi guys, so my css website is centered in safari and mozilla, but not IE can anybody help me please? I have tried and tried all sorts of trouble shooting but just cant see where I've gone wrong If anyone can highlight what I need to change and tell me how to change it would be brilliant! thanks in advance HERE IS MY CSS FILE Code: @charset "utf-8";
/* CSS Document */
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container
{
margin: 0 auto; width:850px;
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
}
#header
{
height:73px;
width:850px;
margin:auto;
}
#logo
{
margin-left:30px;
margin-top:15px;
position:absolute;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}
#toplinks
{
margin-left:245px;
position:absolute;
width:590px;
color:#33ff99;
}
#toplinks ul
{
list-style-type:none;
margin-top:55px;
}
#toplinks li
{
display:inline;
}
#toplinks a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#ff33ff;
text-decoration:none;
padding-left:12px;
padding-right:12px;
}
#toplinks a:hover
{
background-image:url(../images/linksbg.jpg);
background-repeat:no-repeat;
background-position:center;
color:#000000;
text-decoration:none;
padding-left:12px;
padding-right:12px;
padding-top:10px;
}
#bodypart
{
width:814px;
margin:auto;
padding-top:15px;
}
#bodypart2
{
width:850px;
margin:auto;
padding-top:40px;
}
gallery img{
border:none;
margin: 0px 4px 4px 0px
}
#footer
{
width:850px;
margin:auto;
height:60px;
line-height:20px;
}
.footerlinks
{
color:#9933ff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
.blackboldtext
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
Hi I am rather novice at CSS and what it can do but thought I would see if anyone can offer any feedback. I have been asked to resize the following website: http://www.Ihaveone.org Currently it takes up a third of the window and it is requested to take up the whole window. Is there an easy way to do this? I have downloaded all the files to Adobe GoLive, but am unclear if or how this can be done without redesigning the entire site. Please, any help is greatly appreciated! bufhal I am porting over a Nucleus CMS skin to WordPress and I am about 90% done with the port... http://www.jamesmeister.com/mom/ as you can see, the ID #wrapper is not being let by the sidebar and is causing major headaches. it is supposed to look like this: http://skins.nucleuscms.org/blog/16 My CSS file is located he http://jamesmeister.com/mom/wp-content/themes/stanch2/style.css Can anyone figure out what could be the problem and how to fix it? Thanks! Hello, can someone please take a look at this site: http:// www . jamandcheese . be/dump/index.html As you can see, I'm having some trouble. 1. I can't get the navigation to work properly. It needs to be vertically centered and the sliding doors hover effect isn't quite right. Don't know how to solve this one! 2. under the white box (i'll add a slideshow later) there are two buttons. The bottom text overlaps the text above. How can i solve this? And how can i get the hover effect to work? When you hover over, text needs to become white with dark text-shadow. 3. the 2 lists at the bottom are floating left. They need to be centered like the screenshot below. When i give both ul a margin, they jump underneath each other. Please help! So I have uploaded my site via dreamweaver to my web host. Everything looks great through the editor (even under 'Live View'). When I actually type in my website in the browser only parts of the back round show up! I've tried editing everything that I possibly can (to my knowledge). Can someone please help?! Thanks so much My site: tyspetservices DOT com Thanks again guys ! My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time. goto www.eldore.com Thanks My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time. goto www.eldore.com Attached is my css file. Thanks On my website lakelandedc.com how can i fix the menu so that when you hover off of the menu the sub section stays where it is and doesnt snap back? or how can i make it better? |
|||||||