CSS Layout trouble in Content Page [SOLVED! ... thanks to Nullig]

[Bob]

Im using CMSMS 1.0.4 on FireFox, Safari, and Windows 7.

Here's the issue.

In a content page, I have 2 "blocks" of based on a couple of CSS scripts I added, sort of based on the left49 and right49 you'd find in one of the default stylesheets, except I made them to a specific size (325px x 400px for now), so I can have a couple of my pages be layed out without tables. That pretty much works the way I want.

The problem I'm having is getting my horizontal nav into one of those "blocks". I've tried my existing one that I use in the main template as well as creating a new nav bar css and placing it in {literal} tags in the source of the page I'm working on. Both of them end up breaking apart instead of lining up nice and horizontal to the top of the box.

Basically, I'm looking to have one or two blocks within my home page to have a full horizontal nav bar with only 2-4 links (possibly with drop downs, but I doubt it)

here is my HTML:

    Interview
    Latest DVDs
    Other Stuff



 
Box 3





and the bit of CSS for the block

div.right48 {
  padding: 0em;
  float: right;
  width: 325px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #333;
  text-align: center;
  margin: 1em 0 0 0;
  }

div.left48 {
padding: 0;
  float: left;
  width: 325px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #333;
  margin: 1em 0 0 0;
  }

like I said above, I am trying to use the Horizontal Nav CSS (based on one of the defaults) within the div class.

I'm still learning CSS... a lot thanks to CMSMS which is a good thing ...I'm used to GoLive/Dreamweaver stuff which probably screwed m up  ...
This is probably a simple solution, but I'm just not seeing it.

Thanks in advance for any help

[heatherfeuer]

What is the exact function of the "wrapper" id?  If it is the same as the default "pagewrapper" that needs to be the first div.

For the menu, what is the css for the "menu_horiz" id?  To get the menu to be horizontal rather than vertical, you need to make your style something like this:

div#menu li {
list-style: none;
background-color: #fff;
color: #0000ff;
font: bold 11pt Helvetica, Tahoma, Geneva, Arial, sans-serif;
width: auto;
height: 30px; padding: 0 .5em;
float: left; /* makes the list horizontal */
line-height: 22pt;
margin: 0 5px;
border: 1px solid #708090;
}

[Bob]

Thanks for the reply! OK, below is what I think it's refering to....

div#menu_horiz {
      background-color: #000000;
      border-top: 1px solid #FF0000;
      border-bottom: 1px solid #FF0000;
      width: 100%;
      margin: 0;
      text-align: center;
    }
    div#menu_horiz ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #000000;
        border-left:  1px solid #000000;
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #000000;
    }

I think this is the wrapper

#menuwrapper {
        overflow: hidden;
        background-color: #000000;
        border-bottom: 1px solid #333333;
        width: 100%;
        }

basically, it refers to the same code I use for the main horizontal ... there's 2 style sheets that seem to effect my main horizontal nav. So I just grabbed the script that worked out of my page template

     
        Navigation
       
        {cms_module module='menumanager' template='BR_Horizontal : cssmenu-accessible2'  }   
       
     
     

But I had to dump the cms_module tag so I don't get all my links repeated in that little box I'm trying to create.
But then it goes all wrong on me... kind of staggered looking.

[Nullig]

Can you post a link to the site so we can see what is happening?

Nullig

[Bob]

Can you post a link to the site so we can see what is happening?

Nullig

Well, I don't want to offend anyone... it's got some nudity in it... it's for an adult entertainment  magazine.  Sorry... that's my job

PLEASE BEWARE! ADULT CONTENT!
http://www.where2mag.com/cms_test/index.php?page=home

The box I'm refering to is the lower left box. Overall, this site is stil in the development stage. I'm retooling our old site and CMSMS is in my mind the best way to go.

[Nullig]

I think this might be the problem - in the LISTS section:

#main ul li {
margin: 0 0 0.25em 30px; <-- change the 30px to 0px
padding: 0;

Nullig

[Bob]

I think this might be the problem - in the LISTS section:

#main ul li {
margin: 0 0 0.25em 30px; body div#listmenu ul li ul li ul {
  left:10em;
  }

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
@media all and (min-width: 0px){
  body div#listmenu ul li ul {padding-bottom:200px;}
  body div#listmenu ul li ul li ul {padding-bottom:22px;}
  body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

  }
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */

/* finally after feeding values to all others, we deal with MAc5 IE */
/* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
/* we present the drop down choices in a row and never show any second-level drops */
/* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("  */
@import("ie51_menu_hack.css");
/* END OF DROP DOWN MENUS */

Thanks again for all your help!

[Bob]

