16 replies [Last post]
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Here's my problem: I have 3 rows of three content boxes but right now they are in one continuous column instead of 3 separate rows. I have attached the designer comp (what I want) versus the current screenshot (what I've got) I have put part of the sections in ul, li combos (instead of divs) to try to make the row placement easier, but don't know where to go from there.
Here is the code:



  • News



  • Campus

    Introduction
    Cameras and Labs
    Soundstages
    Theatre
    Campus Facilities


  • Scout La

    Introduction
    Locations

Our Story
Introduction History Timeline
Student Films
Program
Introduction Courses Career Development Faculty

Admissions
Introduction Requirements Tuition Financial Aid Visit Us International
Request Info
Blank
Contact
Jobs
Trademark/Legal
.site-map-cell { margin: 0px; width: 136px; min-height: 120px; border: 1px solid #333333; } .site-map-cell a { width: 120px; padding-left: 10px; padding-right: 10px; color:#999999; display: block; text-decoration: none; } .site-map-cell a:hover { color: #ffffff; text-decoration: underline; }

/*-----Background Image Switches-----*/
.rollover a {
padding: 0px;
margin: 0px;
display: block;
width: 136px;
height: 22px;
overflow: hidden;
border-bottom: 1px solid #333333;
text-indent: -9999px;
}
.rollover_2 a {
padding: 0px;
margin: 0px;
display: block;
width: 136px;
height: 22px;
overflow: hidden;
border: 1px solid #333333;
text-indent: -9999px;
}
#news-cell {
background: url('../images/sitemap_images/news.gif');
}
#news-cell:hover {
background-position: 0 -22px;
}
#campus-cell {
background: url('../images/sitemap_images/campus.gif');
}
#campus-cell:hover {
background-position: 0 -22px;
}
#scout-la-cell {
background: url('../images/sitemap_images/scout_la.gif');
}
#scout-la-cell:hover {
background-position: 0 -22px;
}
#our-story-cell {
background: url('../images/sitemap_images/our_story.gif');
}
#our-story-cell:hover {
background-position: 0 -22px;
}
#student-films-cell {
background: url('../images/sitemap_images/student_films.gif');
}
#student-films-cell:hover {
background-position: 0 -22px;
}
#program-cell {
background: url('../images/sitemap_images/program.gif');
}
#program-cell:hover {
background-position: 0 -22px;
}
#admissions-cell {
background: url('../images/sitemap_images/admissions.gif');
}
#admissions-cell:hover {
background-position: 0 -22px;
}#our-story-cell {
background: url('../images/sitemap_images/our_story.gif');
}
#request-info-cell:hover {
background-position: 0 -22px;
}
#request-info-cell {
background: url('../images/sitemap_images/request_info.gif');
}
#blank-cell:hover {
background-position: 0 -22px;
}#blank-cell {
background: url('../images/sitemap_images/blank.gif');
}
#our-story-cell:hover {
background-position: 0 -22px;
}
#contact-cell {
background: url('../images/sitemap_images/contact.gif');
}
#contact-cell:hover {
background-position: 0 -22px;
}
#jobs-cell {
background: url('../images/sitemap_images/jobs.gif');
}
#jobs-cell:hover {
background-position: 0 -22px;
}
#trademark-cell {
background: url('../images/sitemap_images/trademark.gif');
}
#trademark-cell:hover {
background-position: 0 -22px;
}

AttachmentSize
screenshot_4.gif4.22 KB
designercomp.gif9.72 KB

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So float the site-map

So float the site-map cells; simplest way if you are working to fixed widths I guess is to width the ul and then float the li elements left or right, you could use a single ul or one per row and remove bottom margins.

IE6 doesn't understand min-height so you might want to feed a star selector filter with height:120px as IE6 will expand that.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

So close, and yet... *sigh*

So close, and yet... *sigh* It almost works, but the issue is going on with the 3 cell, floating down the the left, on the next row....

