CODEWITHSUNDEEP
htmlcss
Berisko
Berisko

Reputation: 643

Text position with "position: absolute"

I'm having a trouble with text positioning. I use "h6" as title for information block. I would like to make from top and left side a 10px gap but I can't make 10px gap from top, thers more than 10px. Left side is fine.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Sākums</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="log_me">
            <div class="log_inf">
                <div class="log_inf_titl"><h6>Uzmanību!</h6></div>
                <div class="log_inf_tex"><p>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

@font-face {
    font-family: OpenSans-Regular;
    src: url(font/OpenSans-Regular.ttf);
}

body {
    background: #f2f2f2;
}

.log_me {
    background: #fff;
    border: solid 1px #e4e4e4;
    height: 211px;
    width: 300px;
    position: absolute;
}

.log_inf {
    border: solid 1px #f2f2f2;
    background: #fff;
    height: 70px;
    width: 278px;
    position: absolute;
    top: 10px;
    left: 10px;
}

h6 {
    font-family: OpenSans-Regular;
    font-size: 11px;
    color: #707070;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
}

p {
    font-family: OpenSans-Regular;
    font-size: 11px;
    color: #707070;
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: normal;
    display: block;
}

.log_inf_titl {
    position: absolute;
    top: 10px;
    left: 10px;
}

.log_inf_tex {
    position: absolute;
    top: 23px;
    left: 10px;
}

Thankyou, Ričards.

Upvotes: 2

Views: 589

Answers (3)

gdeleon101
gdeleon101

Reputation: 98

Not sure why you had the absolute positioning, but use this css. 

@font-face {
font-family: OpenSans-Regular;
src: url(font/OpenSans-Regular.ttf);
}

body {
background: #f2f2f2;
}

.log_me {
background: #fff;
border: solid 1px #e4e4e4;
height: 211px;
width: 300px;
padding:10px;
}

.log_inf {
border: solid 1px #f2f2f2;
background: #fff;
height: 70px;
padding:10px;
}

h6 {
font-family: OpenSans-Regular;
font-size: 11px;
color: #707070;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
}

p {
font-family: OpenSans-Regular;
font-size: 11px;
color: #707070;
margin: 0;
padding: 0;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
display: block;
}

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

I would advise you to rethink your design, as a "gap" is commonly achieved by padding and margin.

But, addressing your specific problem, since you changed the default size of the h6 font, adjust also the line-height:

h6 {
    font-family: OpenSans-Regular;
    font-size: 11px;
    line-height: 11px;
    /* ... */
}

Upvotes: 2

Roman
Roman

Reputation: 3941

Well that code is really not best practise, using so much position:absolue; is bad. I would recommend that you try and fix your code and use padding:10px for your need.

But it will also work with your code, you need to move your text by 10px more from top and also increase the height of the div with the border.

See Fiddle

Upvotes: 1

Related Questions