Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ it looks fine in Dreamweaver

Posted by: AlexKidd Feb 22 2011, 11:24 PM

the online site is located at: inmiracleworld.com

Code for pages follows:

CSS sheet

#right { width: 300px; float: right}
#left { width: 300px; float: left}

.page_container {
padding: 0px;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.bannerArea {
margin: 0px;
padding: 0px;
height: 140px;
width: 760px;
background-image: url(/for%20photoshop/Banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.contentArea {
margin: 0px;
width: 735px;
padding-left: 25px;
background-image: url(/for%20photoshop/template/images/images/images/page-tile.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
float: none;
}
body {
background-repeat: repeat-y;
background-position: 0px 0px;
background-color: #000;
background-image: url(/for%20photoshop/template/images/images/images/page-tile.jpg);
}
.left {
width: 360px;
margin-right: 300px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
padding-left: 50px;

}
.specialisation {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
color: #FFB366;
padding-left: 50px;
}
.right {
width: 240px;
margin-left: 310px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333;
font-style: italic;
}
.myname {
color: #689F9C;
font-weight: bold;
padding-left: 50px;

}
.floatingText {
color: #713800;
}
.floatingText {
font-size: 10px;
}
.floatingTextMain {
color: #713800;
.underpic {
font-family: Arial, Helvetica, sans-serif;
}
.underpic {
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #F7B553;
padding-left: 50px;
}
.contentArea #right .specialisation em {
color: #000;
}

.headInfluences {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #F7B553;
padding-left: 50px;
}
.excerpt {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
color: #000;
padding-right: 50px;
}
.footer {
background-image: url(/for%20photoshop/template/images/page-bottom.jpg);
height: 60px;
width: 760px;
}
.saucy {
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
padding-right: 0px;
padding-left: 32px;
}
index

<!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>Alex Kidd - author and artist</title>
<link href="/new.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('/for photoshop/buttons/buttondown copy.jpg','/for photoshop/buttons/buttondown artblog.jpg','/for photoshop/buttons/buttondown writing.jpg','/for photoshop/buttons/buttondown contact.jpg')">
<div class="page_container">
<div class="bannerArea"></div>
<div class="contentArea"><div id="left"><p></p>
<p class="myname">Alex Henry Ginsberg Kidd</p>
<p class = "left"><img src="/for photoshop/out in the wilderness copy copy.jpg" width="285" height="383" /></p>
<p class="underpic">"Yesterday I slept, I did not want fame. Rich sounded nice. Simply a way to get things, nice things. In that same blue vein ran sports and falling. <br />
Scrapes and painful swelling. I desired flight. To repeat a pleasing action. To win."</p>
<span class="underpic"><span class="underpic"> - Alex</span>
</span></div>
<div id="right"><p class="quote"></p>
<p align="center">� </p>
<p align="center">�</p>
<p align="center"><a href="/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('index','','/for photoshop/buttons/buttondown copy.jpg',1)"><img src="/for photoshop/buttons/buttonup copy.jpg" name="index" width="67" height="67" border="0" id="index" /></a><a href="http://bug1879.blogspot.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Art Blog','','/for photoshop/buttons/buttondown artblog.jpg',1)"><img src="/for photoshop/buttons/buttonup artblog.jpg" name="Art Blog" width="67" height="67" border="0" id="Art Blog" /></a><a href="/writingpage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Writing','','/for photoshop/buttons/buttondown writing.jpg',1)"><img src="/for photoshop/buttons/buttonup writing.jpg" name="Writing" width="67" height="67" border="0" id="Writing" /></a><a href="/contactpage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','/for photoshop/buttons/buttondown contact.jpg',1)"><img src="/for photoshop/buttons/buttonup contact.jpg" name="contact" width="67" height="67" border="0" id="contact" /></a></p>
<p>�</p>
<p><span class="left">Author</span> </p>
<p class="saucy"><em>fantasy fear and violence novels with scientific speculation, urban poetry and philosophical ponderings</em></p>
<span class="left">Artist</span>
<p class="saucy"><em>Environment design for games, installation art, game character design</em></p></div>
</div>
</div>
</body>
</html>

Posted by: Barons Feb 22 2011, 11:30 PM

What do you mean not recognizing your CSS styles? It's showing up to me.

Is there one part of your code that not showing up?

Posted by: AlexKidd Feb 22 2011, 11:59 PM

QUOTE(Barons @ Feb 22 2011, 11:30 PM)

What do you mean not recognizing your CSS styles? It's showing up to me.

Is there one part of your code that not showing up?

The text is too big and the wrong colour - I specified orange 9px italics for the text under the picture. and 10px black italic for the text under occupations.

.underpic, .saucy, .headInfluences - aren't being applied.

Posted by: pandy Feb 23 2011, 12:11 AM

Fix this.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Finmiracleworld.com%2Fnew.css

Posted by: Darin McGrew Feb 23 2011, 01:06 AM

The online tools report markup and CSS errors:
http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Finmiracleworld.com%2F&warnings=yes
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Finmiracleworld.com%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

To me, it looks like the CSS error is the cause of the problem you observe.

Posted by: AlexKidd Feb 23 2011, 01:29 AM

the code is probably still full of bugs, because I'm not really good enough yet to figure them all out. But I fixed the text styles by altering the style of the div text. And I fixed the background by adjusting the size of the original tile to 950px wide.

When I have time I may adjust the header to 950px wide and make the tile vertically identical. For now I'm happy with it. Thanks everyone for all of your responses.

Posted by: pandy Feb 23 2011, 08:36 AM

Why didn't you fix the one CSS error you had that really was the problem? Now you have two more errors instead.