2 replies [Last post]
brocknessmonsta
brocknessmonsta's picture
Offline
newbie
Philadelphia, USA
Last seen: 9 years 42 weeks ago
Philadelphia, USA
Timezone: GMT-5
Joined: 2013-02-12
Posts: 1
Points: 2

Hello,

Firstly, it might be important to know that I'm using CSS for my tumblr site.

For aesthetic reasons, I'd like to adjust the area of my header's background so that there's padding between it and the eges of the page and the top of the body. It currently butts up against all of them and it's not very pleasing to the eye. You can see how it looks here. I'd like to add about 10px around the entire header area.

I've tried changing the padding values (27, 0, 36, 27) but this only expands/contracts entire thing.

Here's the section of my code that has the heading.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
/*HEADER STYLES*/
 
#header{
	padding:27px 0 36px 27px;
	position:relative;
	text-align:left;}
#header{background-color:rgba(0,0,0,0.6);}
#header a{
	color:#fff;}
#header a:hover{
	color:#99cc00;}
#header h1 a{
	border:0;
	font-size:17px;
	line-height:18px;
	text-transform:uppercase;
	letter-spacing:.05em;}
#header ul li{
	display:inline;}
#header ul li a{
	border-bottom:0;
	margin-right:11px;
	line-height:18px;}
#header ul li a:hover{
	border-bottom:0px}
#portrait{
	width:54px;
	float:left;}

It's probably a quick and easy fix, but I've googled and can't find any results.

Any help is appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 40 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Fixed?

Did you fix it? If not, be more specific about the problem caused by adding padding. What you've got wouldn't expand the dimensions unless you had specified width and/or height.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You want to use margin not

You want to use margin not padding. Padding is internal to the element and any backgrounds applied to the element run to the elements box edge. Apply something along the lines of: margin: 37px 27px 27px;
top value is greater as you need to clear the tumblr controls positioned to the top of the viewport the other values match the margins of the content area, 2nd value represents the sides left/right third value represents the margin bottom.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me