The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem with format when using strict doctype, please help.
Traversalan15
post Oct 25 2012, 10:30 AM
Post #1





Group: Members
Posts: 9
Joined: 17-October 12
Member No.: 17,962



Hi Iv been having a problem with my html code and I'd really appreciate some help.
Every time I use the strict doctype the links I'v created on the page change their format that Iv set.
They all go blue underlined and line up underneath each other. Here Is the html code and i'll put the css code underneath also.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="software.css" />
<title>Photography Software</title>
</head>



<body>

<div id="PageTitle">Photography Software</div>
<div id="headerSubtext">Review and Comparrison Site</div>


<div id="page">
<!-- give the correct destination for the href link in the next few lines-->
<div class="topOfPage"><a href="Home">Home</a></div>
<div class="topOfPage"><a href="Link">Link</a></div>
<div class="topOfPage"><a href="Link">Link</a></div>
<div class="topOfPage"><a href="Contact">Contact</a></div>
</div>


<div id="box">
<img src="C:\Users\Alan\Desktop\College Work\HTML\Project Website, software comparison site\website template\photoshop.jpg" alt="Photoshop" height="343" width="676">
</div>

<div class="contentBox">

<!-- Enter the name of product in the next line-->

<div class="contentTitle">Photoshop Cs6</div>

<!--Enter any info between the paragraphs below-->

<div class="contentText"><p>As the industry-standard, Photoshop
skills are a necessity if you want to be employable in the graphic
design field. Priced in the hundreds and with a learning curve to
match, it's not for everyone, but the investment can pay off in
increased productivity and the ultimate in flexibility. Since
Creative Suite 3, Photoshop comes in a Standard version as well
as an Extended version with specialized tools and features for the
video, engineering, architecture, manufacturing, science, and medical
fields.</p><br />
<p></p><br />
<p>The first thing you notice about Photoshop CS6 is its new interface.
You now have the choice between four base colours, from near-black to
pale grey - so Photoshop can look more like Lightroom if you choose.
Everything has been subtly tweaked, from the hundreds of redesigned icons
(the Pen and Lasso tools now indicate their active hotspots more clearly)
to a crisper, more consistent layout.</p></div>

</div>

<div id="footer"><p> Designed by Alan Travers, Harry Horsman, Michael gielty</p>
</div>

</body>
</html>



CSS:


body
{
text-align: left;
font-family:"calibri", calibri, "calibri";
font-size: 12px;
background-color: #014D5D;
}
*
{
margin: 0 auto 0 auto;
text-align:left;
}

#page
{
height:20%;
position: relative;
width: 40%;
}

.TopOfPage
{
text-align:center;
position:relative;
margin-top:15%;
font-size:15px;
width:24%;
float:left;
font-family:"calibri";
}


.TopOfPage a
{
text-decoration:none;
color:#CDE2FC;
}

#box
{
width:50%;
height:51%;
background-color:#FFFFFF;
}

#PageTitle
{
position:relative;
top:5%;
left: 4%;
font-size:30px;
color:#A9C8FA;
font-family:"calibri";
}

#headerSubtext
{
position:relative;
top:7%;
left:4%;
font-size:20px;
color:#A9C8FA;
font-family:"calibri";
}

.contentBox
{
width:50%;
height:auto;
background-color:#FFFFFF;
margin-top:3%;
}

.contentTitle
{
font-size:30px;
padding-top:3%;
margin-left:3%;
}

.contentText
{
font-size:13px;
line-height:150%;
margin-left: 10%;
margin-right:10%;
}


#footer
{
width: 20%;
height:2%;
text-align:center;
font-size:11px;
font-family:calibri;
color:#ffffff;
}


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th April 2024 - 11:16 PM