A few newb questions.

[thommas]

Hi,

i’ve got a few questions to you web wizards out there. I’m administering my local football team’s web site and I would like to make a few changes to the theme.

Our web page: http://www.hammersborgfk.com

1. How do I get a menu/header like theirs: http://www.lommedalenfk.com/. Like it goes all the way from left to right, rather than having it centered. And how to I add that white field all the way at the top, and finally how do I add a little colored line under the black navigation bar like Lommedalen have?

2. How do I change the fonts?

3. How do I remove the small line between the menu items it’s a “|” i want to remove.

Thanks guys :)

Modify message

[Paulie_D]

1. All of the current ‘content’ is inside a #wrapper div with a set with of 994px. For a header to be full width it needs to be outside of that wrapper. You can still center everything inside if you want though like this:

   http://codepen.io/Paulie-D/pen/oGKtA

2. That’s a little more complicated. Do you want to use generic fonts available to most computers or a special font you picked yourself?
3. The | isn’t actually a character…it’s a border (actually 2)

   menu li {
   
   float: left;
   display: block;
   position: relative;
   border-right: 1px solid #1a1a1a; /* here */
   border-left: 1px solid #666; /</em> here */
   z-index: 98;
   }

[thommas]

1. Yes, I want the header and menu bar to be at 100% width and the content to still be centered. Thanks!

2. I want to use a web font maybe. Just a more eye pleasing font.

3. Oh, OK. So I just set it as 0px then and it will disappear?

Thanks Paulie!

[Paulie_D]

Regarding the webfont, find the one you like and most suppliers will tell you how to add it to your page’s code etc.

For the border, yes, setting it to 0 should do it…or you could just comment it out (so you can always see what it was in case you need to put it back.

Like this

menu li {
//border-right: 1px solid #1a1a1a;
//border-left: 1px solid #666;
}

[thommas]

Ok, so i’m not really sure how to fix the first part of my problem. 100% width on the header and menu. Here’s my coding. Do you think you could give me some pointers, and I understand if this is too much. THanks anyways:

#wrapper {
    width: 994px;
    margin: 24px auto 0;
    background: #fff;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
}
#header {
    position: relative;
    background: #f0f0f0 repeat-y center center;
    min-height: 140px;
    padding-left: 16px;
}
#header #logo {
    padding: 6px 12px;
    background: transparent;
    border: none;
    float: left;
}
#header #logo img {
    margin-top: -24px;
}
#header #maintitle {
    float: left;
    margin-top: 32px;
}
#header #maintitle h1 {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    font-size: 45px;
    line-height: 55px;
    color: #333;
    text-transform: uppercase;
}
#header #maintitle h1 a {
    color: #333;
    padding-left: 15px;
}
#header #maintitle h2 {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #dd0000;
    font-weight: normal;
}
#header #maintitle h2 a {
    color: #dd0000;
    padding-left: 16px;
}
#header #sponsor {
    float: right;
    margin: 16px 16px 16px 0;
}

/* HEADERS */

h1, h2, h3, h4, h5 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    margin: 0 0 0.5em;
}
div.entry-title,
div.page-title,
h1.entry-title,
h1.page-title {
    margin: 0;
    padding: 16px 28px;
    height: 24px;
    line-height: 24px;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(0,0,0,0)),
        color-stop(1, rgba(0,0,0,0.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.1) 100%
    );
    border-bottom: 1px solid #ccc;
    border-color: rgba(0,0,0,0.2);
}
.entry-title h1,
.page-title h1 {
    font-size: 24px;
    float: left;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 22px;
}
h4 {
    font-size: 20px;
}
h5 {
    font-size: 18px;
}
.post-date {
    font-weight: bold;
    font-size: smaller;
}
.entry-title .post-date, .page-title .post-date {
    float: right;
}

/* Alignment */

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.625em;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 1.625em;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

[Paulie_D]

Perhaps you could make a reduced case in Codepen.io but basically it will involve moving element in your HTML.

If you are comfortable with that then it’ll look a little like : http://codepen.io/Paulie-D/pen/AJuIF

[thommas]

Ok, I think I’m starting to understand. Everything you want outside the wrapper you just place outside the wrapper ;) haha. Really easy when you get it!

I’m very new with coding, so i’ll give it a try.

I guess the same goes for the footer?

[Paulie_D]

Footer…yep!

[Author]

Posts