I don't know if this would help, but here is an entire HTML with the CSS inlined... just copy/paste into a text editor, save as HTML and view in your browser... it should show you what I'm looking to do in the little box 3 (Again , right out of C. Wyckes-Smith's book, Stylin' with CSS...  yeah I'm a newbie )

hz nav


body {font-family: verdana, arial, sans-serif; font-size:100% behavior:url(css/csshover.htc);}
* {margin:0; padding:0;}

/* the horizontal menu starts here */
div#listmenu {
width:100%; /* makes the div full width */
float:left; /*makes the div enclose the list */
border-top:1px solid #069; /* draws line on top edge of div */
border-bottom:1px solid #069; /* draws line on bottom edge of div */
font-size:.8em; /* SET FONT-SIZE HERE */
background-color:#CCF; /* colors the div */
margin-top:0px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
}
div#listmenu ul {margin:0 0 0 0px;/* indents ul from edge of container */
}
div#listmenu li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
background-color:#FFA; /*sets the background of the menu items */
border-right:1px solid #069; /* creates dividing lines between the li elements */
}
div#listmenu li:first-child {
border-left:1px solid #069; /*the first vertical line on the menu */
}
div#listmenu li:hover {
background-color:#FFF; /*sets the background of the menu items */
}
div#listmenu a {
display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#069; /* sets the type color */
}
div#listmenu a:hover {
color:#F33;
}
/* the horizontal menu ends here */



/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
margin-left:15px; /* IE doubles the given value above - why? */
}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu ul li ul li ul {
  left:9.85em;
  voice-family: ""}"";
  voice-family:inherit;
  left:10em;
  }
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
  left:10em;
  }

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
@media all and (min-width: 0px){
  body div#listmenu ul li ul {padding-bottom:200px;}
  body div#listmenu ul li ul li ul {padding-bottom:22px;}
  body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

  }
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */

/* finally after feeding values to all others, we deal with MAc5 IE */
/* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
/* we present the drop down choices in a row and never show any second-level drops */
/* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("  */
@import("ie51_menu_hack.css");
/* END OF DROP DOWN MENUS */







Interview
Latest DVDs
Other Stuff

[Nullig]

Do you use Firefox?

If so, do you have the Web Developer Tools addon?

If not, you should get it, as it allows you to edit your styles in real time on your site, so you can see immediately what style changes affect your layout.

Nullig

[Bob]

Thanks Nullig... I just Installed the Web Tools to my FireFox... I could see the advantage of it, but it doesn't really help the problem I'm having (although I notice I'm 73 times XHTML incorrect .... now I'm gonna start freeking out!)

I must be overlooking something small ... if the CSS that I want to use works on a normal local page (firefox and Safari), where am i going wrong when I apply it to the that I'm using on the home page? Really, this is gotta be something so simple to do, yet I'm missing something! (just venting at this point)

Thanks for your help Nullig!

[Nullig]

If you have the web developer tools, go to your page and right-click on it. Select Edit CSS from the CSS menu and a window will open up at the bottom of the page. You can tweak your style settings in that window and see what it does to your site. It's very useful for finding problems with layouts and styles.

Nullig

[Nullig]

OK try this:

#main ul li {
  margin: 0;
  padding: 0;

Nullig

[Bob]

OK try this:

#main ul li {
  margin: 0;
  padding: 0;

Nullig

I'm not sure what you're referring too... this is the CSS script I'm using... the only padding is to keep the text a little spaced from each other so they are'nt to close originally it was 0 6px... that being top and bottom 0px, left & right being 6px (see in red)... I just changed it to be just right 6px and the rest 0... but nothing changes. It still wants to space out as you'd see it on my test site.

/* the horizontal menu starts here */
div#listmenu {
width:100%; /* makes the div full width */
float:left; /*makes the div enclose the list */
border-top:1px solid #069; /* draws line on top edge of div */
border-bottom:1px solid #069; /* draws line on bottom edge of div */
font-size:.8em; /* SET FONT-SIZE HERE */
background-color:#CCF; /* colors the div */
margin-top:0px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
}
div#listmenu ul {margin:0px;/* indents ul from edge of container */
}
div#listmenu li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
background-color:#FFA; /*sets the background of the menu items */
border-right:1px solid #069; /* creates dividing lines between the li elements */
}
div#listmenu li:first-child {
border-left:1px solid #069; /*the first vertical line on the menu */
}
div#listmenu li:hover {
background-color:#FFF; /*sets the background of the menu items */
}
div#listmenu a {
display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#069; /* sets the type color */
}
div#listmenu a:hover {
color:#F33;
}
/* the horizontal menu ends here */

Like I mentioned before, it works fine by itself in its own html page,(FF and Safari) but when I try to use it on this it spaces out wrong... atleast it stays horizontal... but it doesn't move all the way to the left of the "div"

This is driving me nuts!... something so simple shouldn't be this complicated!

[Nullig]

Well, you must have other stylesheets attached, because that is the section that is affecting the box. It is part of the:

BR_Horizontal : Typography

stylesheet.

Nullig

[Bob]

Well, you must have other stylesheets attached, because that is the section that is affecting the box. It is part of the:

BR_Horizontal : Typography

stylesheet.

Nullig

AH HAH!!!!  You got it!!!! I didn't think to look at the Typography CSS... I didn't think to look at it cuz I didn't know it would have any bearing on the css... Thank you so much!!! Thank you for all your patience and help!!! I'll tag the subject as [solved]

Just out of curiousity... any tips about what I could or should do to consiladate a lot of the CSS Associations? At this point, I'm only using 2 Templates (one being a minimal for our Splash "Warning" page, and the all others will most likely use the same  other template. Now that I fixed the Typography CSS to work how I need it, should I create another CCS line to replace the one I changed? I'm not even sure what it affected other than the problem I was having.

Anyhow, thanks again for your help... greatly appreciated.