CODEWITHSUNDEEP
csscss-position
czmudzin
czmudzin

Reputation: 299

How can I get my text to position at the top of my divs?

I have text located in each of my divs, but it's not located at the top of the div where I'd like it to be. I tried changing their position to fixed and using padding:0px; margin:0px; but neither of those worked.

Here is a JS Fiddle: http://jsfiddle.net/x3c7z4qn/

CSS:

body {
    height:97.54%;
    width:98.8%;
    background-color:#0C0C0B;
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='stylesheet2.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,700' rel='stylesheet' type='text/css'>
    <title>CDC</title>
  </head>
  <body>
    <div id='nw'>
      <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
      <p class='titletext'>News</p>
    </div>
    <div id='sw'>
      <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
      <p class='titletext'>Events</p>
    </div>
  </body>
</html>

Upvotes: 1

Views: 64

Answers (1)

Alex Char
Alex Char

Reputation: 33218

You can simple add margin: 0 to .titletext class cause default css settings for p element are:

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

so:

.titletext {
    text-align:center;
    font-family:'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
    margin: 0;/*Add margin 0*/
}


body {
    height:97.54%;
    width:98.8%;
    background-image:url('http://robinsunnepostcard.com/wp-content/uploads/2013/10/Robinsunne-11-OC-13-e.jpg');
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    font-family:'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
    margin: 0;
}
<body>
    <div id='nw'>
        <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
        <p class='titletext'>News</p>
    </div>
    <div id='sw'>
        <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
        <p class='titletext'>Events</p>
    </div>
</body>

Upvotes: 1

Related Questions