2014-10-10 39 views
0

好了,所以我只是用Web开发玩弄,我做我的个人网站只是为了得到经验。目前我有两个问题。图片的位置,并适当标记h1和h2元素

  1. 我有我的“关于”部分我似乎无法移动我的照片在中心,使半径100%。这真的很烦人,因为它不起作用。我已经把CSS border-radius:100%和Margin:0 auto;但没有工作。然后我尝试了Text-align:center;并没有奏效。

  2. 我有一个从“#section” ID延伸的实线边框。但我希望它不要掩盖我的页脚。在索引页它包括我不想页脚,但在我的其他网页喜欢,并联系它不包括页脚像我最初打算做的事。 也在我的头上我有一个H1和H3元素,可以回到我的主页。我的问题是,当我将鼠标从头向左或向右水平移动时,即使字母不在那里,仍然显示有链接。我想要链接结束单词结束的地方。

有人可以找出我做错了什么,我该怎么做才能避免它?

我会包括我的HTML索引页,那么关于页面,然后我的CSS。

索引页,我想排除在固体边界页脚。

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> 
     <title>Dalexis The Great Critic</title> 
    </head> 
    <body> 
     <header > 
     <a href="index.html" class="headersection"> 
      <h1>Dalexis Peguero</h1> 
     </a> 
     <a href="index.html" class="headersection"> 
      <h3>Designing Websites Since Last Month</h3> 
     </a> 
     <nav class="navsection"> 
      <ul id="nav"> 
       <li> 
        <a href="index.html" class="selected">Home</a> 
       </li> 
       <li> 
        <a href="About.html">About</a> 
       </li> 
       <li> 
        <a href="Portfolio.html">Portfolio</a> 
       </li> 
       <li> 
        <a href="Contact.html">Contact Us</a> 
       </li> 
      </ul> 
     </nav> 
     </header> 
     <div id="section"> 
      <section > 
      <div id="statement"> 
       <h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2> 
         <h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4> 
         <h4>Make them happy: We'll make sure your customers are all happy! </h4> 
      </div> 
      <div id="testimonies"> 
       <h2> Client Testimonies </h2> 
       <hr style="width:90%; /> 
       <p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p> 
        <h6>Home Town Loser </h3> 
       <hr style="width:90%; /> 
       <p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p> 
        <h6>MArvelous Marv</h3> 
       <hr style="width:90%; /> 
       <p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p> 
        <h6>Another Home Town Loser </h3> 
       <hr style="width:90%; /> 
       </div> 

      </section> 
     </div> 
     <footer> 
       <a href="http://facebook.com"><img src="IMG/facebook-logo.png" alt="facebook" class="socialicon"></a> 
       <a href="http://twitter.com"><img src="IMG/twitter-logo.png" alt="twitter" class="socialicon"></a> 
       <p>&copy Dalexis Industries </p> 
     </footer> 
    </body> 
</html> 

这是我的关于页面,我想要中心我的图片,使半径100%。

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> 
     <title>Dalexis The Great Critic</title> 
    </head> 
    <body> 
     <header > 
      <a href="index.html" class="headersection"> 
      <h1>Dalexis Peguero</h1> 
     </a> 
     <a href="index.html" class="headersection"> 
      <h3>Designing Websites Since Last Month</h3> 
     </a> 
     <nav class="navsection"> 
      <ul id="nav"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="About.html" class="selected">About</a> 
       </li> 
       <li> 
        <a href="Portfolio.html">Portfolio</a> 
       </li> 
       <li> 
        <a href="Contact.html">Contact Us</a> 
       </li> 
      </ul> 
     </nav> 
     </header> 



      <img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" > 
      <h3>About<h3> 
      <p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p> 
      <p> If you like to follow me on facebook you can find me at <a href="http://facebook.com/dalexis">Dalexis</a>. 
     </div> 
     <footer> 
       <a href="http://facebook.com"><img src="IMG/facebook-logo.png" alt="facebook" class="socialicon"></a> 
       <a href="http://twitter.com"><img src="IMG/twitter-logo.png" alt="twitter" class="socialicon"></a> 
       <p>&copy Dalexis Industries </p> 
     </footer> 
    </body> 
</html> 

CSS

body { 
     font-family: abel; 
    } 

    h1, h3 { 
     text-align:center; 
    } 

a { 
    text-decoration: none; 
    color: #373737; 
    } 

    ul { 
    list-style: none; 
    } 

    img { 
     max-width: 100%; 

    } 

html { 
    color: #373737; 
    background-image:url('bkg-blu.jpg'); 
} 
/****************************** 
HEADER  
***********************************/ 


} 

#nav li { display:inline; border-style:groove; } 
#nav {text-align:center; } 



/****************************** 
nav  
***********************************/ 


/****************************** 
SECTION 
***********************************/ 



#statement { 
      text-align: center; 
} 


    #testimonies { 
       text-align: center; 
    } 
section h2 { 
     margin: 0 20px; 
     padding: 0px 60px; 
    } 

    #section { 
      border-style:solid; 
      border-width: 1px; 
      width: 90%; 
      height: 100%; 
      padding: 5px 5px; 
      margin:15px 5px 15px 100px;  
    } 

    section div p img { 
       font-style:italic; 
       color: blue; 
    } 


.clients { 
    width: 40px; 
    height: 40px; 
    margin: 0 10px; 
    padding: 10px; 
    font-style: italic; 
} 
/****************************** 
footer 
***********************************/ 

.socialicon { 
    width: 20px; 
    height: 20px; 
    margin: 0 5px; 
} 

footer img { 

     margin: 0; 
     color: fff; 
     clear: both; 

    } 


    .selected, a:hover { 
      color: grey; 
    } 

    /****************************** 
    PAGE: ABOUT 
    /***************************/ 

    .about-photo { 
       width: 250px; 
       height: 200px; 
       display: block; 
       display: block; 
    margin: 0 auto 30px; 
    max-width: 150px; 
    border-radius: 100%; 

    } 
+1

查看问题的链接将有所帮助。 – markbernard 2014-10-10 17:57:36

+0

对我来说它的长相像你expexting什么:http://jsfiddle.net/webtiki/0g0zu7fn/(圆形图像 – 2014-10-10 18:01:31

+0

是的,这正是我在想什么!但不知何故,我不能让它 – 2014-10-10 20:06:48

回答

1

对问题的答案1.

更改此

<img src="IMG/dalexis.jpg" alt="my photo"> 

对此

<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div> 

CSS

.about-photo { 
    width: 250px; 
    height: 200px; 
    margin: 0 auto; 
} 
.about-photo img { 
    width: 100%; 
    height: 100%; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    border-radius: 100%; 
} 
+0

不知何故没有奏效。 :/ – 2014-10-10 20:06:14

相关问题