21 replies [Last post]
KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Hello,

Hugo if your out there today...

Iam posting my layout so far. Im needing to know if Iam starting my layout correctly...

Also,
Im having some issues with the suckerfish menu.

My dropdowns on the last menu item will not appear in IE and are completely wrong in Firefox. The whole layout position is to the left, not sure how to resolve that in FF.

Need some guidance please...

http://www.amdxltd.com/v2/
http://www.amdxltd.com/v2/amdx.css

Thanks in advance..

Keith

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

Check layout please

It's getting better but you will need to clear your floats .flash is nested in .content and is floated left as a floated element it is removed from the flow, .content does not no it's there and will not enclose it (put a background color on .content) thus the float extends through it's parent container without causing it to expand with it.
Add overflow:hidden to the .container element which will force it to enclose it's floats, if at a later stage overflow becomes problematical there are alternative solutions.

You will need some height on the header image 117px more or less.

Your widths are a bit wide (901px) this means that on a a window less than this width your going to have to scroll the menu links into view. Generally 760px page width is considered best for all screen resolutions, if working to fixed width it's probably going to be best if you fixed the widths of your ul menu elements but I would think about reducing that overall width and if needed cropping those images to accommodate.

The ul#nav li rule is causing the problem as it's stating that all li items contained in ul#nav should be floated left; if you put the child selector between those elements then it behaves I would go back and check through the example of the menu to see how this is dealt with. Following the example is the safest bet then you can tweak it once it's working correctly.

For IE you need a bit of JavaScript for this to work as IE does not support hover on anything but anchors and this works by using hover on the lists. The Javascript needed should have been available along with the examples.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Quote:

It's getting better but you will need to clear your floats .flash is nested in .content and is floated left as a floated element it is removed from the flow, .content does not no it's there and will not enclose it (put a background color on .content) thus the float extends through it's parent container without causing it to expand with it.
Add overflow:hidden to the .container element which will force it to enclose it's floats, if at a later stage overflow becomes problematical there are alternative solutions.

Ok I added this. But it is still way off in Firefox, and there appears to be a small gap between my menu and the .content div... tried a few things but nothings worked.

Will adding the bg color to .content take care of the float issue?

Quote:

You will need some height on the header image 117px more or less.

??? not sure what you mean my header image has 160px for height.

Quote:

he ul#nav li rule is causing the problem as it's stating that all li items contained in ul#nav should be floated left; if you put the child selector between those elements then it behaves I would go back and check through the example of the menu to see how this is dealt with. Following the example is the safest bet then you can tweak it once it's working correctly.

I put the ul#nav in the <ul> of the dropdown menu. If you check the link the dd menu is always active. My CSS code is identical to the one in the example. Still not sure what the prob is...

http://www.amdxltd.com/v2/

Quote:

For IE you need a bit of JavaScript for this to work as IE does not support hover on anything but anchors and this works by using hover on the lists. The Javascript needed should have been available along with the examples.

Yes the example did provide the javascript and it is included on my index page.

Keith

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

Check layout please

You cant have header contained within blueStrip and have a height greater than declared for bluestrip.

To clear the .content div apply this code to your style sheet and add the class '.clearfix' to your content div (you can apply more than one class as long as you separate the names with white space)

  
.clearfix:after {  
  display:block;  
  content:".";  
  height:0;  
  visibility:hidden;  
  clear:both;  
}  
.clearfix {display:inline-table;}/* for IEMac only */  
  
/* this line hides these rules from IEMac \*/  
* html .clearfix{height:1%;}  
.clearfix {display:block;}  
/* end hide from IEMac */  


With the gap under the menu you need to be looking at the fact that your not controlling heights your images may show one height but your elements used to create the menu have natural heights determined by font line heights padding margins etc also as you have floated the li this if the ul has no height will be escaping it , so concentrate on setting the heights to accommodate your images and ensure your controlling margins and paddings.

After the layout is stable then you can start worrying about the menu., although you seem to be removing rules for that at the moment? no display none!

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Quote:

You cant have header contained within blueStrip and have a height greater than declared for bluestrip.

I did this but how then do I get the .header to be on top of the .blueStrip and pushed to the top of the browser?

Quote:

To clear the .content div apply this code to your style sheet and add the class '.clearfix' to your content div

Did this and seemed to fix one of the issue in Firefox...

Quote:

With the gap under the menu you need to be looking at the fact that your not controlling heights your images...

I assigned a height to every ul and li as well as, margin:0 and padding:0 but there are still gaps between all my divs including the drop down menu and the dd menu images.

Keith

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

Check layout please

I'm confused by what you want to be happening with this .blueStrip div in your other post you stated that you wanted it to "snap to the browser width at the top" so I assumed that you wanted it at the top of the viewport the width of the viewport with the header bellow it?

I would fix a width on .container 901px if your still using that width and center the div using margin:0 auto;

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Quote:

I'm confused by what you want to be happening with this .blueStrip div

Sorry about the confusion...I need the actual header image to be on top of the blueStrip so the 43px blue strip appears to "continue" 100% to the left and right from the 43px blue strip on the top of the header image.
Take a look here for an example:

http://www.amdxltd.com/v2/test/

I added the 901px width to container and margin:0 auto and it has solved the layout issue if Firefox...Thank you!

