2017-12-17 17 views
0

を消え、そしていくつかの小さなCSSの調整の後、体のための私の背景は表示されません。私は、リンクが壊れていたかどうかを確認するために無地の色に変更しましたが、ブラウザで開いたときには白くなるまでに半分の時間が表示されます。私は文字通りうんざりです。私のバックグラウンドはちょうどDreamweaverの使用を

私は私の背景が、そこに使用される固定及びその他のdivはそれの上に転がると同じように、それは、開始方法を特定することはできません。今はそれが醜い空白です。ここ

私のコードです:

rel="stylesheet">@charset "utf-8"; 
 
/* CSS Document */ 
 

 
.bodydiv { 
 
    background:red;url(Images/backgroundp1.jpg) ; 
 
    background-size: cover; 
 
    width:100%; 
 
    padding:0; 
 
    margin:0; 
 

 

 
} 
 

 
/* Font families : font-family: 'Cabin Sketch', cursive; 
 
font-family: 'Averia Sans Libre', cursive;* font-family: 'Special Elite', cursive;*/ 
 

 

 

 

 
.page1 { 
 
    margin-right: auto; 
 
    margin-left : auto; 
 
    width: 100%; 
 
    height:40em; 
 
    background-size:cover; 
 
    padding: 0; 
 
    margin: 0; 
 

 

 
} 
 

 

 
#me { 
 
    grid-column: 2; 
 
    display:block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: auto; 
 
    margin-top: 7em 
 

 
} 
 

 
h1{ 
 
    text-align: center; 
 
    font-size: 4em; 
 
    font-family: 'Cabin Sketch'; 
 
} 
 

 
p { 
 
    font-family: 'Special Elite', cursive; 
 
    line-height: 180%; 
 
} 
 

 
h3 { 
 
    font-family: 'Cabin Sketch'; 
 
    text-transform: capitalize; 
 
} 
 

 

 

 
.page1content{ 
 
    width: 800px; 
 
    height: 800px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 

 
.page2{ 
 
    background: url(Images/DSC04168.jpg) center center ; 
 
    background-size: cover; 
 
    height: 50em; 
 
    padding-bottom: -10; 
 
    margin-bottom: 0; 
 

 
} 
 

 
.page3{ 
 
    background: url(Images/DSC00472.jpg) center center; 
 
    background-size: cover; 
 
    height:50em; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 

 
.page4 { 
 
    display:grid; 
 
    grid-template-columns: 50% 50%; 
 
    height: 70em 
 

 
} 
 

 
.page4a { 
 
    grid-column: 1; 
 
    background: rgba(81,81,81,1.00); 
 
    color:rgba(198,198,198,1.00); 
 
    display: grid; 
 
    grid-template-columns: 15% auto 15%; 
 
    grid-template-rows: 15% auto 15%; 
 
} 
 

 
.aboutme { 
 
    grid-column: 2; 
 
    grid-row: 2; 
 
} 
 

 
.page4b { 
 
    grid-column: 2; 
 
    background: rgba(198,198,198,1.00); 
 
    color: rgba(81,81,81,1.00); 
 
    display:grid; 
 
    grid-template-columns: 15% auto 15%; 
 
    grid-template-rows: 15% auto 10%; 
 
} 
 

 
.form { 
 
    grid-column: 2; 
 
    grid-row: 2; 
 
} 
 

 
input[type], select{ 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px; 
 
    display: inline-block; 
 
    border 2px solid; 
 
    border-radius: 5px; 
 
    box-sizing: border-box; 
 
    background-color: rgba(81,81,81,1.00); 
 
    color: rgba(198,198,198,1.00) 
 

 
} 
 

 
input[type=text]:focus { 
 
    border: 2px solid rgba(81,81,81,1.00) ; 
 
} 
 

 
textarea{ 
 
    width: 100%; 
 
    height: 150px; 
 
    padding: 12px 20px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    background-color: rgba(81,81,81,1.00); 
 
    font-size: 16px; 
 
    resize: none; 
 
} 
 

 
input[type=submit] { 
 
    width: 33%; 
 
    background-color:rgba(198,198,198,1.00) ; 
 
    color: rgba(81,81,81,1.00); 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: 2px solid rgba(81,81,81,1.00); 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Cabin+Sketch|Special+Elite" rel="stylesheet"> 
 
    <link rel="stylesheet" href="s"> 
 
<meta charset="utf-8"> 
 
<title>Mrhuggies-portfolio</title> 
 
<link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 

 

 
<body> 
 

 
<div class="bodydiv">  
 

 
    <div class="page1"> 
 

 
     <div class="page1content"> 
 
       <img id="me" src="Images/pof2.png" width="600" height="370px" alt="Picture of Thomas Hughes"/> 
 
<h1>ThomasHughesPortfolio<br>WebDesigner/Photographer</h1> 
 
     </div> 
 
</div> 
 

 

 
    <div class="page2"> 
 

 
     </div> 
 

 

 
    <div class="page3"> 
 

 
    </div> 
 

 
    <div class="page4"> 
 

 
     <div class="page4a"> 
 
      <div class="aboutme"> 
 
       <h3>About Me</h3> 
 
       <p> Hello, I'm a 25 year old that goes by the name of Thomas Hughes, based in <b>Glagow</b>. I design UI/UX whlist writing all of my own code. I enjoy making something beautiful, functional and enjoyable to use and browse. Solving problems, <b>capturing beauty</b> and a keen eye for design is where my passions lie. 
 
        Adept at Photoshop, Dreamweaver and getting to grips with other programmes that Adobe Suit has to offer. 
 
        Feel free to get in touch with any free-lance <b>opportunities</b> or job proposals</p> 
 
       </div> 
 
     </div> 
 
    <div class="page4b"> 
 
     <div class="form"> 
 
     <h3><b>I want</b> to hear from you</h3> 
 

 
     <p>Want to talk about a job, see how I'm doing or maybe ask me out for a coffee?</p> 
 

 
      <form action=""> 
 
      <label for="name"></label> 
 
       <input type="text" id="name" name="firstName" placeholder="Your name..." 
 

 

 
       <label for="name"></label> 
 
       <input type="text" id="name" name="firstName" placeholder="Email..." 
 

 

 
      <label for="name"></label> 
 
       <textarea><input type="text" id="name" name="firstName" placeholder="Write your message in here..."></textarea> 
 

 

 
     <input type="submit" value="Send Message"> 
 

 

 

 

 
         </form> 
 

 

 
         </fom> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 

 
    </div> 
 
    </body> 
 
</html>

+0

'styles.css'ファイルを共有できますか? –

答えて

1

ここ

background:red;url(Images/backgroundp1.jpg); 

では "赤" の後にコンマではなくセミコロンがあるはずです:

background:red, url(Images/backgroundp1.jpg); 

それ以外の場合は、url(Images/backgroundp1.jpg);はそれ自体のための(意味のない)ルールです。

+0

私は、 cssはファイルへのリンクを無視し、代わりに背景を赤にします。どちらもうまくいきません、たとえ私が離れてURLを取る –

関連する問題