|
CSS - Suggestions For Usability With Design
I don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design.
It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. Similar TutorialsI have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning. The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! look 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. Hey, everyone! I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS. Thank you! Kyler Here's the CSS code: * { margin: 0; padding: 0; } body { background: #666666 repeat-x; color: #000000; } #center { position: absolute; width: 100%; float: none; } #outercontainer { width: 760px; margin: 0 auto 0 auto; } #menu { height: 70px; background:#FF0000; } #container { position: relative; height: 500px; overflow: auto; border: 10px solid #FFFFFF; background-color: #FFFFFF; } #barst { height: 20px; width: 100%; background: #00FF00; } #barsb { height: 20px; width: 100%; background: #00FF00; } Here's the HTML code: <head> <title>enter title here</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="center"> <div id="barst"> </div> <div id="outercontainer"> <div id="menu">---- HEADER --- -----------------</div> <div id="container"> <p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.<br /> <br /> Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.</p> </div> </div> <div id="barsb"> </div> </div> </body> </html> http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Hi, This is my first CSS layout. I would like to know if there is a better way to code this or what improvements or changes should be done. Thank you, Lutek <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="screen"> body { margin-top: 0; text-align: center; background-color: #d30000; } #container{ margin: 0 auto; width: 650px; height: 800px; text-align: left; background-color: #FFFFFF; } #header { float: left; width: 100%; background: #FF9900; } #box-left { float: left; width: 33.3%; background: #FF0000; } #box-center { float: right; width: 33.3%; background: #ffff93; } #box-right { float: right; width: 33.3%; background: #ffff93; } #footer { float: left; width: 100%; background: #FF2200; } </style> </head> <body> <div id="container"> container <div id="header">header</div> <br> <div id="box-left"> box-left</div> <div id="box-center">box-middle</div> <div id="box-middle">box-right</div> <div id="footer">footer</div> </div> </body> </html> 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 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. 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? Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm 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/ 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;
}
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 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. http://www.hicksdesign.co.uk/ Please notice on the right hand side the border that streams down the bottom, I've tried to analyze his css but it just doesn't seem to make exact sense. The picture actually stays the same regardless of the user's resolution and this is an optimal solution to fight the screen rez blues. Any thoughts? OK - this may sound a bit cheeky but I have been looking everywhere for a table-less design which will work in the 3 major browsers (Opera, Firefox, IE) I am looking for a 2 column layout (left column about 130 px wide) and with a header and footer - I can't find anything that works for me in all browers (I know M$ haven't made IE fully compatible ) but if anyone knows where I can get this popular and simple structure I would be most grateful, thanks, j 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 |
|||||||