6 replies [Last post]
b_electro
b_electro's picture
Offline
Regular
Last seen: 8 years 27 weeks ago
Timezone: GMT-6
Joined: 2007-05-01
Posts: 50
Points: 20

I'm rebuilding my old table-based portfolio site with CSS woo-hoo! www.bradeller.com/index2.html

OK, couple of questions please:
1. How do I get the Flash object horizontally aligned w/ the UL? This should be easy I know, but I'm stumped. I have a feeling that the whole way I'm building the header is wrong, i.e. 2 header classes seems weird, and maybe there should be a div around the UL. :?

2. How do I modify the margin on the UL? I want left-margin: 20px but it won't listen to me. It just stays stuck where it is.

3. How do I make the top class align horizontally with the h2, with no line-break? Adding display: inline; to both selectors does this- but is this the best way?

Thanks for any help or links to related tutorials.

Full code w/ all CSS in head:

Brad Eller: Portfolio 2007

A:link {text-decoration: none; color: #666699}
A:visited {text-decoration: none; color: #666699}
A:active {text-decoration: none; color: #FF9966}
A:hover {text-decoration: underline; color: #FF9966}

body {
font-size: small;
margin: 0;
padding: 0;
background-image: url(img/bg.gif);
background-repeat: repeat;
}

#header {
background-image: url(img/header.gif);
background-repeat: repeat-x;
height: 55px;
width: 100%;
}

#header2 {
width: 100%;
background-color: #cdc8b5;
clear: both;
}

#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
line-height: 95%;
list-style: none;
width: 100%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
margin-top: 0px;
padding-bottom: 10px;
}

#flash {
float: right;
}

#wrapper {
width: 900px;
margin-left: 20px;
clear: left;
}

h1 {
margin-left: 20px;
margin-top: 0;
margin-bottom: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 200%;
color: #666666;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 130%;
color: #FF9966;
font-weight: bold;
margin-top: 20px;
margin-bottom: 0;
clear: both;
}

.top {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
margin-top: 0;
margin-bottom: 0;
}

.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #333333;
line-height: 120%;
width: 800px;
margin-top: 0;
margin-bottom: 0;
}

.image {
margin-top: 5px;
margin-right: 40px;
float: left;
}

Brad Eller: Selected Work

Great Republic

[top]

Great Republic is a hip, young spin-off line of the unbranded clothing giant, Broder Bros. In conjunction with the art director, I concepted and created the distinct vector graphics based on old Soviet Constructivist posters. We then created a unique look and feel to the photography using my retouching and compositing skills.

Great Republic DVD cover
Great Republic poster

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

1. Either float the ul left

1. Either float the ul left and give it a width or make it position: absolute and layer it over the top of the Flash movie.
2. Which ul? #nav doesn't have a margin-left on it.
3. Don't understand what you mean.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

adevv
Offline
Regular
Indonesia
Last seen: 10 years 6 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2007-08-10
Posts: 14
Points: 0

I hope this helps

