How Can i make my paddling thinner?

St4nley

St4nley

Member
Apr 13, 2013
469
76
Hey i'm trying to make a top banner with text in it. When i had no text the paddling was perfect size but after i inserted the text it made it much thicker. heres how it is now
i would like the black to much thinner and heres my code
Code: 
body{
background-color:#00FFFF;
margin: 0 auto;
}
 
.title{
padding:1px;
background-color: #000000;
align:center;
border-radius: 2px;
}
 
#titletext{
font-size:50px;
font:Times New Roman;
position:center;
left:50px
top:0px;
text-align:center;
text-shadow: #ff0000 20px 30px 2px;
}
btw i have bad name choosing so .title is the black banner and titletext is the text yeah, but whenever i make the paddling a negiative to make the banner thinner it just turns out messed up.
 
heres my html code if you wanna try and fix it yourself and need to play with it
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Practice - Home</title>
</head>
<body>
<div class="Title">
<div id="titletext">
<font color="#FFFFFF"><p>Practicing My CSS!</font>
<div id="logo">
<a href=
</div>
</div>

Thanks!
edit: forgot to add picture of what it looks like now
eimfdc.png
 
Sort by date Sort by votes
Markshall

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,638
2,393
Don't forget that padding 'pushes' the inside of an element to effectively make it appear larger, so don't forget to adjust your width and height when settings padding. Obviously you've set the width to 100% because that is clearly the effect you want to achieve so you'll have to modify your height on .title
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Like Mark just said, as he beat me to posting it, provide a height for you .title attribute.

Try something like this

Code: 
.title{
height:80px;
width:100%;
background-color: #000000;
align:center;
border-radius: 2px;

Notice how the padding has gone and you now have a fixed height that will stay the same unless you add padding. Width is 100% so that at every screen resolution it goes across the entire width of the screen. Also, play around with the height to suit your needs.

Hope this helps, if not just ask again.
 
Upvote 0 Downvote
St4nley

St4nley

Member
Apr 13, 2013
469
76
I achieved the desired height of that banner element thanks to both of you, but now i have this
j169vq.png

its not at the very top as i would like it to be. although if i add
padding-top:1px;
to the .title line of code i receive kind of what i would like but not quite there yet.
20pdlj.png


and i know there is much a professional way of getting what i would like, but unfortunately i dont know what it is. And i would rather learn to do something right then wrong but look right. If you could help me with this i would appreciate it. Thanks!
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Stanleh said:
I achieved the desired height of that banner element thanks to both of you, but now i have this
j169vq.png

its not at the very top as i would like it to be. although if i add
padding-top:1px;
to the .title line of code i receive kind of what i would like but not quite there yet.
20pdlj.png


and i know there is much a professional way of getting what i would like, but unfortunately i dont know what it is. And i would rather learn to do something right then wrong but look right. If you could help me with this i would appreciate it. Thanks!
Click to expand...

To your .title class in your css add the following to it:

Code: 
overflow:hidden;

Let me know if that works.
 
Upvote 0 Downvote
Alam

Alam

shietttt
Jul 3, 2011
433
166
Replace the height of your title with this code, you can keep adding on padding if it's needed but it's a more styled way for content inside your header to fit in properly.
Code: 
padding-top:30px;
padding-bottom:30px;

Also, I wouldn't recommend using top:0, and such. just use CSS reset for standard settings and it's quite easier and less messy.

Copy & paste this to your CSS stylesheet
You must be registered for see links
/

It would automatically set headers and such to the top.
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top