The only issues left are the menu not working and getting the blueStrip aligned correctly as stated above.

Thanks so much for sticking with me on this layout Hugo, I really want to understand CSS Im starting to see how useful it is!

Keith

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

Check layout please

In that case you may need to pull the .blueStrip out and place it after the header in the flow but you will need to change around the nesting slightly header will need to open and close and probably hold the menu ul then .blueStrip followed by the container with it's nested elements, ensure that you specify width on your header.

The menu drop down is odd.

I'm not keen on the preloader as it has the habit of stalling the completion of downloading pages I have to close and re-open the page to run it from cache to be able to run tools.

I don't see why you don't just use these images as backgrounds to the list/hover elements in the CSS for a much simpler method without all that javascript in the body of the markup.

To track down the problem I would comment out all of the javascript for the images and just work on getting the drop down working it may be necessary to add an ID to the ul drop down to give greater specificity to the ul display block rule.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Quote:
I don't see why you don't just use these images as backgrounds to the list/hover elements in the CSS for a much simpler method without all that javascript in the body of the markup.

Yes, this is what I wanted to do after I got my initial layout solid. I can then use html text on top of the bg image rather than having the button names on the image. Better for search engines anyway...

Im stepping away for the day but will be implementing the suggestions you gave for the header and blueStrip...

Im sure I will be posting then...

thanks again Hugo!

Keith

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Hugo

I tried to re-arrange the order as you suggested. However, placing the blueStrip after the header gives this effect:

http://www.amdxltd.com/v2/index.php

Keith

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

Check layout please

For starters you have an extra closing div in the markup so you will need to check that out, always validate your work.

Other than that I'm not sure how this is meant to be looking the bluestrip is now bellow the header whereas before it was above , can you explain exactly what you see as being wrong about it?

FWIW, personally I don't see how that strip benefits the design and could just as well do without it; but that is a personal view.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

OK...

I have fixed my extra div issue, and removed the blueStrip. Your right it really didnt add anything to the design.

Now to this menu. Ive been over and over the code provided on the suckerfish site. Mine is exact, yet I cannot figure out why it is not working. In firefox the menu is not even dropping vertical it is going horizontal which is way off.

Im also getting about a 5px gap between the .content div and my menu div.

argg..this is frustrating!

Keith

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

Check layout please

Can't see the gap and the menu looks to be dropping down now (in FF at least) so I guess you are working on it, what got the menu working? ah Son of suckerfish Smile

The only problem is that I see no content div, I'll look to see if there's a reason.

Looks better without the bluestrip!

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

hmm are you seeing the menu drop down horizontally in FF? Im seeing it drop down below the menu bar but each sub menu is being laid out horzontially instead of one below the next (vertical).
Also my content has seemed to have dissapeared in FF!

IE appears to be better. Menu is finally working. I found some code on http://www.htmldog.com/articles/suckerfish/dropdowns/
that corrected the problem. Smile

Keith

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

Check layout please

It's a case of backwards and forwards I'm afraid. Now that you have changed things around you need to move the container div to being just that a container for all the elements or was it that before? Smile
it will have the page width on of 901px and will be the opening div, .content will sit bellow the menu bar with no width just let it expand to fill it's parent .container.

I get the first level of drop downs displaying as block have you refreshed your cache?

Just as an after thought it's a good habit to get in to comment out your closing divs so that they are easily identifiable.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Wow...seems like such a process!

But...

Here is what i see in FF

http://www.amdxltd.com/v2/amdxScreen.jpg

Keith

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

Check layout please

Keith that's not what I'm seeing at all!!

Using this link;
http://www.amdxltd.com/v2/

Are you sure that you haven't got some sort of caching issue (Crtl+F5)

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Weird! I still see it wrong!

Very odd...

Getting to the content area...
when i begin to place content is the best method to use <p> for my text? or should I use <div> for each "section" of text?
Also, if I need to use a ul will the current CSS definitions effect these new ul's? or will be it be fine because Im using #nav for all the menu ul's?

Keith

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

Check layout please

When you start to add content to .content you will need to consider that you have a floated element in there if you just place paragraphs they will extend the full width behind the float as their meant to. You may want to add another div in there that has a left margin slightly greater than the width of the floated sidebar and add your content to that.

When marking up your html try to observe semantics that is the correct sort of tag for the content in question; text should go in paragraph tag, only use divs as major divisions of the layout it's all too common to see people use them for every single element on a page.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Before I get to far, is the following code the way I would set up my structure.

The html would be this:

<div id="headings">
<h1 id="headings">The primary focus of American Medical Diagnostics </h1>
<h4 id="headings">
  is to facilitate the primary care physician in the process of delivering proper patient care and efficient case management.</h4>
</div>

CSS

#headings div {
	margin-left:207px;
	margin-top:30px;
	text-align:left;
	
}
#headings h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-style:italic;
	font-weight:bold;
	
}
#headings h4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:italic;
	
	
}

This does not seem to change anything....what am I doing wrong?

Keith

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

Check layout please

You can't repeat IDs on your <div> and then on the <h1> and <h4>, but then you don't need to because your CSS is set up right (except that it should be div#headings): you reference the h1 & h4 by the ID of their containing element.

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

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 15 years 9 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Check layout please

Ah, thanks Tyssen!

Keith