|
CSS - Trying To Convert Site To Css...
yo.
i'm trying to convert my site to CSS. my old design was in HTML, and i made it in fireworks. each content table was made up of images in a table (it had rounded corners) i want to start making my layout with CSS. how can i use these images for my old table in the same way with CSS? thanks. Similar TutorialsI need to get: <style type="text/css"> <!-- a{text-decoration:none} a:hover{color:#000000; } --> </style> <body bgcolor="#eeeeee" text="#0060FF" link="#0060FF" vlink="#0060FF" alink="#0060FF"> to be able to use in a CSS. How? I'm not sure how to lay it out and so on... I want it so all links have no underscore, etc and they're all #0060FF dispite it being active, viewed and so on... When they hover, I need it to go black. Thanks! Hello, I'd like to create a table to a <ul><li> format: it would look life this, Code: <ul> <li>Name</li> <ul> <li>Name 1</li> <li>Name 2</li> <li>Name 3</li> </ul> <li>Phone Number</li> <ul> <li>Phone number 1</li> <li>Phone number 2</li> <li>Phone number 3</li> </ul> </ul> the first level <li> would have a border and would be a header to the table and the second level <li> would be the table items. Then when you get back to the first level, the item goes back to the top (2 collums). ----------------------------- | Name | Phone number| ----------------------------- | name 1 |Phone number 1| you get the idea.. I can't figure out the corresponding CSS. Can anyone help me out.. thanks Hi, the table is simple one as below. Code:
<style >
table {
border:1px solid #000;
}
</style>
<table width="200" border="1">
<tr id="header">
<td> </td>
</tr>
<tr id="content">
<td> </td>
</tr>
<tr id="footer">
<td> </td>
<td> </td>
</tr>
</table>
what i try to do is to have a container which contains 3 sub container. By using table the footer can be positioned at the bottom of the page regardless of the length of the content. How do i rewrite it using <div>? Any help is greatly appreciated. Thank you. I sliced a layout in fireworks and imported it to dreamweaver. Of course it puts everything in tables. How do I convert this to css and still get a seamless backround. I'm a newbie Hello all, I'm pretty fresh here, but unrelenting confusion has driven me to attempt and find help with my particular question. I am sure there must be a tutorial to help me with this, but I've been all over and I think I'm getting cross-eyed just trying to find what I need! I have been trying to format a website header section using CSS. With tables, it would seem so easy; make a table with two columns, plop one image on the left, make a margin in between, and plop the other image on the right. But with CSS, I simply can't bend my head around it. It's driving me mad! The header is simply a rectangular logo, and a decorative image next to it, with a two pixel margin in between them. I've gotten the logo on there in its top left corner, but every time I try to get the decorative image to snuggle in next to it, it keeps wanting to sit UNDER the logo instead. I have been, to this point, a table designer and apologize if this is an incredibly simple concept with tutorial answers all over the web. Any links to these would be great too! Hi, I am very new to CSS and very confused. I wrote my site about 10 years ago using tables and have been working very hard the last few weeks updating the code to CSS and XHTML. I have a navigation page that was made as a table using an image to replace the bullet and act as the link. I am having a terrible time rewriting the blasted thing without using a table. The columns will not line up (I suppose I do not understand how to use the negative margin properly) and when I try to use the clear: left; code so my bullet image lays properly it will only clear the bottom of the previous column so there is a giant gap in between the links. I have no idea what I am doing. Here is a link to what the page looks like using the old code. This page will NOT validate, the code is old and depreciated but if you have a peek you can se what I am trying to achieve. www.medeaslair.net/myths.html. Here is what I wrote but I am afraid it is very long. I apologize in advance for how bad it is. CSS Code:
<!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=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
color: black;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
text-align:center;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
#container {
width: 750px;
margin: 0 auto;
text-align:left;
}
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e, li.col1f, li.col1g, li.col1h, li.col1i, li.col1j, li.col1k, li.col1l, li.col1m, li.col1n, li.col1o, li.col1p, li.col1q, li.col1r, li.col1s, li.col1t, li.col1u, li.col1v {
margin-left: 0;
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e, li.col2f, li.col2g, li.col2h, li.col2i, li.col2j, li.col2k, li.col2l, li.col2m, li.col2n, li.col2o, li.col2p, li.col2q, li.col2r, li.col2s, li.col2t, li.col2u, li.col2v, li.col2w, li.col2x, li.col2y, li.col2z {
margin-left: 18em;
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e, li.col3f, li.col3g, li.col3h, li.col3i, li.col3j, li.col3k, li.col3l, li.col3m, li.col3n, li.col3o, li.col3p, li.col3q, li.col3r, li.col3s, li.col3t {
margin-left: 34em;
}
.coltopper {
margin-top: -51em;
}
#listyles {
display: block;
padding-top: 45px;
margin: 0;
width: 100%;
list-style-type: none;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration: none;
}
image {
border-style: none;
}
li.col2a, li.col3a {
margin-top: -51em;
}
#listyles li {
line-height: 1.5em;
}
h1 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 35px;
border: 0;
}
-->
</style>
</head>
The HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <ul id="listyles"> <li class="col1a"><u>Gods and Goddesses</u></li> <li class="col1b" style="padding-top: 10px;"><a href="aphrodite.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Aphrodite</li> <li class="col1c" style="clear: left;"><a href="apollo.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Apollo</li> <li class="col1d" style="clear: left;"><a href="artemis.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none:" alt="grapes""></a>Artemis</li> <li class="col1e" style="clear: left;"><a href="athena.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Athena</li> <li class="col1f" style="clear: left;"><a href="dionysus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Dionysus</li> <li class="col1g" style="clear: left;"><a href="hades.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hades</li> <li class="col1h" style="clear: left;"><a href="hera.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hera</li> <li class="col1i" style="clear: left;"><a href="hermes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hermes</li> <li class="col1j" style="clear: left;"><a href="poseidon.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Poseidon</li> <li class="col1k" style="clear: left;"><a href="zeus.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Zeus</li> <li class="col1l" style="padding-top: 30px;"><u>Tales of Love and Woe</u></li> <li class="col1m" style="padding-top: 10px;"><a href="hermes.html#baucis"> <img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Baucis and Philemon</li> <li class="col1n" style="clear: left;"><a href="cupid.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Cupid and Psyche</li> <li class="col1o" style="clear: left;"><a href="pan.html#echo"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Echo and Narcissus</li> <li class="col1p" style="clear: left;"><a href="pan.html#endymion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Endymion</li> <li class="col1q" style="clear: left;"><a href="artemis.html#orion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orion</li> <li class="col1r" style="clear: left;"><a href="orpheus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orpheus and Eurydice</li> <li class="col1s" style="padding: 30px;"><u>Giants and Beasts</u></li> <li class="col1t"><a href="artemis.html#otus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Otus and Ephialtes</li> <li class="col1u" style="clear: left;"><a href="minotaur.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"alt="grapes"></a>The Minotaur</li> <li class="col1v" style="clear: left;"><a href="cyclopes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Cyclopes</li> <li class="col2a coltopper"><u>Men and Heroes</u></li> <li class="col2b" style="padding-top: 10px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Agamemnon</li> <li class="col2c" style="clear: left;"><a href="atreus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"></a>Atreus</li> <li class="col2d" style="clear: left;"><a href="daedalus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Daedalus and Icarus</li> <li class="col2e" style="clear: left;"><a href="athena.html#erichthonius"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erichthonius</li> <li class="col2f" style="clear: left;"><a href="heracles.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Heracles</li> <li class="col2g" style="clear: left;"><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hyacinthus</li> <li class="col2h" style="clear: left;"><a href="hera.html#ixion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Ixion</li> <li class="col2i" style="clear: left;"><a href="atreus.html#orestes"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orestes</li> <li class="col2j" style="clear: left;"><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pentheus</li> <li class="col2k" style="clear: left;"><a href="perseus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Perseus</li> <li class="col2l" style="clear: left;"><a href="phrixus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Phrixus <li class="col2m" style="clear: left;"><a href="pandora.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Prometheus</li> <li class="col2n" style="clear: left;"><a href="hades.html#sisyphus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sisyphus</li> <li class="col2o" style="clear: left;"><a href="atreus.html#tantalus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Tantalus</li> <li class="col2p" style="padding-top: 30px;"><u>Tales of the Sea</u></li> <li class="col2q" style="padding-top: 10px;"><a href="sea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sea Myths</li> <li class="col2r" style="clear: left;"><a href="circe.html#glaucus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Glaucus and Scylla</li> <li class="col2s" style="clear: left;"><a href="sea.html#nereus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nereus</li> <li class="col2t" style="clear: left;"><a href="sea.html#sirens"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Sirens</li> <li class="col2u" style="clear: left;"><a href="sea.html#triton"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Triton</li> <li class="col2v" style="padding-top: 30px;"><u>Tales of Interest</u></li> <li class="col2w" style="padding-top: 10px;"><a href="garden.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: 4px;" alt="grapes"></a>Mythic Garden</li> <li class="col2x" style="clear: left;"><a href="samhain.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Blessed Samhain</li> <li class="col2y" style="clear: left;"><a href="thor.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Thor</li> <li class="col2z" style="clear: left;"><a href="links.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Links and Credits</li> <li class="col3a coltopper"><u>Women and Witches</u></li> <li class="col3b" style="padding-top: 10px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Alcmene</li> <li class="col3c" style="clear: left;"><a href="athena.html#arachne"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Arachne</li> <li class="col3d" style="clear: left;"><a href="circe.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Circe</li> <li class="col3e" style="clear: left;"><a href="dionysus.html#erigone"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erigone</li> <li class="col3f" style="clear: left;"><a href="zeus.html#europa"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Europa</li> <li class="col3g" style="clear: left;"><a href="zeus.html#io"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Io</li> <li class="col3h" style="clear: left;"><a href="zeus.html#leda"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Leda</li> <li class="col3h" style="clear: left;"><a href="leto.html"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>Leto</li> <li class="col3h" style="clear: left;"><a href="medea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Medea</li> <li class="col3i" style="clear: left;"><a href="leto.html#niobe"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Niobe <li class="col3j" style="clear: left;"><a href="pandora.html#pandora"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pandora</li> <li class="col3k" style="clear: left;"><a href="persephone.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Persephone</li> <li class="col3l" style="clear: left;"><a href="dionysus.html#semele"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Semele</li> <li class="col3m" style="clear: left;"><a href="pan.html#syrinx"><img src="images/grape.gif" style="float: left; text-alogn: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Syrinx</li> <li class="col3n" style="padding-top: 30px;"><u>Satyrs and Centaurs</u></li> <li class="col3o" style="padding-top: 10px;"><a href="chiron.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Chiron</li> <li class="col3p" style="clear: left;"><a href="dionysus.html#midas"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>King Midas</li> <li class="col3q" style="clear: left;"><a href="apollo.html#marsyas"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Marsyas</li> <li class="col3r" style="clear: left;"><a href="chiron.html#nessus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nessus</li> <li class="col3s" style="clear: left;"><a href="pan.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pan <li class="col3t" style="clear: left;"><a href="chiron.html#peirithous"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Peirithous</li> </ul> </div> <!-- end of container div --> </body> </html> Hi all, Ooooohhh, I think I have a good one... I am trying to eliminate every single table on my site. I have ONE more page to go. http://www.bartlett-family.net/chri...cstrategy2.html is what the original layout, with tables. I need to replace it with a table-less version. I'm attempting that at http://www.bartlett-family.net/chri...icstrategy.html. I've run into a problem. Notice on the first page how S, D, H, & P are all supposed to be different colors. That works out fine when, like in the row for "8" all the items are the same (in that case, "H"). But it just won't work when there's any combination of H, S, D, & P. Have a look at my CSS and source. Can anyone think of a method to solve my dilemna here? Should I be using lists of some kind instead? Chris I have been reading a lot about tableless desing and I decided to convert my web site into fixed width, 3 column desing. I did 3 different types of CSS to do this (based on tutorials and templates), but I have no idea on wich will be better for my web site. Please take a look at the source codes (small files, CSS included in the html files, should be really quick to look at) and help me choosing. important: the 1px border in the main containers are just for "debugging pusposes", it won't be used on the web site. http://www.djbrunofacca.com.br/sample1.html - this uses absolute positioning. http://www.djbrunofacca.com.br/sample2.html - this uses float but there's an additional container (inside the main container) just for the left and middle columns. any advantages in this? http://www.djbrunofacca.com.br/sample3.html - this uses float: left for all 3 columns and I think it's the simplest of them all. I'm concerned about cross browser compatibility and degradation in different resolutions. Thanks Bruno Facca right guys...this one is a bit backwards. I have a table as follows: Code: <table height=100% wieght=100 cellspacing=0 cellpadding=0> <tr> <td width=50%></td> <td width=760px></td> <td width=50%></td> </tr> </table> For obvious validation reasons, i need to convert this to CSS but keep the 100% height. Example of it: http://www.ridobusinesscentre.org.uk All help is welcomed. HI all... i have been loving my table layouts, but it seems that if i dont convert i will get left behind, so help a fellow out... the problem is that i have a complex 3 col layout, and i need the divs to auto size to fill the whole div... code will explain it better i think Code: <div style="border:1px solid white;width:100%;height:600px;"> <div style="border:0px solid blue;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> <div style="border:0px solid yellow;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> <div style="border:0px solid yellow;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> </div> the first div is the wrapper, the first is the left then the middle then the right... but if the middle one changes height the rest are left at there default, and i just cant seem to locate the problem, i give it a day, then its back to tables.... this is not helping me like this CSS stuff just a note the whole lot will be centered with a margin of 20-30px... so no fixed positions for the inner divs.. frank/ Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks OK, I have tested all browsers both Mac and PC, and the only issue I have is with the AOL browser. You can see the site here Can anyone tell me how to trouble shoot CSS for the AOL browser? thanks - I've been trying to work this for 3 hours now, and I need help!! My problem is that I get cursors on 3 of my links but not the other two. Link to the site is http://borgweb.se/beta <- try the menu css is: Code: body {
min-width:1024px;
background-color: #f5f3ec;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#header {
height:240px;
width:100%;
background-color: #1e1303;
background-image: url(images/topback.png);
background-repeat: no-repeat;
background-position: 50%;
margin-right: auto;
margin-left: auto;
}
#header-logo{
max-width:1024px;
position:relative;
width:1024px;
height:240px;
background-image: url(images/bw_logo.png);
background-repeat: no-repeat;
display: block;
margin-right: auto;
margin-left: auto;
}
#menu {
background-image: url(images/menu.png);
height: 76px;
width: 75px;
float: right;
position: relative;
top: 80px;
right: 20%;
}
#home {
height: 12px;
position: relative;
display: block;
cursor: pointer;
}
#home a {
background-position: 75px;
}
#aboutme {
height: 12px;
position: relative;
top: -3px;
cursor: pointer;
}
#portfolio {
height: 12px;
position: relative;
top: -5px;
cursor: pointer;
}
#blog {
height: 12px;
position: relative;
top: -8px;
cursor: pointer;
}
#contact {
height: 12px;
position: relative;
top: -10px;
cursor: pointer;
}
#container {
width: 1024px;
margin-right: auto;
margin-left: auto;
display: block;
float: left;
}
html is: Code: <!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="header-logo">
<div id="menu">
<div id="home" onclick="location.url('#');"></div>
<div id="aboutme"></div>
<div id="portfolio"></div>
<div id="blog"></div>
<div id="contact"></div>
</div>
</div>
</div>
</body>
</html>
Here is a new template I am working on for my site (only "Home", "Events" and "People" work, at the moment). It displays as designed in Firefox but it looks absolutely terrible in IE6. I am aware that there are several ways of hacking IE6 to make it behave differently, however I'm not entirely sure of where in particular I should be applying these. I am currently getting back into creating websites and learning new ways to make them. I like using Photoshop to create the graphics, but is there any way that I can use CSS to make it so that on all my pages the main portion on the site remains the same, such as the header, footer and side bars? Appreciate the help. BTW... the site address is Orpheus Designs . Hi I need css help to make it a 3 column and add google adsense to my site its a music portal my18friends.com So I am just getting into designing with CSS, and really enjoying it. I put up this site for a friend, its my first coded by hand. I did it all with BBedit on a mac, and it looks fine on Safari and Firefox. However, as you can see, it looks terrible on IE, totally unusable, and I would accept any advice on how to fix it. The menu came from seco consultants and uses whatever:hover to work in IE, though in this case it dont work. The layout is all screwed up too. Anyone want to offer some advice? Here's the site: dobsonfarm.com/connaught Thanks very much, Robin Turner hello, ive made a site for a client but for some reason when they first see it it moves up and then after they go back its fine. they use an old IE so i cant see why it does on my computer and its fine on mozzilla to. www.designerbagsboutique.co.uk is the website, can anyone help? Hi Any comments, especially CSS wise would be muchly appreciated... URL One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone? thanks! Modo Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can. The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity. The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples. The menu had list items similar to the naving convention: liquid 2 column nf fixed 3 column nfnh liquid/fixed 3 column etc. The header was the whole wording of whatever the menu items were. Each page he showed examples using css, xhtml and sometimes javascript with the code on the page. At the bottom of each example it had a group for user comments. Some were empty. I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/ I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck. Thanks |
|||||||