Simple positioning question

I’m trying to make a simple design,.
Alvarado Rey Agency - Template
1st, how do I move the red box (its the logo div down, margin-top doesn’t work) so that it covers the header logo (then ill remove the border)
how can I also make the menu move down and in a little bit on the right and left so that the page’s shadow doesn’t appear broken?
thanks

Hi,

To move the red box down add 1px padding-top to the #header to stop margin collapse and reduce the header’s height by 1px to compensate.


#header {
  background: url("../images/logo.png") repeat;
 [B] height: 207px;
  padding: 1px 0 0;[/B]
}
#logo {
  border: 1px solid #FF0000;
  height: 100px;
  margin: 50px 0 0 50px;
  text-indent: -999px;
  width: 250px;
}


That will allow a margin-top to be applied to your #logo element. (You would have been better off with a more accessible image replacement technique such as gilder/levin though.)

To move your menu in just apply side margins.


.jqueryslidemenu {
    background: #414141;
    font: bold 12px Verdana;
 [B]margin: 0 36px;[/B]


}




thanks, my memory sucks…

ok, think I did this right,
Alvarado Rey Agency - Template
but a few things are amiss, like should I do something like\
#header a { text-align: -999px }
to make the link text not viable?
/Also does the menu not see relatively positioned objects?

Hi,

The page looks all broken to me now :slight_smile:

If you want to do a proper image replacement then repeat the image again in the logo and put it over the text to hide it. The text-indent method is bad for accessibility.

You can’t wrap your menu in an h3 and the first heading element should be an h1 anyway.

