HTML/CSS positioning and spacing

Question

I'm new to coding and have been using this resource for a while, but this is my first question!

Here is a link to the webpage in question: http://www.andrewkennedy.ie/

I have included the bright background just to make it easy to see where the different elements begin and end.

I want to know how to get rid of the white space inbetween the elements (the margins and padding are set to 0) and also how to take the contents of the Blue section, and drop them down to the Green section, without affecting the central position of my name. In other words, I'd like my name exactly as it is - in the center - and then the Vertical menu with 'Email' and 'LinkedIn' to appear inline with it, on the far right side of the window.

Here is my html:

<div id="header">
    <div id="contact_menu">
        <ul>
            <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
            </li>
            <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
            </li>
        </ul>
    </div>
    <div id="title">
         <h1><span>A</span>ndrew <span>K</span>ennedy</h1>

    </div>
    <div id="nav">
        <ul>
            <li><a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
            </li>
            <li><a href="http://www.google.ie/" target="_blank">Google</a>
            </li>
            <li><a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
            </li>
            <li><a href="http://www.bing.com/" target="_blank">Bing</a>
            </li>
        </ul>
    </div>
</div>

And an abridged version of my CSS (irrelevant pieces omitted):

/* Title CSS*/
 #title {
    background-color: #00ff00;
    color: #000000;
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40px;
    text-align: center;
    letter-spacing: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Contact Menu CSS */
 #contact_menu ul {
    text-align: right;
    list-style-type: none;
    margin: 50px 50px 0 0;
    padding: 0;
}
#contact_menu ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: right;
    width: 100px;
    font-weight: 400;
}
/* Navigation Menu CSS */
 #nav ul {
    background-color: #ff0000;
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav ul li {
    display: inline;
}
#nav ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 200px;
}

Any help would be much appreciated. Thanks for the time.

Andrew

jumbopap · Answer 1 · 2014-07-06T02:15:13.320

You placed elements in the h1 tag. h1 has a natural margin imposed by the browser. You shouldn't be wrapping elements in an h1 tag anyway. Change it to a div with no margin and the whitespace will disappear.

The ul wrapping the contact info can be placed in the parent wrapper of "Andrew Kennedy" (after you change it from an h1). Add "position:absolute" to the ul and you can position it using the "left" property.

Here's a reworking of the title div. The inline css should naturally be placed in the stylesheet, this is just for demonstration purposes.

<div id="title">
    <div style="font-size: 50px;"><span>A</span>ndrew <span>K</span>ennedy</div>
    <ul style="position:absolute;font-size: 12px;right: 10px;margin-top: -40px;text-align: left;">
        <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a></li>
        <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a></li>
    </ul>
</div>

score 0 · Answer 2 · answered Jul 06 '14 at 03:08

Like the other user said, you have placed your name inside of an h1 tag. These tags come with margin inside of them already, they are to be used on pages with lots of room and can be good for things like article titles. For your situation you can either remove the h1 tags and just replace them with paragraph tags (styling them however you want), or you can change the margin for h1. In your CSS, you can change the margin on h1 tags to customize the site to look however you want.

This would look something like this

.h1 {
margin-top:0px;
margin-bottom:0px;
}

score 0 · Accepted Answer · answered Jul 06 '14 at 03:09

Your code definitely needs work. Here's the fiddle with my optimizations and comments: http://jsfiddle.net/QJcsB/.

There are still redundancies left in the code and I'll let you work these out.

Updated HTML:

<div id="header">
    <ul id = "contact_menu">
        <li>
            <a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
        </li>
        <li>
            <a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
        </li>
    </ul>
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1>
    <ul id = "nav">
        <li>
            <a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
        </li>
        <li>
            <a href="http://www.google.ie/" target="_blank">Google</a>
        </li>
        <li>
            <a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
        </li>
        <li>
            <a href="http://www.bing.com/" target="_blank">Bing</a>
        </li>
    </ul>
</div>
<div id="main">
    <img src="http://placehold.it/500x300" />
</div>
<div id="footer"></div>

And, CSS:

/* It is a good practice to use one of the reset css files.  
For more info see http://www.cssreset.com/ */

* {
    margin: 0;
    padding: 0;
}

/* Color code #fff is a valid abbreviation of #ffffff */

body {
    background-color: #fff;
}

/* There is really no need to wrap h1 tag in a div tag.  The h1, 
by default is a block element and you can just assign an id to it and 
access it directly. */

#title {
    background-color: #0f0;
    color: #000;
    /* font-weight, font-size, line-height, and font-family were 
    combined into font declaration */
    font: bold 45px/1.5 'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-align: center;
    letter-spacing: 5px;

    /* width of 100% is not necessary, because h1 is a block and 
    spans the entire width of its parent by default.  The margin 
    and padding of 0 were deleted also, because these are specified 
    in a mini-reset up top. */
}

/* Your first and last names were surrounded by span elements.  
To invoke ::first-letter pseudo-element on these, the spans are displayed 
as inline-block */

#title > span {
    display: inline-block;
}

#title > span::first-letter {
    color: #900;
}

/* Same as with h1, there is no need to wrap an unordered list in a div.  
The ul, by default, is also displayed as a block */

#contact_menu {
    background-color: #00f;
    list-style-type: none;
    text-align: right;
}

/* the list items are displayed as inline-blocks, which makes them stack 
horizontally while still allowing us to change their dimensions.  Unlike 
floats, inline-blocks will not break the structure and do not require 
clearing */

#contact_menu > li {
    display: inline-block;
}

#contact_menu > li > a {
    /* Anchors (a), by default, are inlines.  Changing their display 
    to block allows changing their dimensions. Instead of setting width 
    explicitly, the line-height and padding are used.  Anchors do not 
    take a line to themselves, because they are wrapped in inline-block 
    list items */    
    display: block;
    font: normal 30px/1.5 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 5px;

    /* text-align was deleted because it was specified on the level of 
    the ul and because li are inline-blocks, they wrap around the content 
    of their children, so doing text alignment within these is moot.  width 
    was deleted as well because it is implicitly set through padding*/
}

/* the entire chain in the selectors should be typed out.  :hover pseudo-class 
is removed, because unless you are changing styles due to hovering, they'll 
stay the unchanged */

#contact_menu > li > a:link, 
#contact_menu > li > a:visited, 
#contact_menu > li > a:active {
    color: #777;
}

#nav {
    background-color: #f00;
    list-style-type: none;
    text-align: center;
}

#nav > li {
    display: inline-block;
}

#nav > li > a {
    display: block;
    font: normal 30px/1.2 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 10px;
}
#nav > li > a:link,
#nav > li > a:active,
#nav > li > a:visited {
    color: #777;
}

/* I also removed the div surrounding your image */

Thanks a lot for the advice - you clearly went out of your way to help out. I've taken a lot on board about general coding style and can follow along with the specific changes you've made. Can I ask, what is the purpose of writing the font-size as, say 20px/1.5? The 20px I understand, but what is the meaning of /1.5? — user3808730, Jul 07 '14 at 04:12
You are welcome. The unitless number after the forward slash sets the line-height to 1.5 times the font-size. That's one of the ways to set height of the element. You can also use units (i.e., 20px/30px), but if the dimensions are to be kept the same, then unitless number is a good way to go. If code needs to be changed as it is often the case, then all you need to do is change font-size and line-height adjusts to scale. Cheers. — DRD, Jul 07 '14 at 04:24

HTML/CSS positioning and spacing

3 Answers3