.site-map-row { width: 408px; } .site-map-cell { float: left; margin: 0px; width: 136px; min-height: 120px; border: 1px solid #333333; }

  • News
  • Campus
    Introduction Cameras and Labs Soundstages Theatre Campus Facilities
  • Scout La
    Introduction Locations

AttachmentSize
screenshot_4.gif 7.59 KB

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looking a little bit harder

Looking a little bit harder but with precious little time at the moment I'm not sure I like the markup choices, how does this look unstyled in a plain text rendering context.

It may be better to use sub lists to hold the links and use the parent list to hold a heading tag for that group of links you would still be able to style that the way you would like.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 × 136px = 408px +

3 × 136px = 408px + 6px(border) =414px ul fixed width = 408px.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Ok.. well, I already figured

I'm still not certain I got the list right semantically.
This is what a row looks like:




    • News





    • Campus

    • Introduction

    • Cameras and Labs

    • Soundstages

    • Theatre

    • Campus Facilities





    • Scout La

    • Introduction

    • Locations





Seems a bit code heavy, and when I disable styles, it doesn't seem any better than what I had previously.

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

For the markup I was

For the markup I was thinking more along the lines of this:

  • News

    • page link
  • Campus

    • Introduction
    • Cameras and Labs
    • Soundstages
    • Theatre
    • Campus Facilities
  • Scout La

    • Introduction
    • Locations

Un-styled it makes sense, biggest problem is the fluidity of height breaking things I tried styling borders,but am simply too tired at the moment to focus on fiddly stuff Smile and an probably missing a much more logical approach this is as far as I took basic styling:

ul {padding-left:0;margin-left:0;}
.site-map-row {
width: 414px;
min-height:120px;
overflow:hidden;
border:1px solid #333;
}
.site-map-cell {
float: left;
margin: 0px;
width: 136px;
min-height: 120px;
list-style-type:none;
text-align:center;
border: 1px solid #333;
}
.site-map-cell ul {
min-height:120px;
list-style:square;
padding-left:1.5em;
text-align:left;
}
.lb {border-left:none;}
.rb {border-right:none;}
.no-b {
border:none;
}

I'll probably have a play with this when I'm a little refreshed as strangely it was something I was considering as part of a job at the moment I'm on but for that I would probably keep the styling simpler to avoid the boxes Smile.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

That's funny, I had just

That's funny, I had just went in and re-named all the divs and simplified the css, when I saw you had reposted. Yea, I'm still having the height problem, and it's got me a bit stumped. Someone here suggested height: auto, but I had to assign a min-height just to get them to appear in the first place. Here's what I did, and it is very nice with styles disabled.



  • News



  • Campus
      Introduction

      Cameras and Labs

      Soundstages

      Theatre

      Campus Facilities




  • Scout La
      Introduction

      Locations



  • Our Story
    • Introduction
      History Timeline
  • Student Films
  • Program
    • Introduction
      Courses
      Career Development
      Faculty

  • Admissions
    • Introduction
      Requirements
      Tuition
      Financial Aid
      Visit Us
      International
  • Request Info
  • Blank

    Contact
    Jobs
    Trademark/Legal
/*-----Single Row-----*/ .site-map-row { clear: left; width: 396px; } /*-----Bottom Row Links-----*/ .site-map-row-bottom ul { float: left; list-style: none; padding-top: 10px; } /*-----Cell Blocks-----*/ .site-map-cell { float: left; margin: 0px; width: 130px; min-height: 120px; *height: 120px; /*-----for IE6-----*/ border: .5px solid #333333; } .site-map-cell a { width: 110px; padding-left: 10px; padding-right: 10px; color:#999999; display: block; text-decoration: none; } .site-map-cell a:hover { color: #ffffff; text-decoration: underline; } .site-map-cell li { list-style: none; } .site-map-cell li ul { padding-left: 3px; list-style: none; } /*-----Background Image Switches-----*/ .rollover_2 a { clear: left; float: left; width: 130px; height: 22px; display: block; padding-top: 5px; list-style: none; padding: 0px; margin: 0px; overflow: hidden; border: 1px solid #333333; text-indent: -9999px; } /*-----Background Image Switches-----*/ .cell-header { border-bottom: 1px solid #333333; text-indent: -9999px; height: 22px; } #news-cell { background: url('../images/sitemap_images/news.gif'); } #news-cell:hover { background-position: 0 -22px; } #campus-cell { background: url('../images/sitemap_images/campus.gif'); } #campus-cell:hover { background-position: 0 -22px; } #scout-la-cell { background: url('../images/sitemap_images/scout_la.gif'); } #scout-la-cell:hover { background-position: 0 -22px; } #our-story-cell { background: url('../images/sitemap_images/our_story.gif'); } #our-story-cell:hover { background-position: 0 -22px; } #student-films-cell { background: url('../images/sitemap_images/student_films.gif'); } #student-films-cell:hover { background-position: 0 -22px; } #program-cell { background: url('../images/sitemap_images/program.gif'); } #program-cell:hover { background-position: 0 -22px; } #admissions-cell { background: url('../images/sitemap_images/admissions.gif'); } #admissions-cell:hover { background-position: 0 -22px; } #our-story-cell { background: url('../images/sitemap_images/our_story.gif'); } #request-info-cell:hover { background-position: 0 -22px; } #request-info-cell { background: url('../images/sitemap_images/request_info.gif'); } #blank-cell:hover { background-position: 0 -22px; } #blank-cell { background: url('../images/sitemap_images/blank.gif'); } #our-story-cell:hover { background-position: 0 -22px; } #contact-cell { background: url('../images/sitemap_images/contact.gif'); } #contact-cell:hover { background-position: 0 -22px; } #jobs-cell { background: url('../images/sitemap_images/jobs.gif'); } #jobs-cell:hover { background-position: 0 -22px; } #trademark-cell { background: url('../images/sitemap_images/trademark.gif'); } #trademark-cell:hover { background-position: 0 -22px; }

@}->-- Amanda

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

But I guess putting them in

But I guess putting them in their own the list items as li's instead of ul's makes more sense...

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm afraid Amanda that your

I'm afraid Amanda that your last markup structure is largely invalid markup so I wouldn't go too far with that, try taking my example of the ul structure and working with that it may be that an extra wrapping div can be used in some way to show parts of the border? The borders will largely be down to faking it as it were with some borders on some elements sides and other sides on others - if that makes sense.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Ha, Hugo, you're grand! I

Ha, Hugo, you're grand! Laughing out loud
I had actually already realized that my mark-up wouldn't work, although it was "prettier". I already went back and changed it, as you had previously shown how to do... and realized that I'd have to "fake" the borders" as you said. I expounded upon what you had said, and made a few tweaks, and it works, mostly. Once you get past a certain point, the "faked borders" no longer line up, as the content is still changing. But, at least it's better :?

I can go through 4 or 5 text-resizes before it starts becoming really noticeable...

****But wait!!! My image switching isn't working for the top 9 headings in IE6, but it is working for the bottom 3. Hrmmmm....

@}->-- Amanda

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I'm surprised Hugo didn't go

