CODEWITHSUNDEEP
csshtml
Ali Arda Orhan
Ali Arda Orhan

Reputation: 784

h1 text overlapping border

I tried everyting to fit h1 text into its box and hopelessly i wrote it here now. I'm new to CSS and try build a basic resume cv for me. As you click link you will see the problem.

EDIT: my question was wrong set height of h1 tag to 65px solves problem. I wanted to know is there any way to wrap all TEXT with h1 tag box.

http://jsfiddle.net/uLmkw0oj

HTML CODE:

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/meyerreset.css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"
          rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <title>ShayHoweTutorials</title>

</head>
<body>
<nav class="navbar">
    <ul class="menu">
        <li><a class="btn btn-alt" href="aboutme.html">About Me</a></li>
        <li><a class="btn btn-alt" href="myworks.html">My Works</a></li>
        <li><a class="btn btn-alt" href="resume.html">Resume</a></li>
        <li><a class="logo" href="#top">LOGO</a></li>
        <li><a class="btn btn-alt" href="services.html">Services</a></li>
        <li><a class="btn btn-alt" href="#skills">Skills</a></li>
        <li><a class="btn btn-alt" href="skills.html">Contact Me</a></li>
    </ul>
</nav>
<div class="container clearfix">
<section id="content">
    <article class="article" id="top-content">
        <h1>Ali Arda Orhan</h1>
        <h2>Analyst Developer @Amadeus Turkey</h2>
        <a href="mailto:[email protected]">[email protected]</a>
        <div id="social-buttons">
            <img src="images/Facebook-icon.png">
            <img src="images/GitHub-icon.png">
            <img src="images/LinkedIn-icon.png">
            <img src="images/Twitter-icon.png">
            <img src="images/Skype-icon.png">
        </div>
    </article>
    <article class="article">
        <h3>About Me</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>My Works</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Resume</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Services</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Skills</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Contact Me</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>
    </article>
</section>
<footer id="main-footer">
    <small> ilk web sitem <a href="#top">Go to top</a></small>
</footer>
</div>
</body>
</html>

AND CSS

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.container {
    font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px auto;
    padding-left: 30px;
    padding-right: 30px;
    width: 960px;
    height: auto;
    color: #333;
}

.navbar {
    background-color: #5690e6;
    position: fixed;
    width: 100%;
    z-index: 0;
    opacity: 0.8;
    padding: 0;
}

.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    text-align: center;
}

.menu li {
    display: inline;
}

#top-content {
    padding-top: 140px;
    text-align: center;
    display: block;

}

#top-content h1{
    font-size: 65px;
    font-weight: bold;
    margin-bottom: 6px;
    display: block;
    border-bottom: 1px solid #000000;
    padding-top: 140px;
}


#top-content h2{
    display: block;
    font-size: 22px;
}

#social-buttons img{
    width: 5%;
    height: auto;
}

.article {
    padding: 30px 30px;
    clear: both;
}

.btn {
    display: inline-block;
    margin: 0;
}

.btn-alt {
    padding: 10px 30px;
}

.btn-alt:hover {
    background-color: #555555;
}

Upvotes: 1

Views: 529

Answers (1)

sinisake
sinisake

Reputation: 11328

Add line-height: 65px; to <h1> tag.

Upvotes: 2

Related Questions