CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 10036

Reducing padding, beginner CSS

I'd like the navigation buttons at the top of the page I'm working on (see link at end of post) to be more like the image below, i.e. they should appear as tabs. I've tried changing padding and margins for several of the elements on the page but I've not had any luck yet. How can I eliminate the space between the "main" div and the nav bar? enter image description here

Here's the html and css I'm using to generate the page, with a JFiddle link at the bottom:

body {
	background-color: #090986;
}

#main {
	background-color: white;
	padding-left: .5em;
}

h1 {
	text-align: center;
	background-color: white;
}

#menu {
	text-align: center;
}

#menu li{
	display: inline;
	padding:4px 30px 0px 1px;
}

#menu a {
	color:#228;
	background:#bbb;
	padding:.1em .2em .2em .2em;
}

#menu li.current a{
	background: white;
}

abbr {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style1.css" />
</head>
<body>
<h1>Sample Menu Page</h1>

<ul id="menu">
  <li><a href="one.html">Page One</a></li>
  <li class="current"><a href="two.html">Page Two</a></li>
  <li><a href="three.html">Page Three</a></li>
  <li><a href="four.html">Page Four</a></li>
  <li><a href="five.html">Page Five</a></li>
</ul>

<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
  <li><abbr title="Cascading StyleSheets">CSS</abbr></li>
  <li>geese</li>
</ul>
<p>Actually, there isn't so much about geese.  I just wanted to use a <code>&lt;ul&gt;</code> there.</p>

<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess&hellip;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>
</html>

Upvotes: 0

Views: 64

Answers (2)

Oliver Fawcett
Oliver Fawcett

Reputation: 581

The main reason for the extra padding is that the #first <h1> has automatic padding on top (default styling for h1's), and also the <ul> has padding below. Removing both of these works. 

body {
	background-color: #090986;
}

#main {
	background-color: white;
	padding-left: .5em;
}

h1 {
	text-align: center;
	background-color: white;
}

#main #first { 
    margin-top:0 
}

#menu {
	text-align: center;
    margin-bottom:0;
}

#menu li{
	display: inline;
	padding:4px 30px 0px 1px;
}

#menu a {
	color:#228;
	background:#bbb;
	padding:.1em .28em .05em .1em;
}

#menu li.current a{
	background: white;
}

abbr {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style1.css" />
</head>
<body>
<h1>Sample Menu Page</h1>

<ul id="menu">
  <li><a href="one.html">Page One</a></li>
  <li class="current"><a href="two.html">Page Two</a></li>
  <li><a href="three.html">Page Three</a></li>
  <li><a href="four.html">Page Four</a></li>
  <li><a href="five.html">Page Five</a></li>
</ul>

<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
  <li><abbr title="Cascading StyleSheets">CSS</abbr></li>
  <li>geese</li>
</ul>
<p>Actually, there isn't so much about geese.  I just wanted to use a <code>&lt;ul&gt;</code> there.</p>

<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess&hellip;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>
</html>

Upvotes: 1

Chris Jaquez
Chris Jaquez

Reputation: 669

Try using the position property to carefully place elements, try adding this to your #menu li:

#menu li{
  position: relative;
  top: 18px;
  display: inline;
  padding:4px 30px 0px 1px;
}

Reference: http://www.w3schools.com/cssref/pr_class_position.asp

Fiddle: https://jsfiddle.net/b60z4jks/

Upvotes: 1

Related Questions