...

View Full Version : Newbie needs some css help



bts_22
01-10-2008, 07:31 AM
Hi,
I am pretty new to html design. I am trying to create a template and I am having some issues with positioning divs I would appreciate any help very much. I did have the positions almost right but now they are all out of whack. Also, the positions differ in firefox and ie7. Can someone guide me in the right direction.

Thanks

Here is the page. http://ebay.brandonshaw.net/photos/Everythings%20An%20Argument/

kosstr12
01-10-2008, 01:13 PM
Inside the css for the "back to ebay" button, try something like:

text-align:left;


Hope it works=]

koss

bts_22
01-10-2008, 07:20 PM
Thanks for the reply. I tried that but still no luck. I have been reading css guides and such but I still am in the dark on why it is not working out for me.

vexen
01-10-2008, 07:31 PM
hi, i have messed with your css. with what i can see on your html, you use way too much useless classes and id's

you could simply target childrens elements using the cascade : #heading img or #heading .goback (these are not your actual classes, just examples)

here is your css, instead of over complicated positionning, i went with floating elements and adding a padding to fit in your design (not being outside). i did not clean anything but the best advice i could give you would be to start over with an empty document and stylesheet to understand what you are coding. from experience doing the same site 2-3-4-5 times were really good training and experience.


body {text-align:center;}
td.bts {
line-height : 13px;
vertical-align : top;
padding : 0;
}
table.bts {
border : 0;
border-collapse : collapse;
line-height : 0;
}
a {
color : #79c8ff;
text-decoration : underline;
}
a:hover {
text-decoration : none;
}
#caption {
color:#000000;
}
#numberDisplay {
color:#000000;
}
.footer {
color : #fdfdfd;
}
.footer a {
color : #79c8ff;
}
.footer b a {
color : #fdfdfd;
text-decoration : none;
}
.footer b a:hover {
text-decoration : underline;
}
#title {
text-align:center;
padding-top:75px
}
#imagebox {
}
#imagebox2 {
float:left;
padding-top:100px;
padding-left:60px
}
#textbox {
}
#textbox2 {
}
#logo {
float:right;
padding-right:20px;
padding-top:75px
}
#logo2 {
}
#backbox {
float:left;
padding-top:100px;
padding-left:20px
}
h1 {
font-family : "Arial Rounded MT Bold", Georgia, "Times New Roman", Times, serif;
font-size : 22px;
font-weight : bold;
color : #ffffff;
}
h2 {
font-family : Geneva, Arial, Helvetica, sans-serif;
font-size : 18px;
font-weight : bold;
color : #fa5a01;
line-height : 18px;
text-align: center;
}
h3 {
font-family : "Arial Rounded MT Bold", Georgia, "Times New Roman", Times, serif;
font-size : 16px;
font-weight : bold;
color : #ffffff;
line-height : 0px;
}
.side {
display:inline
}
table#b1 {
width : 100%;
height : 100%;
line-height : 0px;
}
table#b3 {
width : 747px;
height : 100%;
line-height : 0px;
}
img#b5 {
padding-top:15px
}
td#b2 {
width : 50%;
height : 100%;
line-height : 0px;
}
td#b4 {
width : 747px;
height : 349px;
background : url(http://brandonshaw.net/ebay/template2/images/top.gif);
line-height : 0px;
}
td#b6 {
width : 747px;
height : 362px;
background-image : url(http://brandonshaw.net/ebay/template2/images/li.gif);
background-position : top left;
line-height : 0px;
}
td#b9 {
width : 747px;
height : 100%;
background-image : url(http://brandonshaw.net/ebay/template2/images/bot1.gif);
line-height : 0px;
}
td#b10 {
width : 747px;
height : 109px;
background-image : url(http://brandonshaw.net/ebay/template2/images/bot.gif);
line-height : 0px;
}
br#b7 {
line-height : 20px;
}
br.b8 {
line-height : 14px;
}
br.b11 {
line-height : 25px;
}
p.stuff {
font-family:Verdana, Arial, Helvetica, sans-serif, "Comic Sans MS";
font-size:11px;
color:#FFFFFF;
}
p#copyright {
position:relative;
top:20px;
color:#FFFFFF;
}

