Need help about CSS codes


#1

Hi, i want to ask a question about something about my exercise.
I am currently on adding tables lesson on HTML/CSS Part 1.
I decided to make practises with the topics of previous lessons in order to check what i have learnt.
Below are the HTML codes:


<!DOCTYPE html>
<html>
<link href="C:\Users\TCK\Desktop\deneme\Ders13.css"type="text/css"rel="stylesheet">
<head>
<title>INI</title>
</head>
<body>
<h1>INI</h1>
<p class="para1">This is the exercise</p>
<div class="ini">
<p class="para2">How can i solve this problem?</p>
</div>
</body>
</html>


And below are the CSS codes for this HTML file:

body{
background-color:Black;
}

h1{
text-align:center;
color:Grey;
font-family:"Lucida Blackletter";
}

.para1{
text-align:center;
color:Brown;
font-family:"Lucida Blackletter";
}

.para2{
text-align:center;
color:Brown;
font-family:"Lucida Blackletter";
padding-top:300px;
font-size:100px;
}

div.ini{
background-image:url("file:///D:/TCK/Resimler/ini.jpg");
width:1024px;
height:723px;
margin:auto auto;
}


The problem is about when i want to add a font-size property to .para2 element the background-image is slipping down but without font-size property the background-image is not slipping but the .para2 paragraph element seems so small to read. In order to solve this problem i thought that i should add a box-sizing property to div, also i thought perhaps the font-size increased the width and height properties of its container. Now i'm stuck with this problem. Hope you understand my problem. Thank you.


#2

It's hard to give a solution without seeing what the webpage looks like.

All I can really suggest is try playing around with the margins and padding for para2 and the div until you reach something that works. Maybe try using px instead of auto in the div?


#3

Hi,
The below link is the first case of the page.

And the below link is the second case of the page.

As you can see at the second page, the image's position is different than the first one.
Ok. I will use px instead of auto in the div.
Edit: First i wrote 1 px to margin-top and auto to other margins. then i wrote 100px to margin-top and auto to other margins. But nothing changed.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.