|
CSS - Css Design Questions
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 Similar TutorialsHello - My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes. Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it. But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!]. Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc. 1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix. I mean it's working! - So why should I want to validate my CSS? ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think). I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge. --------- I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser? ---------- Here is the site re-design http://www.aaanwohio.com/test/together.php Our Current Site is located at http://www.aaa.com/stop - Zip Code 43465 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. 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? 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, I have a table, which contains div. The Div contains "ul" and "li" elements. Currently my page looks awkward without any css designs. Could somebody help me with some css designs, so that page looks good. Thank you. Well, many of you have seen me floundering around this CSS stuff. I developed 2 demos for a team of people to review and damn if they didn't want functionality combined into one site... I have words that discribe my reaction!!.. Anyway I'm building this site using a new 3 column example I found at Skidoo or something like that. Seems to be working well so far with my columns staying the same height. As I go I'm trying to maintain the functionality in both IE and FF and frankly having a bit of trouble. Seems that the code and changes looks fine in IE but there are 3 primary areas I cannot seem to fix in FF. *The white line between 'the header' and 'the horizontal nav' blocks. *The background color for the left and right content areas is not coming through. *And in the Left content area there are a lot of links with the UL set to none and a reduced margin for alignment purposes. In FF they are not over to the Left like I'd like If you look at this example in IE it is as I'd like it to appear. In FF the above are an issue. Any help would be greatly appreciated even if its a link to read this..... sort of thing. Thanks for the help. The site The CSS Also, em is fairly new to me in this style, it seems to be very good especially when adjusting the font size. Is this the better to use standard than px? Does anyone know where I can find a chart comparing the two? I have been using px for sometime and have to fiddle with em to make it all work. Thanks again for any assistance. 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;
}
Hi, i have been reading up a lot about responsive design lately... will responsive design do away with the need for having a mobile. prefix at the start of a url (mobile.sitename.com) or do responsive designs tend to keep the mobile.sitename.com 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? Heya everyone, The next item on my todo list is to work on a design for DynaSig with just CSS for layout rather than the current tables. I haven't used CSS to create a really complex template before and I am not sure where to start. I want it to look pretty much exactly the same as the original. So. What do I do first? What should I learn and complete first? I'm kinda stuck on this one, and I don't want it to get put on the back-burner. Thanks for ideas/tips/comments/help/whatever comp okay, so what i want to achieve is a result similar to: www.simplebits.com anyways, first thing is that using divs when the browser is resized everything gets screwed up, however not on the above site. thanks, any help would be great. Chris 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 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! 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 I was told in the html forum that I should design my layout with CSS instead of tables... I'm using FireworksMX and Dreamweaver MX. Any help figuring out how to do that with the layout on this page would be great - I don't know very much about CSS. I know dreamweaver makes new ones every time I type, and it keeps changing my text when I don't want it to. I understand that you can make ones for text, html tags, and other more complicated stuff that I don't understand - is it possible for me to figure this out without spending a month studying it? Here's the non-css layout page http://www.thecurrencyofthefuture.com 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. 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 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;
}
|
|||||||