PS. the only 'cleaning' i did came from prettyprinter.de, it was easier to read your code like this.
PS2. i tested FF and IE6

Excavator
01-10-2008, 08:39 PM
Hello bts_22,
Have a look at it without the tables:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 747px;
margin: 0 auto;
}
#header {
height: 349px;
background: url(http://brandonshaw.net/ebay/template2/images/top.gif);
}
#title {height: 30px;
padding: 75px 0 0 0;
}
#title h1 {
color: #76B41C;
letter-spacing: 1px;
padding: 5px;
margin: 10px;
font: bold 18px Georgia, "Times New Roman", Times, serif;
text-transform: capitalize;
}
#title h2 {
font-family : Geneva, Arial, Helvetica, sans-serif;
font-size : 18px;
font-weight : bold;
color : #fa5a01;
line-height : 18px;
text-align: center;
}
.side {
display:inline
}
#back {
float: left;
margin: 100px 0 0 20px;
}
#ebay {
margin: 100px 0 0 0;
}
#logo {
float: right;
margin: 80px 20px 0 0;
}
#content {
background: url(http://brandonshaw.net/ebay/template2/images/li.gif) repeat-y;
width: 707px;
padding: 0 20px;
overflow: auto;
}
#content #w1 {
margin: 0 0 20px 0;
}
#front {
float: left;
margin: 5px;
}
#book_back {
float: left;
margin: 5px;
}
#footer {
width: 747px;
height: 109px;
clear: both;
background: url(http://brandonshaw.net/ebay/template2/images/bot.gif);
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="title"><h1 class="side">Everythings An Argument</h1><h2 class="side">(2 images)</h2></div>
<img src="http://ebay.brandonshaw.net/template2/images/back.gif" alt="back arrow" width="178" height="118" id="back" />
<img src="http://brandonshaw.net/ebay/template2/images/logo.gif" width="178" height="100" alt="trusted logo" id="logo" />
<img src="http://www.yceml.net/0536/10466840-1.gif" width="234" height="60" alt="my ebay listings" id="ebay" />
<!--end header--></div>
<div id="content">
<img src="http://brandonshaw.net/ebay/template2/images/5_w1.gif" alt="line" width="666" height="22" id="w1" />
<img src="http://ebay.brandonshaw.net/photos/Everythings%20An%20Argument/thumbnails/img_0162.jpg" alt="front of book" width="150" height="126" id="front" />
<img src="http://ebay.brandonshaw.net/photos/Everythings%20An%20Argument/thumbnails/img_0168.jpg" alt="back of book" width="150" height="139" id="book_back" />
<!--close content--></div>
<div id="footer"></div>
<!--end container--></div>
</body>
</html>

bts_22
01-11-2008, 04:25 AM
Thanks a million to you all. I almost had it right but now I ran into another problem. The margins of the content area are alot different in ie7 and firefox. You can see the difference in the new page here http://ebay.brandonshaw.net/template2/Untitled-4.html

vexen
01-12-2008, 02:37 AM
Hello, it seems that you have fixed the margin problem, because IE7 and FF looks the same to me!

In the mean time, I would like to sugget that all those tables are not needed, and if you want to position your site in a table, you can do it with ONE table and THREE rows. One row for the header, one for the content, and one for the footer.

Also, your HTML was not valid at all against w3c specs. You included a XHTML Transitional DTD. I spent some time to get your HTML to validate. Have a look at your current HTML : http://validator.w3.org

Add this to your css (Of course, if you already have a body selector in there, fit the background:#fff; in there):

body { background:#fff }

here is the html, i did not remove useless classes or id's, nor useless tables, but it validates:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rebate / January 2008 / YoSmo.com Auction Images</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="scripts/lightbox/lightbox.css" rel="stylesheet" media="screen" type="text/css" />
<link href="http://ebay.brandonshaw.net/template2/style2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/lightbox/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/lightbox/lightbox.js"></script>
</head>
<body>
<table class="bts" id="b1">
<tr>
<td class="bts" id="b2"><table class="bts" id="b3" align="center">
<tr>
<td class="bts" id="b4"><div id="title">
<h1 class="side"> Everythings An Argument </h1> <h2 class="side">(2 images)</h2>
</div>
<table class="bts">
<tr>
<td class="bts" width="532" height="200"><div id="backbox">
<a href="javascript:history.go(-1);"><img src="http://ebay.brandonshaw.net/template2/images/back.gif" alt="Go back to Ebay" />
</a>
</div>
<div id="imagebox2"> <a href="http://rover.ebay.com/rover/1/711-1751-2978-376/1?aid=10466840&amp;pid=2799320&amp;mpre=http%3A%2F%2Fsearch.ebay.com%2F_W0QQsassZyosmo_com" target="_top" onmouseover="window.status='http://affiliates.ebay.com';return true;">
<img src="http://www.tqlkg.com/image-2799320-10466840" width="234" height="60" alt="Sell your item on eBay!" border="0" /></a></div>
</td>
<td class="bts" width="215" height="200"><img src="http://brandonshaw.net/ebay/template2/images/logo.gif" id="logo" alt="" border="0" /><br />
<img src="http://brandonshaw.net/ebay/template2/images/logo_paypal_verified.gif" id="b5" alt="" /> </td>
</tr>
</table></td>
</tr>
<tr>
<td class="bts" id="b6"><table class="bts">
<tr>
<td class="bts" width="44" height="362"></td>
<td class="bts" width="666" height="362"><img src="http://brandonshaw.net/ebay/template2/images/5_w1.gif" alt="" border="0" /><br />
<br />
<div id="container">
<div id="gallerycontainer">
<div class="thumbnail">
<a class="thumbnailhover" title="This is the front of the book" rel="lightbox[258]" href="images/img_0162.jpg"><img src="thumbnails/img_0162.jpg" title="This is the front of the book" alt="This is the front of the book" width="150" height="126" border="0" />
This is the front of the book</a>
</div>
<div class="thumbnail">
<a class="thumbnailhover" title="This is the back of the book!" rel="lightbox[258]" href="images/img_0168.jpg"><img src="thumbnails/img_0168.jpg" title="This is the back of the book!" alt="This is the back of the book!" width="150" height="139" border="0" />
This is the back of the book!</a>
</div>
</div>
</div>
</td>
<td class="bts" width="37" height="362"></td>
</tr>
</table></td>
</tr>
<tr>
<td class="bts" id="b9"><table class="bts">
<tr>
<td class="bts" id="b10" align="center"><br id="b11" />
<p id="copyright">2008 &copy; Copyright <a href="http://brandonshaw.net/">BrandonShaw.net</a>. All rights reserved.</p>
<br />
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

All the 'bts' classes are pretty much useless, same with almost every - as it seems to be - auto id's, given by a WYSIWYG editor such as Dreamweaver, could be ditched. If you need em to target anything particular, you should do it manually and using an id name that MEANS something.

bts_22
01-12-2008, 04:26 AM
I getting on the right track now maybe. I finished it all up and uploaded my html to ebay for my new template but it ends up a little messed up espessially in ie7. Before it gets to ebay it looks fine though. Here is my ebay listing.

http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&rd=1&item=110213617007&ssPageName=STRK:MESE:IT&ih=001

Can one of you have a quick look at it. Thanks

bts_22
01-12-2008, 04:31 AM
Ok it just needs to be centered in ie7 now.

barkermn01
01-13-2008, 04:29 AM
html
<center></center>

html div
<div align="center"></div>

style div
<div style="alignment:center;"></div>

Or Just syle code for in the classes or Id Styles

alignment:center;

i hope that works for you if you need any more ways just ask lol

rmedek
01-13-2008, 05:38 AM
style div
<div style="alignment:center;"></div>

Or Just syle code for in the classes or Id Styles

alignment:center;

There is no such thing as this CSS property. Just saying.

barkermn01
01-14-2008, 10:28 PM
oops could have sworn there was my bad



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum