css

[pinbrook]

Hi David, I appreciate the help....

I've taken your code and placed it into my design, you can see the result at http://grail.pinbrook.net/acatalog/Clothing.html

[fergusw]

CSS horizontal image fix

Hi Jo,
You are almost there with your horizontal nav layout.

The box model you were using requires a little more work.

One way to fix this and ensure that the image is nicely positioned to the left of the nav menu AND NOT affecting the box model of the UL is to put the curve image into a seperate <DIV> AND the nav menu into it's own <DIV> .
BOTH of these divs should be floated to the right and within the navcontainer div

A couple of CSS fixes are required to fix line height issues and box model issues across browsers, but it should get you there.

I had real problems getting it right in IE (as usual). Firefox was a dream and displayed the bacground colour for the LI's correctly and floated the DIV's correctly. IE decided that the UL would get the whole background stretched across the page AND the image DIV would float underneath the horizontal menu DIV.
A width defined on the #horizmenu fixed that.

HTML:

<div id="navcontainer">

<div id="horzmenu"><ul id="navlist">
    <li><a href="http://www.grail.pinbrook.net/index.html" target="_self">Home</a></li>
    <li><a href="http://www.grail.pinbrook.net/cgi-bin/ss000001.pl?SECTIONID=index.html&amp;NOLOGIN=1" target="_self">• Store Top</a></li>
    <li><a href="http://www.grail.pinbrook.net/acatalog/info.html" target="_self">• Terms &amp; Conds</a></li>
    <li><a href="http://www.grail.pinbrook.net/acatalog/search.html" target="_self">• Search</a></li>
    <li><a href="http://www.grail.pinbrook.net/cgi-bin/mf000001.pl?ACTION=SHOWFORM" target="_self">• Contact Us</a></li>
    <actinic:notinb2b>
      <li><a href="http://www.grail.pinbrook.net/cgi-bin/ss000001.pl?SECTIONID=index.html" target="_self">• Login</a></li>
    </actinic:notinb2b>
  </ul>
 </div>
<div id="curveimage"><img src="index_files/hnav-curve.gif"></div>
</div>

corresponding CSS

 #navcontainer {

 /* none needed */ } 
#horzmenu {
width:420px;
float:right;
margin:0; 
padding:0; 
display:inline;

}

#curveimage {
float:right;
margin:0; 
padding:0; 
display:inline;

}
 ul#navlist { 
 margin: 0; 
 width:auto; 
 list-style-type: none; 
 text-align: right; 
 height:20px; 
 line-height:20px; 
 background-color: #404616; 
 } 
 ul#navlist li { display: inline; font-family: arial, helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 2px 8px 2px 8px; background-color: #404616; } 
 #navlist a, #navlist a:link { color: #F4F3F1; text-decoration: none; } 
li#active, #navlist a:hover{ color: #F2AB01; }

tested in Firefox and IE 7.0.5

[pinbrook]

Tarahhh!

Cheers Fergus....

<div id="navcontainer">
<div id="horzmenu"><ul id="navlist">
<actinic:variable value="Horizontal Nav Bar Text Links" name="NavigationBar" /></ul>
</div>
<div id="curveimage"><img src="hnav-curve.gif"></div></div>

this is how the HTML looks in DW if you use the actinic fixed layouts rather than code each link

{ediited the above, after bill pointed out where the missing div was}

[wjcampbe]

Jo,

Fergus closes the Navcontainer div after the closing of the curveimage div, so he has the right number of complete divs.

If you do two consecutive divs after the ul, then the cusrvesimage is not inside the original div.

[RuralWeb]

Ive just opened V8 and created a site in the standard Technical Theme - ok so far. I now change to the Contemporary theme and then to the clean theme.

Looking at the css I now have a mix of all the themes in the file what a mess, I cannot work out what does what. Should this be happening? to my mind each theme should overwrite the other so you only have css relating to that theme.

[pinbrook]

This was howwe asked for it.

In the first beta, there was css in the stylesheet, themes.css and each theme then had inline css.

All css was then moved to the actinic stylesheet.

I agree its abit of the mine field to work out what goes with what theme, and some css is borrowed from one theme to be used in another.

ie comtemporary uses the menu buttons from technical

Section menus ( list in boxes, lists with horizontal diveiders etc) do not really belong to any one theme as they are interchangeable to any theme.

Thus I tend to agree with having everything lumped together, it seems the best solution to me.

I tend now to create my own css file and use both. Keep the actinic one so its there in case I miss something (or add/change at a later date), but keep my own stuff together.

[RuralWeb]

I agree its abit of the mine field to work out

Your not wrong there jo! I know we asked to get rid of the inline css but I would have thought that adding a clean theme would have reduced the css to a minimum required level so we could build from there. With V7 you always had the option of applying a clean theme to "clean" things up so to speak.

I dont particularly want two css files, just one that only has the code required for the site.

[pinbrook]

If you only want one css file you can add your own code to the bottom of the actinicstyle sheet.

I decided to go with 2 just so I could keep my own stuff on its own, which means a smaller file to edit.

The truoble is having the css available for mix and match so it isn't really feasible to have separate css files for all themes.

I guess as time goes on we will be able to identify redundant code ie css that goes with themes we are never going to use. and remove it as appropriate.

At present I'm taking the approach leave it in until I know I can get rid of it

[RuralWeb]

If you only want one css file you can add your own code to the bottom of the actinicstyle sheet.

Thats what Im doing at the moment but its very messy. As you say it will take time to identify redundant code but it would be nice if it was not there in the first place.

[jont]

Picking up someone elses coding is always a problem as no one will think the same way as you do - this is compounded further by the stylesheet being written by several people (hence the use of font sizes in px, ems and %) to create a real hotch-potch of code.

I am going down the route as outlined in the AUG in creating a single external stylesheet to edit externally to allow for better coding and easier previewing back under Actinic.

It is on my list to eventually clean out the stylesheet for the main designs to make it cleaner and more understandable to myself and then save to be reused for future client sites.

[pinbrook]

It is on my list to eventually clean out the stylesheet for the main designs to make it cleaner and more understandable to myself and then save to be reused for future client sites.

This is how I shall proceed, I've already seen css for themes I never use. As I get more to gips with the code I shall start tidying up. The key is to leave stuff in that is not theme specific and is interchangeable ie best seller code, new products, section nav etc etc

In my view it is better to leave stuff intact as it means the site is easy to be picked up and maintained by ANO

it would be nice if it was not there in the first place

in an ideal world maybe but not in the real one

[RuralWeb]

ideal world maybe but not in the real one

As jont says its a real mess and I cannot see why they could not have produced a clean theme with minimal code, after all the effort they have gone to with V8 this would have been pretty simple IMO.

It may not be so bad for a CSS expert but think what it looks like to a DIY site builder
I will eventually do as jont is intending ie produce my own css file which can be reused.

The other part that is winding me up at the moment is the css preview window which currently shows the code when it should I think show the part of the site you are working on so you can see the effect of your changes. Currently you need to make a change then apply then go to the page you are editing to see the effect. Things were much quicker with V7.

[jont]

The other part that is winding me up at the moment is the css preview window .... you need to make a change then apply then go to the page you are editing to see the effect.

Which is why I am "externalising" the CSS to improve my workflow. The ability to view the various pages is fantastic but just does not seem to work (for my style of working anyway) effectively for the stylesheet

[RuralWeb]

Im playing with my HUGE screen - I can have a live site open and edit the css in DW while viewing the results on the other window. Seems to work well.

Sometimes size does matter

[jont]

Sometimes size does matter

Alas due to my diminuitive size ALT+TAB has to suffice