 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
leon match
Joined: 03 Mar 2008
Posts: 10
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
 Posted: Mon Mar 10, 2008 5:12 pm |
 |
|
|
| Before you can center this page, it needs some serious rework. Get rid of all the absolute positioning and deprecated styling elements to make it flow properly. Put all the content in a container that can be styled and centered. I'll give it a go later tonight. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Tue Mar 11, 2008 1:05 pm |
|
|
|
Here's what I came up with. I used a little javascript and the image paths will have to be changed to match your file structure. It is pure css and html. I have not validated the code because this is just to show you what needs to be done to get rid of the awful code being used. I styled it a little different from your layout but it can easily be changed. I also resized the product images to 325 X 280 to fit in the layout. The hourglass image needs to be combined with the header background image to make one image and make their heights the same. I tested in IE7, FF and Opera.
html
| Code: |
<body>
<div id="container">
<div id="header">
<h3>crystalux</h3>
<p class="world">world famous crystal</p>
<img class="rock" src="img/crystal3.jpg" alt="">
<p class="new">new</p>
<h2>trend</h2>
<h1>2008</h1>
<img class="clock" src="img/5clock.png" alt="">
</div> <!-- end header -->
<div id="content">
<div id="leftContent">
<div id="menu">
<ul>
<li><a class="first" href="index.html">Home</a></li>
<h4 class="first">Crystalux</h4>
<li><a class="second" href="index.html">Neclaces</a></li>
<li><a class="second" href="index.html">earrings</a></li>
<li><a class="second" href="index.html">bracelets</a></li>
<h4 class="first">Mixit beads</h4>
<li><a class="second" href="index.html">glass beads</a></li>
<li><a class="second" href="index.html">crystaletters</a></li>
<li><a class="second" href="index.html">birth stones</a></li>
<li><a class="first" href="index.html">Contact us</a></li>
<li><a class="first" href="index.html">Where to buy</a></li>
</ul>
</div>
<h3>Crystalux</h3>
<a href="http://crystaluxworld.com/cgi-bin/online/store.php">Online Store</a>
</div> <!-- end leftContent -->
<div id="rightContent">
<p class="title">New Arrival - Crystal Jewellery by Crystalux</p>
<p class="page"> Featuring top quality Full Cut Austrian Crystals</p>
<p class="title">Necklaces:<span>Page 1</span></p>
<div class="main">
<img class="captioned" style="margin-right:15px;" title="Tiffany style Crystal necklace...$59.00" src="img/VTR480NK.JPG" alt="">
<img class="captioned" title="3-d Crystal Cross...$50.00" src="img/PRI400NK.JPG" alt="">
<p class="clear"></p>
<img class="captioned" style="margin-right:15px;" title="Full Cut Heart Shape Crystal necklace...$55.00" src="img/STAR03-site.jpg" alt="">
<img class="captioned" title="Full Cut Heart Shape Crystal necklace...$59.00" src="img/STAR02-site-best.jpg" alt="">
<p class="clear"></p>
<img class="captioned" style="margin-right:15px;" title="Tapered Crystal Cross...$50.00" src="img/DMSN-site2.jpg" alt="">
<img class="captioned" title="Full Cut Teardrop Crystal necklace...$65.00" src="img/STAR04site.JPG" alt="">
<p class="clear"></p>
<img class="captioned" style="margin-right:15px;" title="Eternity Band Crystal Pave necklace...$49.00" src="img/RN01PV-site.jpg" alt="">
<img class="captioned" title="Tiffany style Heart Shape Crystal necklace...$49.00" src="img/TIF04NK.JPG" alt="">
<p class="clear"></p>
<img class="captioned" style="margin-right:15px;" title="Tiffany style Heart Crystal Pave necklace...$49.00" src="img/TIF04NK.JPG" alt="">
<img class="captioned" title="Lalique style Crystal necklace - Onyx...$75.00" src="img/DSC02849.JPG" alt="">
</div>
</div>
<div id="cleardiv"></div>
</div>
<div id="footer"></div>
</div> <!-- end container -->
</body>
</html> |
css
| Code: |
<style type="text/css">
/* commented backslash hack \*/
html, body {height:100%;}
/* end hack */
* html #container{height:100%;}
* {
margin: 0;
padding: 0;
}
body {
font-family: "Tahoma", Arial, Helvetica, sans-serif;
font-size: 1em;
text-align:center;
}
#container {
width:900px;
height:auto;
min-height:100%;
margin:0 auto;
text-align:left;
overflow:hidden;
}
#header {
height:190px;
background: url(img/center.png);
position:relative;
font-family:"Times New Roman", Times, serif;
height:1%;
overflow:hidden;
}
#content {
width:899px;
border-right:1px solid #6d4d0e;
background:url(img/sqgreysmallnew.png);/*this is the background colour of the left column */
background-repeat: repeat-y;
background-position: left top;
}
#leftContent {
float:left;
width:203px;
border-right:1px solid #6d4d0e;
}
#rightContent {
width:675px;
padding:10px;
float:left;
border-left:1px solid #6d4d0e;
margin-left:-1px;/* makes border line up with #left border */
}
#header h3 {
font-size:180%;
color:#fff;
float:left;
margin:60px 30px 20px 5px;
text-transform:uppercase;
}
.world {
float:left;
text-transform:uppercase;
margin:100px 0 0 -160px;
color:#000;
font-size:.88em;
font-weight:bold;
}
.rock {
margin:0 0 0 15px;;
float:left;
}
.new {
float:left;
text-transform:uppercase;
margin:60px 0 0 30px;
color:#000;
font-weight:bold;
}
#header h2 {
float:left;
font-size:210%;
margin:80px 0 0 0;
color:#666;
text-transform:uppercase;
}
#header h1 {
float:left;
margin:130px 0 0 30px;
color:#fff;
font-size:250%;
}
.clock {
position:absolute;
margin:0;
top:0;
right:0;
}
#menu {
width:203px;
height:410px;
background:url(img/left.png) no-repeat;
}
#leftContent ul {
list-style:none;
text-transform:uppercase;
width:150px;
float:right;
color:#666;
margin:60px 0 0 0;
}
#leftContent ul li {
display:block;
width:150px;
margin:2px 0 3px 0;
}
#leftContent ul a {
text-decoration:none;
}
#leftContent ul .first {
color:#666;
font-weight:bold;
text-align:left;
}
#leftContent ul .second {
color: #640;
font-weight:bold;
font-size:.75em;
margin-left:15px;
text-align:left;
}
#leftContent h3 {
text-align:center;
color:#999;
font-size:140%;
margin:40px 0 20px 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#leftContent a {
color:#FF0000;
display:block;
text-align:center;
}
.title {
font-size:1.2em;
color:#555;
}
.title span {
color:#000;
font-size:.88em;
margin-left:10px;
}
.page{
float:right;
font-style:italic;
}
#rightContent .main {
position:relative;
float:left;
background:url(img/sqgreysmallnew.png) top left;
}
#rightContent .main img {
margin-top:40px;
border-right:5px solid #999;
border-bottom:5px solid #999;
}
.caption{
font: normal 1em/1.3em arial;
background:#fff;
color:#000;
width:330px;
float:left;
position:absolute;
bottom:-18px; /* change to bottom for caption at image bottom */
left:0;
text-align:left;
color:#000;
font-size:.75em;
font-weight:bold;
font-family:tahoma;
border-bottom:1px solid #6d4d0e;
opacity:.75;
filter:alpha(opacity=85);
}
.clear {
height:20px;
font-size:10px;
clear:both;
}
#cleardiv {
height:10px;
clear:both;
}
#footer {
clear:both;
height:1px;
color: #fff;
}
.clearer{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
</style> |
This is the head section
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function captionizeImages() {
if (!document.getElementsByTagName) return false;
if (!document.createElement) return false;
var images = document.getElementsByTagName("img");
if (images.length < 1) return false;
for (var i=0; i<images.length; i++) {
if (images[i].className.indexOf("captioned") != -1) {
var title = images[i].getAttribute("title");
var divCaption = document.createElement("div");
divCaption.className="caption";
var divCaption_text = document.createTextNode(title);
divCaption.appendChild(divCaption_text);
var divContainer = document.createElement("div");
divContainer.className="main";
images[i].parentNode.insertBefore(divContainer,images[i]);
divContainer.appendChild(images[i]);
insertAfter(divCaption,images[i]);
}
}
}
addLoadEvent(captionizeImages);
</script>
</head> |
|
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Thu May 01, 2008 10:45 am thank you, man |
|
|
|
Thank you, Sticks
I cannot apply this yet - too complicated for me... I am going to study this subject this fall, taking corses... hope it will help to understand... it is very interesting and I want to know everything about it... be in touch,
)) |
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Sun May 18, 2008 2:16 pm Re: thank you, man |
|
|
|
I think I'm getting it now!
Trying to do the same with my front page:
www.crystaluxworld.com/Crystalux_Home.html
The only question I have - shall I place the CSS code page to the same "public" directory on my server where the index page and all the other pages of my site are?
And how should I call this page? Crystalux_Home.css or something??
Thank you again )) |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Sun May 18, 2008 5:01 pm |
|
|
|
You can put it in the root folder where your html page is or you can put it in a folder with a name of your choice. I generally put it in a folder called css. Then create a link on the html page in the head section to the css
| Code: |
If the css file is in the root folder
<link rel="stylesheet" type="text/css" href="main.css">
If it is in a folder named css
<link rel="stylesheet" type="text/css" href="css/main.css"> |
When you put the css on it's own page you will have to make a few changes so the images will work correctly. Add single or double quotes to the url link.
| Code: |
| background:url('header.jpg') no-repeat; |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
