The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> I need help removing a space in my page.
piotr
post Feb 10 2021, 05:41 AM
Post #1





Group: Members
Posts: 1
Joined: 10-February 21
Member No.: 27,783
Hi, I am having a problem with my code. Its my 2nd project so im still pretty amateur. I tried setting the margins to 0 on each element. If someone could help me out i would really appreciate it. Thanks
_______________________________________________________________________
My HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lochquarry outdoor centre</title>
<link rel="Stylesheet" href="Styles.css">
</head>


<body>
<div id="container">
<img src="banner.png" alt="banner" class="banner">

<header class= "bar">
<ul class="nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="activities.html" class="active">Activities</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
<li><a href="reviews.html" class="active">Reviews</a></li>
</ul>
</header>
</div>
</body>
</html>

My CSS
_______________________________________________________________________________
@charset "utf-8";

body{
margin: 0;
padding: 0;
}



/* CSS Document */
.nav{
list-style-type: none;
margin:0;
padding:0;
background-color: darkgreen;
overflow: hidden;
}

.nav li a {
background-color: #363434;
display: inline-block;
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:none;
font-size: 17;
margin: 0;
}
.nav li a.active {
background-color: #413C3C;
color: white;
margin: 0;



}
#banner {
margin: 0;
padding: 0;
}
.nav li a:hover{
background-color: darkgreen;
font-weight: bold
}


#container{
margin: 0 auto;
width:1024px;
padding: 0 auto;

}

Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The_webmaster
post Feb 10 2021, 08:31 AM
Post #2


Member
***

Group: Members
Posts: 40
Joined: 5-February 21
Member No.: 27,773
If the space also contain inside the background then remove or reduce the padding on the css

This post has been edited by The_webmaster: Feb 10 2021, 08:38 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2021, 09:27 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It's because of the image. Images are inline elements and "stand on the line" just like words. That means that line height comes into play and space is reserved for the descenders on letters like g and p. You can google for different solutions, but in your case it'll work to simply make the image display: block. At least with what you have now.

You can see it happens with something simple as this.
CODE
<div style="background: red"><img src="https://htmlhelp.com/icon/wdglogo.gif"></div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2021, 09:32 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(The_webmaster @ Feb 10 2021, 02:31 PM) *

If the space also contain inside the background then remove or reduce the padding on the css


He has already done that, as he said in his post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 08:13 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC