私は今日、このウェブサイトの作業を開始しました。私はCSSが得意ではありませんが、かなり早く学んでいます。Google Fonts を使おうとしましたが、インデックス ページの先頭にコードを入れるとすぐに非常に奇妙なことが起こりました。
リンクが機能しなくなりました。コードを取り出し、スタイル シートからも削除しましたが、何らかの理由でリンクをクリックできません。私はそれを何時間もいじってみましたが、Google は確かな答えをくれませんでした。
私が得ることができるどんな助けにも本当に感謝しています。このサイトはhttp:goinggf.com/justin/index.htmlで閲覧できます。
これは私のhtmlです：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DeShepper Designs</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div id="header">
<div class="wrap">
<div class="logo">
<a href="index.html"><img src="images/headerlogo.jpg"></a>
</div>
<div class="menu">
<p><a href="gallery.html">Gallery</a> | <a href="graphicdesign.html">Graphic Design</a> | <a href="contact.html">Contact</a></p>
</div>
</div>
</div>
<div id="dividerimg"><center><img src="images/seperatorline.png"></center></div>
<div class="contentcontainer">
<div id="content">
<h1>Welcome to DeSchepper Designs</h1>
<p>Original artwork and graphic design images by Lindsey DeSchepper.
The majority of the paintings I do are created with acrylic medium on
canvas with various sizes and styles. The graphic design work was
created using Photoshop, Illustrator and Picture It.</p>
<p>I'm very passionate about art and enjoy the creative outlet. I
hope you like what you see and thanks for stopping by.</p>
<p align="right"><img src="images/signature.png"></p>
</div>
<div class="#content.prettyladypicture">
<p align="right"><img src="images/me-painting.jpg" height="338" width="284"></p></div>
</div>
<div id="redfootertop"></div>
<div id="footerred">
<div class="wrap">
© 2013 - DeSchepper Design </div>
</div>
<div id="footergray">
<div class="wrap">
COPYRIGHT CONTACT WHATEVER</div>
</div>
</body></html>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DeShepper Designs</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div id="header">
<div class="wrap">
<div class="logo">
<a href="index.html"><img src="images/headerlogo.jpg"></a>
</div>
<div class="menu">
<p><a href="gallery.html">Gallery</a> | <a href="graphicdesign.html">Graphic Design</a> | <a href="contact.html">Contact</a></p>
</div>
</div>
</div>
<div id="dividerimg"><center><img src="images/seperatorline.png"></center></div>
<div class="contentcontainer">
<div id="content">
<h1>Welcome to DeSchepper Designs</h1>
<p>Original artwork and graphic design images by Lindsey DeSchepper.
The majority of the paintings I do are created with acrylic medium on
canvas with various sizes and styles. The graphic design work was
created using Photoshop, Illustrator and Picture It.</p>
<p>I'm very passionate about art and enjoy the creative outlet. I
hope you like what you see and thanks for stopping by.</p>
<p align="right"><img src="images/signature.png"></p>
</div>
<div class="#content.prettyladypicture">
<p align="right"><img src="images/me-painting.jpg" height="338" width="284"></p></div>
</div>
<div id="redfootertop"></div>
<div id="footerred">
<div class="wrap">
© 2013 - DeSchepper Design </div>
</div>
<div id="footergray">
<div class="wrap">
COPYRIGHT CONTACT WHATEVER</div>
</div>
</body></html>
私のスタイルシートCSS:
/*This is my first real style sheet.*/
/*Reset Old Stuff*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
strong {
font-weight:bold;color:#333333;
}
em {
font-style:oblique;
}
p {
margin:15px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}
a:link {color:#333333;}
a:hover {color:#333333;}
/*Reset - Now Full Width*/
body {
background:#f5f5ed;
color:#333333;
font:13px Helvetica, Arial, sans-serif
}
.wrap {
margin:0 auto;
width:900px;
}
.contentcontainer {
margin:0 auto;
width:750px;
}
#header, #footer {
float:left;
padding:15px 0;
min-width:100%;
}
#header {
background:#f5f5ed;
}
#header .logo {
float:left;
min-height:auto;
}
#header .menu{
float:left;
margin-top:10px;
margin-left:33%;
min-height:auto;
}
#content {
clear:left;
float:left;
text-align:left;
margin-left:50px;
width:300px;
clear:both;
}
#content .prettyladypicture{
clear:both;
margin-right:auto;
float: right;
width: auto;
}
#dividerimg {
position:relative;
min-width:50%;
}
#redfootertop {
float:none;
margin:0 auto 0 auto;
min-height:50px;
max-width:900px;
background-image:url('images/redfootertop.png');
background-repeat:no-repeat;
}
#footerred {
clear:both;
background:#e64135;
text-align:center;
position:float;
}
#footergray {
background:#333333;
color:#FFFFFF;
text-align:center;
min-height:75px;
position:float;
bottom:0;
}
#footer a {
color:black;
}