I'm surprised Hugo didn't go for his favorite definition list :shrug:
How about giving this a try:

Grid of Links


/**/

News


Campus

Introduction

Cameras and Labs

Soundstages

Theatre

Campus Facilities


Scout La

Introduction

Locations


Our Story

Introduction

History Timeline


Student Films


Program

Introduction

Courses

Career Development

Faculty


Admissions

Introduction

Requirements

Tuition

Financial Aid

Visit Us

International


Request Info




Blank


You'll need some adjustments, for IE in particular. I'm attaching the background image I used as well, but that may need adjustment too.

AttachmentSize
centerborder.jpg 331 bytes
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

wolfcry911 wrote:I'm

wolfcry911 wrote:
I'm surprised Hugo didn't go for his favorite definition list :shrug:

Laughing out loud It had occurred to suggest it but then worried that it would confuse matters, I should have just coded an example using me fav list element rather than working to the existing code :rolleyes:

Amanda the example wolfie shows works very nicely and is worth considering, I'd look at the padding/margin values on the dd anchors though as the horizontal values are causing the text to wrap oddly on increases.

If you are going with the ul li then part of the key to the border issue is negative margins and is simply what - despite coding tabbed boxes galore using neg margins - I couldn't think of last night (moral never try and code when tired )

If you look at wolfies example neg margins are used to pull elements with borders over the top of their neighbours, in other words where you have the unwanted effect of a double thickness border (adjacent borders) you place a negative margin on one element effectively pulling it over the top of the other thus appearing to only have the one, it's the principle use for tabbed button links where one needs to hide the bottom border on active links.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

I've been playing around

I've been playing around with Wolfcry's version, and it seems good, but as he mentioned, it needed a bit of work for IE.

There is an issue with the margins and padding as Hugo mentioned in Firefox. Why aren't they being covered by the margin and padding set for the dds?

*btw, genius to use the image to create the border by just repeating it across Smile

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The image trick for the

The image trick for the internal borders is cunning but then wolfs are , the only problem with this sort of technique is that it locks one in to a fixed width, to change means having to redo graphics, so much better if a non graphic css solution were possible, but it ain't likely with this layout. I think the image is just repeated down isn't it? and set across by the width of a cell so the image sits in the middle of the outer parent.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 48 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

yep that's what it's doing..

yep that's what it's doing.. and yea... this layout's a little funny (handed straight down from the "graphic designers" here, who AREN'T web designers, and certainly not coders. But it looks pretty good anyway Smile It pretty much had to have a fixed width anyways, because we are using a web application framework called fusebox, and I was working on a piece of the site, that has a pre-determined width. Tongue So weird, when you're used to working on a site as a whole. Thanks again guys! <3

@}->-- Amanda

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And once again web

And once again web development led by graphic artists, don't you just love it, I do hope you got them to make the dividing line graphic just to point out their lack of knowledge and to ensure they would perhaps understand next time.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me