Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    help with parent/child css issues

    Hope I have got the grasp of id and class but perhaps not.

    This section of code displays in IE^ on XP nearly as intneded. The boreder around the div id=menu doesn't extend below the items of the menu. I would ask you for help with that. Also, when viewed in FF, most of the style elements are ignored. PLz help me understand why this might be.

    here's the html
    Code:
    <div id="menu">
    <div id="table">
    <h1> Table d&#39;H&#244;te Menu</h1>
    <div class="meallayout">
    <div class="titlediv"><p class="title"> <a class="textlink" href="/cgi-bin/pier36/Tester_Menu/publicdetail.pl/path=Tabledhote&action=View&base=item1"> Monkfish </a> </p></div>
    <div class="pricediv"> £15.00 </div>
    <div class="summarydiv"> Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc </div>
    </div>
    Her's the css
    Code:
    body {
    text-align : center;
    }
    
    div#menu {
    padding : 10px;
    margin : 10px;}
    
    div#table {
    margin : auto auto;
    text-align : center;
    
    background-color : transparent;
    border : 1px solid #d2d2d2;
    padding : 0 4%;
    font-size : 1em;
    }
    
    
    
    #table h1 {
    
    font-family : "Old English Text MT", verdana, sans-serif, helvetica;
    
    font-weight : bold;
    
    color : #000000;
    
    padding-bottom : 20px;
    }
    
    
    
    #table .meallayout {
    text-align : center;
    margin : auto auto;
    }
    
    #table .meallayout .titlediv {
    float : left;
    background-color : #000000;
    width : 80%;
    padding : 10px 0;
    }
    
    
    
    #table .meallayout .titlediv .p {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    background-color : transparent;
    
    text-align : center;
    
    color : #fffffff;
    
    padding : 0 20px;
    
    font-size : 1em;
    }
    
    #table .meallayout .summarydiv {
    float : left;
    width : 80%;
    clear : both;
    padding : 10px 0;
    background-color : #ffff80;
    }
    
    #table .meallayout .summarydiv p {
    font-weight : bold;
    }
    
    #table .meallayout .pricediv {
    float : right;
    top : 0px;
    width : 17%;
    height : 25px;
    background-color : #ff8080;
    padding : 10px 0;
    }
    
    #table .meallayout .pricediv p {
    font-weight : bold;
    }
    
    
    */#table td a:link, a:visited, a:active, a:hover {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    font-size : 1em;
    }
    
    
    #table td a:hover {
    color : #BD75A0; 
    background-color : transparent; 
    }
    
    
    
    #table td hr {
    color: #004040;
    }
    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you have a link Bazz? It's easier for me to see it in action, and compared to all elements of the page...

    Also, we could simplify this a bit. Your current code uses a little too many divs, we call it 'divitis' from god knows who, but the popular zeldman book makes strong use of the term. By using semantic coding, you not only simplify your code, but also your updates and how you apply styles. check it:
    Code:
    <div id="menu">
    <h1>Table d'Hôte Menu</h1>
    <h2><a href="/cgi-bin/pier36/Tester_Menu/publicdetail.pl/path=Tabledhote&action=View&base=item1">Monkfish</a></h2>
    <cite> £15.00 </cite>
    <p> Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc </p>
    </div>
    If I see your full page, I can show you how to style it to look the same Either way, you can now style it appropriately:
    Code:
    #menu {}
    #menu h1{}
    #menu h2{}
    #menu cite{}
    #menu p{}
    ... on a latter note, cleaning up that code shows me you had two divs that weren't closed. That might be your problem (div menu, and div table weren't closed) - but I would seriously look into making your code 'semantic' -- look how much simpler it is!

    PS - Remember to use the proper ampersand character both in your text, and in your URL's for your links:
    Code:
    &amp;
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you bradyJ I'll try what you suggest

    link here

    If you look at the url and then replace Tabledhote with Bar_Snack, you'll not only see a different layout (and menu), but it's a different stylesheet, called by the perl code based on the url.

    I have tried (until my brain went to mush), to think of a way of having a default css for the main stuff and then the specifics to be served by the Bar_Snack or Tabledhote css (triggered by the url). I am not asking you to do this for me but if you could help me by explaining what it is exactly that I am trying to do, then I might find it seasier to pick up the thought process again.

    Bazz

    PS, now I'm sure you can undertsand my sig
    Last edited by bazz; 02-03-2005 at 06:24 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hey Bazz,

    One tip I use for serving different styles to specific pages is to assign the body an id as well:

    <body id="dinner">
    <ul id="menu>
    <li>...</li>
    </ul>
    </body>

    #dinner #menu {
    ...styles...
    }

    It makes it easier to cut down on the number of ids I have in the page, plus it lets me assign page specifc effects easily. Maybe it'll work for you instead of the Perl?

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whoops, beat me to it again

    I would agree -- it's a simple common technique, and very powerful. I used this recently as a technique so that the arrow from the top menu points on the specific main page - adding a whole new CSS menu as needed per page.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hey guys thanks. I'll have to 'digest' that inwardly before I can be sure it's suitable here. Y'see, the different menus are served by the perl file - the sole perl file - and the content added from the db's is determined by the last part of the url.

    My initial response is to say that yes your suggestion is probably what I need but I need also, to interpret it to my situation with the perl. sort of like, if 'menutype' = Bar_Snack, css = Bar_Snack.css elseif menutype = Tabledhote css = Table_dHote.css etc.

    Yes I am beginning to see how it can go so that ultimately, each new customer requires only the copying and pasting of one folder to give them their menus with the only configging that of colors and text styles. must cms that also.

    Bazz
    PS BradyJ - I loved that site the moment I saw it. the top banner is cool and the layout too seems well planned.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz
    PS BradyJ - I loved that site the moment I saw it. the top banner is cool and the layout too seems well planned.
    Thanks bazz
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    still have a slight problem. If you lok at the page in FF the namne of the dish and the price should be on the same level. I can't see what is causing them not to be. Help appreciated.

    Also, I have used the headings of h1, h2, cite, p. Are there any others that I can use as there are about 12 different fields in total and they are not paragraphs. I tried just naming them after their function, eg price but I got an inconsistency between IE and FF which doesnt happen when I use cite.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    As far as the menu semantics go, I'd say a definition list was made for this, or even (gasp!) a table. I posted a similar problem awhile back and it turned into a pretty good discussion. Either one would be appropriate, seeing as how you have three items that relate to each other: menu item, price, description.
    Code:
    <dl>
     <dt>Cheetos</dt>
      <dd>$1.50</dd>
      <dd>A delicious crunchy puff of goodness dusted with the finest cheese powders.</dd>
    </dl>
    or
    Code:
    <table>
     <thead>
      <tr>
       <th>Menu Item</th>
       <th>Price</th>
       <th>Description</th>
      </tr>
     </thead>
     <tbody>
     <tr>
      <td>Cheetos</td>
      <td>$1.50</td>
      <td>A delicious crunchy puff of goodness dusted with the finest cheese powders.</td>
      </tr>
     </tbody>
    </table>
    As far as FF going nutso, I'll take a look right now...

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    OK I have run wioth the <dl> and it works ok for me.

    I just have one stoopid problem that I cant fix. Its bugghin me coz I do know the answer.

    What should I do to get the a href working.
    Code:
    dl.bands dt {
    	clear: right;
    	background: transparent;
    	padding: 0.25em 0.5em;
    	font-weight: bold;
    	
    	letter-spacing: 0.5em;
    text-align : left;
    }
    dl.bands dd {
    	margin: 0 0 0 0.5em;
    	text-align : left;
    	padding : 0 25px;
    }
    dl.bands dd.img {
    	float: right;
    	margin: 0 0 1em 1em;
    	width: 145px;
    	position: relative;
    	top: -1.75em;
    }
    dl.bands dd.img img {border: 1px solid #000;
    }
    
    dl.bands dd .a:link, a:visited, a:hover, a:active  {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    font-weight : bold; 
    text-decoration : none; 
    color : #000080;
    background-color : transparent; 
    font-size : .75em; 
    }
    
    
    dl.bands dd .a:hover {
    color : #BD75A0; 
    background-color : transparent; 
    }
    It shows the hover OK and visited but not the text style unless you do hover.

    Bazz
    Last edited by bazz; 02-05-2005 at 06:11 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Could it just be this typo?
    dl.bands dd .a:link, a:visited, a:hover, a:active {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    }

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Perhaps you're right although I could swear I tried that. The ISP is messing about today so my site is down I may need to find another soon as these guys are beginning to become extremely incompetent.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •