|
CSS - Design Approach
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;
}
Similar Tutorialslook at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. 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 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 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 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!! It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side. http://www.members.shaw.ca/welcomehere/test.htm please help. I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design:
body background: fixed full page image
banner: fixed, 100 pixels high, full-width, transparent background
nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background
content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background
footer: fixed, 30 px high, full width, transparent background
mockup: Here is as far as I could get in the actual design: web page attemp Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work. What does everyone else usually do? Hi all, After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless. The site i am remaking is www.verdicts.co.uk So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage. ...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?! Thanks Mat. Hi, I'm designing a web site using a full CSS layout with XHTML. It's quite challenging as I'm used to complex table designs. My design is located at http://www.definitedigital.com/vida/index.html And the style sheet at http://www.definitedigital.com/vida/style.css There's some things that look different across browsers, and I'm not sure if it's some sort of bug or my mistake. For example, 1. On Firefox the 'Punta Del Este Vida Beach House' link image is sometimes detected and sometimes unclickable. 2. There's much more vertical spacing between the divs (logo, photo, menu) in Firefox than in IE. I'd really appreciate if someone could take a look at my CSS, as I don't really know whether I'm doing this right or not. Thanks, Ralph Ok, trying to use CSS to mirror the UNLV design header. examples of the design: http://hotel.unlv.edu/ http://alumni.unlv.edu/ etc I basically want the top header (black/red backgrounds) I am trying to do it without using tables to do the layout, but I can't seem to figure out how to do it. here is what I got: http://projects.whiteazn.com/unlvmentor/ in firefox, looks fine, except the black background doesn't seem to go all the way over. in IE, works fine, but the red background seems to get bigger (the height is bigger) and the search box seems to go to the top any ideas? (I haven't tried to float the red background part yet) I would like to be able to have headers for the smaller divs in each column similar to the one I have on the upper left hand side close to the nav bar. The question is this: How do I attain this effect with the header streched across the width of the containing div? http://www.nevertap.com/float/ Do I use an image? Do I use tables? I would just 'go for it' and try them all out, but Ive been coding too long today, I want to see what others think so im not making a total stab in the dark. I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Hi, How do i make a table in which "title" is in the middle of the table and "help" is on right side. <table class="" width="700"> <tr><td colspan="2" align="center"> <span>title</span><span>help</span> </td></tr></table> something like this: ------------------------------------------------------ |...................................title...........................help | ------------------------------------------------------ Thank you. I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database. Code:
#innersubcontentpopular{
float:right;
width:300px;
height:450px;
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#innersubcontentpopular h1{
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
#innersubcontentpopular h2 {
padding:5px 2px 5px 2px;
font-size:12px;
font-weight:bold;
color:#aaaaaa;
}
#innersubcontentpopular p {
padding:2px;
margin:0;
font-size:12px;
}
Hey everyone, I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great. hutec-inc. com/personal/css.gif On the right side of this page the border is messed up but, in the css the mathematics are all correct. I dont know whats wrong??? Have a look at the output of this code he Code:
<html>
<head>
<title>Template</title>
<style type="text/css">
<!--
#header {
border-top: #000000 thin solid;
border-left: #000000 thin solid;
border-right: #000000 thin solid;
position:absolute;
left:5%;
top:30px;
width:90%;
height:178px;
}
#nav {
border-left: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:5%;
top:208px;
width:18%;
height:512px;
}
#content {
border-right: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:23%;
top:208px;
width:72%;
height:512px;
}
-->
</style>
</head>
<body>
<div id='header'> </div>
<div id='nav'> </div>
<div id='content'> </div>
</body>
</html>
Whats wrong??? Daniel Help? I have designed a look for one of my buddies companies. However, it is quite complicated. I have attached the .GIF file for you to reference. The design needs to be cross-browser friendly. The navigation is going to be dynamically built using a backend application built in PHP. The nav_links will be text not images, as well as the text next to the "did you know" items. I imagine that the placement of some of the "did you know" items can be arranged to ease the slicing process. Also, the left main image (the guy) needs to be dynamic in that it rotates through images on refresh or a revisit (probably some javascript). On top of all that, I need the "featured" or "did you know" items i.e. the round images and text to dynamically change also. These will be likes into specific sections of the site. My major concern is getting the main header pieced together correctly while meeting cross-browser compatibility. I have some CSS knowledge but as i mentioned the design is quite advanced. Any ideas on how to correctly structure it to work? TIA BA Hi everyone I'm very new to CSS and I'm having some trouble getting a layout to work as I want it to. I have attached the file as a .txt as HTML files are not allowed. Just change the extension to .html. The problem, in Opera, none at all. Firefox doesn't display it properly. IE does to an extent but it has horizontal scrolling. Being new to CSS, I have absolutely no idea what needs changing. If anyone could tell me where I'm going wrong, preferably with an explanation why it has gone wrong, it'd be much appreciated. Thanks very much |
|||||||