|
CSS - Best Css Approach Needed.
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 Similar TutorialsHow 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 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 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 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!! Well... I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this: </style> blah blah blah that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason http://www.firstinsurancefunding.net Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it. Can someone provide a fix, or tell me what info you need? Hi All, I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too! I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design. I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing. Basically, I have an html template that looks like this: Code: <html> <head> <title>Test Page</title> </head> <body> <div id="wrap"> <div id="header"> <h1>This is the top header.</h1> </div> <div id="nav"> <ul> <li>This is main item one, with a list nested inside <ul> <li>This is sub item 1.</li> <li>This list should drop down when main item 1 is hovered over</li> </ul> </li> </ul> </div> <div id="content"> <h1>Content</h1> <p>All the main content for the page is placed here. </p> <p>Second Paragraph</p> <p>Third Paragraph</p> <p>Fourth Paragraph</p> </div> <div id="leftnav"> <p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p> </div> <div id="rightnav"> <p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p> </div> <div id="footer"> <p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p> </div> </div> </body> </html> This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width. I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated. I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works. Thanks for any and all help. Hi Folks, Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo. (h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11) #pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;} #pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;} #pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;} #pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;} All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers. Any ideas please? Thanks, S I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts. I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element. And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite. I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance. Here's also the source code: Quote: body,html { margin:0; padding:0; background:#C73F17; height:100%; } #body { margin:auto; height:100%; width:90%; border-left:solid #000 1px; border-right:solid #FFB00F 1px; background:#FFFFCC; } #header { height:70px; border-bottom:solid #000 2px; text-align:center; background:#1c1c1c; } #footer { height:25px; border-top:solid #1c1c1c 1px; background:#000; } #right { float:right; width:150px; height:100%; border-right:solid #FFF 1px; background:#1c1c1c; } #nav { height:20px; border-bottom:solid #000 2px; background:#282828; } Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. i am totally confused over how to put a form on my pages-- i feel really stupid about this as it just cant be that hard but seem to have a mental block of some kind- i would like a form like this one-- FORM EXAMPLE can anyone tell me EXACTLY where to put the code and what the code for it would be-- i would prefer using CSS not java or PHP.. but dont know if that is totally possible-- i have looked around net and tried some ideas but i must be doing something wrong as they just dont work right on pages--- i am using two column layout-- here is link to one of the pages i would like a form on FORM PAGE thanks in advance-- appreciate any help you might offer 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! Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin If you look at this web site http://www.mobilvox.com/ you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls. I've been using the code below, and I can't seem to get the same behavoir. Code: <style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
background-color:#000033;
}
body {
font: 100%/1.25 verdana, arial, sans-serif;
color: black;
background-color: #eef;
overflow: auto;
}
p {
font-size: 1em;
margin-bottom: 0;
}
p + p {
text-indent: 1em;
margin-top: 0;
}
#header {
color: #000000;
background-color: #fff;
overflow: auto; /*encloses float children
see http://garyblue.port5.com/webdev/floatdemo.html
*/
text-align: center;
}
#header ul {
list-style: none;
margin: 0;
padding: 0;
}
#headermenu1 {
float: left;
text-align: right;
margin-left: 2px;
display: inline; /*this is a fix for IE's doubled
float margin bug*/
}
#headermenu2 {
float: right;
text-align: left;
margin-right: 100px;
display: inline; /*same as above*/
}
#global {
margin:0 auto;
width:500px;
text-align: left;
}
can someone point out the problem. - Thanks - Kris Hello All, I have issues with the repeating background on IE only. In firefox,it works fine. Please find the attached ZIP file for all the content with its assets. I am trying to have a curved images on the TOP LEFT & TOP RIGHT only and a image background on the content. In Firefox, the content background is not repeating after the TOP RIGHT and fits correctly. But in IE, the content background is extended after the TOP RIGHT. Please advice. Thanks in advance. John Hi, I'm using SIFR for the headlines on my website, to replace my <h1> text. Please look at http://209.172.34.108/~free/kpformations/test.html The three paragraphs are all <h1> tags but have different sizes. The CSS stylesheet is in the source of the page. Please can you have a look at this and tell me is there any way I can make the <h1> tags the same size and not resize autmatically? I have tried changing the font line height but that didnt work. Please help! Hi there, Please help me with the CSS on my website, http://www.tophatweddings.co.uk On the home page I am trying to display a product feed as rows of 3. However, you will notice that sometimes it will force a new line. I do not understand what is causing this The class being applied is he Code: #productDisplay li
{
float:left;
width:165px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
}
Please help oh wise CSS gurus What should I try? Hi everyone, I'm in trouble, I need to get this page ready by tomorrow and I'm stuck with the alingning of the section under the heading. It should look as three columns (two sidebars + center) and I just can't figure why it doesn't get alingned properly. the page is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>A Porte Aperte - Comune di Sarno</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="divWrapper" > <div id="Header"> <div id="FotoSX"><img src="images/headsx.gif" alt="Comune di Sarno" /><img src="images/fascia02.jpg" alt="Comune di Sarno" /></div> </div> <div id="SidebarSx"><ul> <li><a href="(URL address blocked: See forum rules)">Risorse Utili</a></li> <li><a href="(URL address blocked: See forum rules)">Sportello online</a></li> <li><a href="(URL address blocked: See forum rules)">Leggi e normativa</a></li> <li><a href="(URL address blocked: See forum rules)">Storie di vita vissuta</a></li> <li><a href="(URL address blocked: See forum rules)">Lascia un commento</a></li> </ul></div> <div id="ContenutoCentrale"> <div id="Banner">X</div> <div id="Sportello Antiusura"> <ul> <li>SPORTELLO ANTIUSURA</li> <li>SEDE</li> <li>ORARI</li> <li>PROFESSIONALITA' COINVOLTE</li> </ul> </div> <div id="TestoInfo"> TESTO TESTO TESTO </div> </div> <div id="SidebarDx"> <ul> <strong>Links Utili<br /><br /> </strong><li><a href="(URL address blocked: See forum rules)">Enti ed instituzioni</a></li> <li><a href="(URL address blocked: See forum rules)">Regione</a></li> <li><a href="(URL address blocked: See forum rules)">Provincia</a></li> <li><a href="(URL address blocked: See forum rules)">Comune</a></li> <li><a href="(URL address blocked: See forum rules)">etc</a></li> <li><a href="(URL address blocked: See forum rules)">etc</a></li> <li><a href="(URL address blocked: See forum rules)">Associaczioni</a></li> <li><a href="(URL address blocked: See forum rules)">***1</a></li> <li><a href="(URL address blocked: See forum rules)">***2</a></li> <li><a href="(URL address blocked: See forum rules)">***3</a></li> </ul> </div> </div> </body> </html> and the CSS is: #divWrapper { width: 898px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #AA0C00; border-left-color: #AA0C00; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #FFFFFF; } #divWrapper #Header { background-color: #899933; padding-top: 15px; padding-bottom: 15px; } #divWrapper #SidebarSx { background-color: #BCCC66; display: list-item; list-style-type: none; padding: 15px; width: 150px; } #divWrapper #SidebarSx ul { margin: 0px; padding: 0px; list-style-type: none; } #divWrapper #SidebarSx a { padding: 8px; margin-top: 10px; margin-bottom: 10px; display: block; width: 150px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #899933; border-bottom-color: #899933; text-decoration: none; color: #000000; } #divWrapper #SidebarSx a:hover { background-color: #DDE6B3; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #000000; background-color: #ACA151; margin: 0px; } #divWrapper #Header #FotoSX { float: none; text-align: center; } #divWrapper #ContenutoCentrale { float: left; padding-top: 20px; padding-right: 45px; padding-bottom: 20px; padding-left: 45px; list-style-type: none; background-color: #DDE6B3; width: 607px; } #divWrapper #SidebarDx { float: left; background-color: #BCCC66; width: 170px; padding: 15px; position: absolute; } #divWrapper #SidebarDx ul { margin: 0px; padding: 0px; list-style-type: none; } #divWrapper #SidebarDx a { padding: 8px; margin-top: 10px; margin-bottom: 10px; display: block; width: 155px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #899933; border-bottom-color: #899933; color: #000000; text-decoration: none; } #divWrapper #SidebarDx a:hover { background-color: #DDE6B3; } Many thanks in advance !!!!!!!! Ernesto Can someone please explain why this page looks this way? It's happening in all the browsers used. http://cjenkinsweb.com/shutterstock_submit.JPG here is the way it normally looks, in terms of style. Of course you will not be logged in, so it is not the same content. http://submit.shutterstock.com/main.mhtml I would appreciate an opinion. Thanks. |
|||||||