Hi,


  1. I think the header classes is alright although I don't know why you need to specify "clear: both" and you can shorten the background code like:
    background: url(img/header.gif) top repeat-x;
    To align the flash object with UL, try this code:
    #nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 95%;
    list-style: none;
    float: left;
    margin: 0 20px;
    padding: 10px 0;
    }

    Add
    below the flash, like this:
    pluginspage="http://www.macromedia.com/go/getflashplayer" src="bradeller07_header.swf" type="application/x-shockwave-flash" width="1820" quality="best" play="true">


  • As you replace your #nav with the code specified above, your margin-left would also become 20px. Here is how to specify margin or padding:
    • margin: a b c d; (4 values) a = top, b = right, c = bottom, d = left (clockwise)
    • margin: A B; (2 values) A = top & bottom, B = left & right (use this if your top & bottom margin has the same value & so are your left & right margin)
  • Try the following code: h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 130%; color: #FF9966; font-weight: bold; clear: both; float:left; margin: 0 14px 0 0; }
  • .top {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    padding: 5px;
    margin: 0;
    }

    Best regards,
    Amelia

    adevv
    Offline
    Regular
    Indonesia
    Last seen: 10 years 6 weeks ago
    Indonesia
    Timezone: GMT+7
    Joined: 2007-08-10
    Posts: 14
    Points: 0

    padding for .top class

    Just to correct my previous post, for the .top class, I think this is more precise:
    padding: 5px 0 0 0;

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 41 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    1. Float #nav left and give

    1. Float #nav left and give a width to #flash.
    2. UL's are given a small left indent by browsers. Different browsers use different methods to achieve that indent. Some use margin-left some use padding-left. You need to control both values to get browsers to behave similarly. Right now you are only controlling margin-left. Add a padding-left: 0 value.
    3. Wrap both the h2 and the anchor in a div, drop the P. Use position:absolute on the anchor and margin-right (or padding-right) on the h2 to ensure it leaves space. E.g.

    .portfolio_item { position: relative; } .portfolio_item h2 { margin-right: 5em; } .portfolio_item a.top { position: absolute; top: 2px; right: 3px; width: 4.5em; }

    Great Republic

    [top]

    If you also place the content for the portfolio item inside the same wrapper div, the top link doesn't need to appear immediately after the H2. It can appear anywhere inside the wrapper.

    b_electro
    b_electro's picture
    Offline
    Regular
    Last seen: 8 years 27 weeks ago
    Timezone: GMT-6
    Joined: 2007-05-01
    Posts: 50
    Points: 20

    Lots to absorb and apply

    Lots to absorb and apply here- thanks for all the great tips! B

    b_electro
    b_electro's picture
    Offline
    Regular
    Last seen: 8 years 27 weeks ago
    Timezone: GMT-6
    Joined: 2007-05-01
    Posts: 50
    Points: 20

    Thanks adevv for the

    Thanks adevv for the thorough postioning instructions, however, I liked Tyssen's idea of floating the UL over the Flash movie. That said, after a few hours and several CSS layers tutorials, I need more help, please. Here's what I have now: http://bradeller.com/index2.html

    Obviously my layering isn't working. #nav should overlap #flash so I set the z-index values accordingly. Does #flash need to be position: absolute as well? Of course I tried it but nothing happened, still in the tutorials I read, all selectors w/ z-index values were also set position: absolute.

    Another issue: when I set #nav to position: absolute, it overlaps #wrapper when you enlarge the text-size on your browser and it covers up h1, top, etc. I thought setting #wrapper to clear:both would fix this but it doesn't. What am I not doing here?

    Yay code:

    Brad Eller: Portfolio 2007

    A:link {text-decoration: none; color: #666699}
    A:visited {text-decoration: none; color: #666699}
    A:active {text-decoration: none; color: #FF9966}
    A:hover {text-decoration: underline; color: #FF9966}

    body {
    font-size: small;
    margin: 0;
    padding: 0;
    background-image: url(img/bg.gif);
    background-repeat: repeat;
    }

    #header {
    background-image: url(img/header.gif);
    background-repeat: repeat-x;
    height: 55px;
    width: 100%;
    }

    #header2 {
    width: 100%;
    background-color: #cdc8b5;
    }

    #nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 95%;
    list-style: none;
    width: 100%;
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
    margin-top: 0px;
    background-color: #cdc8b5;
    padding: 0px 0px 20px 20px;
    position: absolute;
    z-index: 2;
    }

    #flash {
    z-index: 1;
    }

    #wrapper {
    width: 900px;
    margin-left: 20px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    clear: both;
    }

    h1 {
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 200%;
    color: #666666;
    padding: 0px;
    margin-right: 0px;
    }

    h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 130%;
    color: #FF9966;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0;
    }

    .top {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    margin-top: 0;
    margin-bottom: 0;
    }

    .body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    color: #333333;
    line-height: 120%;
    width: 800px;
    margin-top: 0;
    margin-bottom: 0;
    }

    .image {
    margin-top: 5px;
    margin-right: 40px;
    float: left;
    }

    Brad Eller: Selected Work

    Great Republic

    [top]

    Great Republic is a hip, young spin-off line of the unbranded clothing giant, Broder Bros. In conjunction with the art director, I concepted and created the distinct vector graphics based on old Soviet Constructivist posters. We then created a unique look and feel to the photography using my retouching and compositing skills.

    Great Republic DVD cover
    Great Republic poster