PDA

View Full Version : Basic CSS HELP!!!!!!



lindseybaby812
03-08-2015, 01:19 AM
https://www.flickr.com/photos/[email protected]/16720236336/

i am trying to join my links together, so there is no white space in between them. how do i do this?? I have been working on this all day and am about to pull my hair out :eek::mad:

lindseybaby812
03-08-2015, 01:21 AM
ONE STYLE SHEET

/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 4

Gresham's Choir Style Sheet
Author: Lindsey Caillouet
Date: 3/5/15

Filename: gcc_styles.css
Supporting Files:

*/

/* Body Styles */

body {
background-color: white;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 1.4em;
}

/* Heading styles */

section h1 {
background-color: rgb(128, 128, 128);
color: white;
font-size: 1.7em;
line-height: 1.8em;
text-indent: 1em;
text-align: center;
}

h2 {
background-color: rgb(184,134,11);
color: white;
color: rgba(255, 255, 255, 0.8); /* Semitransparent color effect */
line-height: 1.8em;
text-indent: 1em;
text-align: center;
}

/* Navigation list styles */

nav.horizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}


nav.horizontal ul li a
{
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: rgb(128, 0, 0);
}

nav.horizontal ul li:first-of-type {
text-transform: uppercase;
} /* Applying a structural pseudo-class*/

nav.horizontal ul li a:hover
{
color: white;
background-color: rgb(205,133,63);
} /* Rollover effect*/

nav.vertical ul {
background-color: rgb(128, 0, 0);
line-height: 2em;
list-style-type: none;
padding-left: 0.5em;
text-align: center;
}

nav.vertical ul li:hover {
background-color: rgb(205,133,63);
} /* Rollover effect*/

nav.vertical ul li a {
color: white;
text-decoration: none;
}

footer address {
background-color: rgb(165,42,42);
color: white;
color: rgba(255, 255, 255, 0.8);
font: normal small-caps 0.8em/4em 'Times New Roman', Times, serif;
text-align: center;
}

SECOND STYLE SHEET
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 4

Gresham Layout Style Sheet
Author: Lindsey Caillouet
Date: 3/5/15

Filename: gcc_layout.css
Supporting Files:

*/

header, nav, section, aside, article, footer {
display: block;
}


/* Body Layout */

body {
width: 1000px;
}

/* Header Layout */

header {
width: 100%;
height: 120px;
}
* {xoutline: 1px solid green}

/* Navigation list */

nav.horizontal {
width: 76%;
}

nav.horizontal ul {
padding: 0px;
margin: 0px;
}

nav.horizontal li {
float: left;
list-style: none;
padding: 0px;
margin: 0px;
width: 20%;
text-align: center;
}

nav.vertical {
clear: left;
float: left;
width: 200px;
}



/* Section styles */

section {
border-right: 1px solid black;
float: left;
width: 39%;
}


/* Article styles */

article img {
width: 150px;
float: right;
margin: 15px;
}


/* Aside styles */

aside {
float: left;
margin-left: 15px;
width: 39%;
}


/* Footer styles */

footer {
clear: left;
border-top: 1px solid black;
}

VIPStephan
03-08-2015, 06:07 AM
Without seeing the HTML I don’t know which CSS rule applies to these links but I would suppose it is this rule that causes the spaces:


nav.horizontal ul li a
{
text-decoration: none;
padding: .2em 1em;




Change the “1em” to “0” (zero) and the space should be gone.

Old Pedant
03-08-2015, 07:25 AM
I don't think that's all of it, VIP. His vertical menu has a line-height of 2em and you can see that 2em is much smaller than the space between <a>'s (which would be 2em if the padding of each element is 1em).

Old Pedant
03-08-2015, 07:30 AM
Fixed it. There were a couple of problems:
-- The <ul> element was changed to a block element (display: block)
-- Both the <ul> and the <li> needed to be display: inline;
-- There was still a small space between <li> elements. That's because the code probably looked like

<ul>
<li><a>Home</a></li>
<li><a>News & Events</a></li>
... etc. ...
</ul>

But now there is WHITESPACE between each pair of <li> elements!

The sneaky trick? See here:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
nav.horizontal ul
{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
nav.horizontal ul li
{
display: inline;
}
nav.horizontal ul li a
{
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: rgb(128, 0, 0);
}

nav.horizontal ul li:first-of-type {
text-transform: uppercase;
} /* Applying a structural pseudo-class*/

.horizontal ul li a:hover
{
color: white;
background-color: rgb(205,133,63);
} /* Rollover effect*/

</style>
</head>
<body>
<nav class="horizontal">
<ul>
<li><a>home</a></li
><li><a>Contact</a></li
><li><a>Portfolio</a></li>
</ul>
</nav>
</body>
</html>

By the by, VIP, the padding in there is only padding of the <a> elements, INTERNAL to the display of each element. It makes the display readable.

Old Pedant
03-08-2015, 07:32 AM
Oh...should have mentioned:

The "trick" there works because once HTML sees the </li it will take any white space that follows, up to the >, as part of the tag. So what I am really doing there is the equivalent of


<li><a>home</a></li><li><a>Contact</a></li><li><a>Portfolio</a></li>

but made more readable.

lindseybaby812
03-08-2015, 04:29 PM
I tried everything you just said and still no changes.... :(