I’d absolutely place the header logo and nav because you have a fixed height to work and its easier in this case.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alvarado Rey Agency - Template</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#page_Wrapper {
    width: 980px;
    margin:0px auto;
    background:url(http://fixmysite.us/susan/images/logo.png) no-repeat;
    position:relative;
}
#header {
    height:208px;
    position:relative;
}
#logo {
    width:280px;
    height:100px;
    position:absolute;
    left:50px;
    top:60px;
    overflow:hidden;
    margin:0;
}
#logo span, #logo a {
    width:280px;
    height:100px;
    text-decoration:none;
    position:absolute;
    left:0;
    top:0;
}
#logo span {
    background:url(http://fixmysite.us/susan/images/logo.png) no-repeat -50px -60px;
}
#content {
    background:url(http://fixmysite.us/susan/images/content.png);
    min-height:500px;
    padding:1px 36px;
}
#footer {
    background:url(http://fixmysite.us/susan/images/footer.png);
    height:162px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<style type="text/css">
.jqueryslidemenu {
    font: bold 12px Verdana;
    background: #414141;
    margin:0;
    position:absolute;
    top:177px;
    left:36px;
    width:908px;
}
.jqueryslidemenu ul {
    margin:0;
    padding: 0;
    list-style-type: none;
    width:908px;
}
/*Top level list items*/
.jqueryslidemenu ul li {
    position: relative;
    display: inline;
    float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a {
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
}
* html .jqueryslidemenu ul li a { /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
    color: white;
}
.jqueryslidemenu ul li a:hover {
    background: black; /*tab link background during hover state*/
    color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul {
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
    display: list-item;
    float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
    top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover { /*sub menus hover style*/
    background: #eff9ff;
    color: black;
}
/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}
.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
/*html .jqueryslidemenu{height: 1%;} not needed now*/
/*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://fixmysite.us/susan/scripts/menu.js"></script>
</head>
<body>
<div id="page_Wrapper">
    <div id="header">
        <h1 id="logo"><a href="index.html">Alvarado Rey Agency <span></span></a></h1>
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul>
                <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Folder 1</a>
                    <ul>
                        <li><a href="#">Sub Item 1.1</a></li>
                        <li><a href="#">Sub Item 1.2</a></li>
                        <li><a href="#">Sub Item 1.3</a></li>
                        <li><a href="#">Sub Item 1.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Folder 2</a>
                    <ul>
                        <li><a href="#">Sub Item 2.1</a></li>
                        <li><a href="#">Folder 2.1</a>
                            <ul>
                                <li><a href="#">Sub Item 2.1.1</a></li>
                                <li><a href="#">Sub Item 2.1.2</a></li>
                                <li><a href="#">Folder 3.1.1</a>
                                    <ul>
                                        <li><a href="#">Sub Item 3.1.1.1</a></li>
                                        <li><a href="#">Sub Item 3.1.1.2</a></li>
                                        <li><a href="#">Sub Item 3.1.1.3</a></li>
                                        <li><a href="#">Sub Item 3.1.1.4</a></li>
                                        <li><a href="#">Sub Item 3.1.1.5</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub Item 2.1.4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
            </ul>
        </div>
    </div>
    <div id="content">test content </div>
    <div id="footer"> </div>
</div>
</body>
</html>


Yeah, paul’s right about that H3… I’m seeing all sorts of oddities in there – my advice is to

  1. pitch that jquery nonsense in the trash and just use a CSS menu. The stupid animation is annoying anyhow. (I’m one of those “I want to see it now, not three seconds from now” types)

  2. the entire things is NOT a level three heading, the jquery nonsense is saddling you with an unnecessary div, you’ve got a clearing break like it was 2001, that’s a lot to need fixing.

  3. holly hack is safe to send to all browsers, putting it in the markup behind an IE conditional comment is a total and complete waste of bandwidth.

  4. you’ve got multiple stylesheets and still no media types?!?

  5. The alpha transparency on those .png result in the logo png being larger than my normal target size for an entire PAGE – while the footer .png is half my target size – combined they are two-thirds my upper limit for an entire page on a site! (which toss jquery on top and there’s no space left for anything else).

Is the background going to be solid white, or a solid color – or will it be textured? I’d SERIOUSLY consider getting that background in there and pre-compositing the images so you aren’t stuck dealing with ridiculously huge .png. Failing that, and it will surprise some people I’m going to say this, you may want to give using CSS3 properties a good hard look instead of relying on images just for shadows and

I’ve been a holdout against deploying CSS3, but with IE9 being out for two months – I’m now willing to give IE8 and lower users a ‘degraded’ experience.

I would also advise against EVER, EVER nesting menus more than two deep – “folder 3.1.1” is going to be such a royal pain one’s backside to navigate to – as a rule of thumb navigating sideways in flyouts sucks… so don’t do it. You have enough pages to be pulling that type of stunt, instead of putting them in the menu let the user drilldown.

If I was writing the same thing, my markup would probably end up something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Alvarado Rey Agency - Template
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<a href="index.html">
			Alvarado Rey Agency
		</a>
		<span></span>
	</h1>

	<ul id="mainMenu">
		<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li>
			<a href="#" class="haskids">Folder 1</a>
			<ul>
				<li><a href="#">Sub Item 1.1</a></li>
				<li><a href="#">Sub Item 1.2</a></li>
				<li><a href="#">Sub Item 1.3</a></li>
				<li><a href="#">Sub Item 1.4</a></li>
			</ul>
		</li>
		<li><a href="#">Item 3</a></li>
		<li>
			<a href="#" class="haskids">Folder 2</a>
			<ul>
				<li><a href="#" class="haskids">Sub Item 2.1</a></li>
				<li>
					<a href="#" class="haskids">Folder 2.1</a>
					<ul>
						<li><a href="#">Sub Item 2.1.1</a></li>
						<li><a href="#">Sub Item 2.1.2</a></li>
						<li>
							<a href="#" class="haskids">Folder 3.1.1</a>
							<ul>
								<li><a href="#">Sub Item 3.1.1.1</a></li>
								<li><a href="#">Sub Item 3.1.1.2</a></li>
								<li><a href="#">Sub Item 3.1.1.3</a></li>
								<li><a href="#">Sub Item 3.1.1.4</a></li>
								<li><a href="#">Sub Item 3.1.1.5</a></li>
							</ul>
						</li>
						<li><a href="#">Sub Item 2.1.4</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
	</ul>

	<div id="content">
		<p>
			Some dummy content
		</p>
	</div>

	<div id="footer">
		Footer stuff goes here
	</div>
</div>

</body></html>

… with the menu CSS powered instead of scripted – with a .htc for IE only. (peterNed’s Whatever:hover most likely)

If I have time later I’ll toss together an example CSS of that, with reworked (and much smaller) images.

… and here’s what I came up with using CSS3.

Alvarado Rey Agency - Template

as with all my examples the directory:

Index of /for_others/lukeurtnowski/site2

is unlocked for easy access. Valid XHTML 1.0 Strict, would be valid CSS3 if not for browser specific properties (lets face it, at this point valid CSS is a joke), tested working perfect IE 9, FF 3.5 and 4, and the latest flavors each of Opera, Safari and Chrome. Fully functional in IE 5.5, 6, 7 & 8, it just lacks the shadow and rounded corners in that browser.

In the process it takes it down from what I consider a bit too large when you don’t have content at 128k to just 29k.

IF you really need it to support those browsers, you could probably slap alpha .png in there, though I’d suggest precompositing instead – though I’d have to see your final background image to help with that, and it may not be entirely viable for the footer. (that REALLY hinges on that background).