PDA

View Full Version : Positioning problem


AlexC
06-12-2011, 04:01 AM
Hi,

I have an alignment problem in the menu bar. "purchases", "about", and "contact" are all slightly lower than "home" and "gallery." (looks perfect in Dw, but is off in browsers). Can anyone tell me why please?

It might be code for home and gallery, or code controlling the others.

If i increase the height of nav_bar in the css it moves the 3 items even lower. Zeroing out the height doesn't solve it though.

Each menu item is inside nav_bar, which is inside parent_NavDiv. Could be something there too. I played around with padding and margins... nothing. Everything that affects one of these items should affect the rest...

pics attached

Thanks

home page code. (CSS at the bottom).

<!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>Alex Cieminski Contemporary Ink Paintings</title>

<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-repeat: repeat-x;
background-attachment: scroll;
background-position: left top;
background-color: #212121;
}
.container #container {
width: 1000px;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #000000;
background-color: #FFFFFF;
border-top-width: thin;
border-top-color: #FFFFFF;
}
#sidebarLeft {
float: left;
width: 730px;
height: 175px;
}
#sidebarRight {
float: right;
height: 205px;
border-top-width: 3px;
border-left-width: 3px;
border-top-color: #8D8D8D;
border-left-color: #8D8D8D;
width: 160px;
margin-right: 32px;
background-image: url(images/right_Div_Box.gif);
background-repeat: no-repeat;
background-position: left top;
padding-left: 18px;
margin-top: 14px;
padding-top: 0px;
color: #333333;
}
.container #header {
background-color: #000000;
width: 100%;
height: 115px;
background-attachment: scroll;
background-image: url(images/cart_banner.gif);
background-repeat: no-repeat;
background-position: center bottom;
}
.container #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-right: 0;
padding-left: 0;
padding-top: 15px;
padding-bottom: 10px;
}

.mainContent {
height: 225px;
padding-bottom: 20px;
font-family: Times, "Times New Roman", Palatino;
font-size: 22px;
padding-top: 15px;
padding-right: 20px;
padding-left: 20px;
width: 960px;
color: #000000;
background-attachment: scroll;
background-image: url(images/corner_stroke.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color: #FFFFFF;
}
.mainContent_h1 {
font-family: Times, "Times New Roman", Palatino;
font-size: 16px;
color: #555555;
width: 600px;
}
ul.MenuBarHorizontal ul ul {
background-color: #000000;
margin-right: 51px;
margin-left: 51px;
padding-right: 10px;
padding-left: 10px;
}
.container #footer p {
margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
color: #CCCCCC;
font-family: Times, "Times New Roman", Palatino;
font-size: 18px;
background-color: #000000;
width: 999px;
}

h1,h2,h3,h4,h5,h6{
margin: 0px;
padding: 0px;
width: 600px;
}
-->
</style>

<link href="style sheets/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.header_2 {
color: #FFFFFF;
}

.h1_maincontent {
font-family: Times, "Times New Roman", Palatino;
font-size: xx-large;
}

a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: underline;
color: #999999;
}

.galler-thru-contact {
font-family: Times, "Times New Roman", Palatino;
font-size: 26px;
height: 200px;
}


#footer a:link {
color: #CCCCCC;
}
#footer a:visited {
color: #CCCCCC;
}
#footer a:hover {
text-decoration: none;
color: #999999;
}
#footer a:active {
text-decoration: none;
color: #CCCCCC;
}


-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>



<body class="container">

<div id="container">
<div id="header"></div>


<div id="parent_NavDiv">
<div id="nav_bar">

<div id="home">
<div align="center" class="style8">
<div align="left"><a href="index.html" class="style14">home</a></div>
</div>
</div>

<div id="gallery">
<div align="left" class="style13">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#" class="MenuBarItemSubmenu">gallery</a>
<ul>
<li><a href="#">black &amp; whites</a></li>
<li><a href="#">color</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>

<div id="purchases">
<div align="center" class="style13">
<div align="left"><a href="pages/purchases.html">purchases</a></div>
</div>
</div>

<div id="about">
<div align="center" class="style13">
<div align="left"><a href="pages/about.html">about</a></div>
</div>
</div>

<div id="contact">
<div align="center" class="style13">
<div align="left"><a href="pages/contact.html">contact</a></div>
</div>
</div>
</div>

<div id="picDiv">
<div align="center"></div>
</div>


<div class="mainContent">

<div id="sidebarRight">
<p>News </p>
<p>Sketch Book </p>
<p>Ink Painting</p>
</div>

<div class="mainContent_h1">
<h1>Contemporary Ink Brush Paintings</h1>
<br />
</div>

<div id="sidebarLeft">Content for id "sidebarLeft" Goes Here Content for MainContent goes here here are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repe</div>


</div>


<div id="footer">

<p align="center" class="style9 style8">A l e x&nbsp; C i e m i n s k i &nbsp; &nbsp; M o n m o u t h,&nbsp; O R&nbsp;&nbsp; &nbsp;&nbsp; C o p y r i g h t &nbsp; 2 0 1 0 &nbsp; &nbsp;&nbsp; <a href="pages/contact.html">C o n t a c t</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>




CSS:

@charset "UTF-8";

#picDiv {
background-color: #000000;
padding-top: 0px;
padding-bottom: 65px;
background-image: url(../images/home_image1.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 410px;
}
#parent_NavDiv/* CSS Document */

{
background-color: #000000;
height: 30px;
width: 1000px;
padding-top: 15px;
font-family: Times, "Times New Roman", Palatino;
font-size: 24px;
}
#nav_bar {
border-top-style: none;
background-color: #000000;
font-family: Times, "Times New Roman", Palatino;
font-size: 24px;
margin-right: auto;
margin-left: auto;
width: 890px;
padding-bottom: 10px;
height: 3px;
}
#home {
float: none;
clear: none;
width: 135px;
float: left;
color: #FFFFFF;
padding-left: 80px;
}

#gallery {
width: 173px;
float: left;
color: #FFFFFF;
}
#purchases {
float: left;
width: 175px;
color: #FFFFFF;
}
#about {
width: 155px;
float: left;
color: #FFFFFF;
}
#contact {
width: 155px;
float: left;
color: #FFFFFF;
}

gentleone
06-12-2011, 01:12 PM
Why all those divs? Just redo the whole menu as an unordered list and you will have much better control to align them the way you want and search engines like it like that too.
http://css.maxdesign.com.au/listamatic/

AlexC
06-12-2011, 05:12 PM
Looks like a good solution! I was proud of all my div work too... but i guess it wasn't working. How to add a drop down to one of these lists? Can it be done with spry or is there an easier solution... didn't see anything straightforward in the link you gave.

gentleone
06-12-2011, 06:18 PM
Can it be done with spry or is there an easier solution
It can be done with spry, but I'm not a big fan of all those Spry widgets. If a user has JS turned-off in his browser then he's F%^$# and can not navigate through your site.

Here are some CSS only alternatives, but they won't work in IE6 because of the :hover state on other elements in the CSS then the a tag.
http://aext.net/example/elegant-menu-with-css-only/
http://blog.ryanmaffit.com/web-development/css/purely-css-based-dropdown-menu.html

Actually if you want to target also touchscreen devices, then a dropdown menu would be not a good choice. Hover or mouseover doesn't work on them.

I've found once a onclick drop down menu, but I'll have to look for it again.

AlexC
06-13-2011, 06:02 AM
I'll probably stick with the spry, and thanks for the tip on touchscreens.

I like the list, that cleared up other problems I was having, but created a new one. see pic.

the list is inside of navcontainer (code is straight from that site) but it creates space above and below it. The list itself seems to be doing this and not the navcontainer. the blue in the screenshot is my .container div. that the space enables you to see through to. the gray is navcontainer. there should not be these spaces. i tried zeroing out all margins and padding but no effect. it wasn't there before the list.

i've ran into similar problems with h1 tags but was able to solve those.
Ideas?

AlexC
06-13-2011, 06:32 AM
oh, and here's the code. the rest is same as what I posted earlier minus the nested nav divs.

#navcontainer {
background-color: #999999;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
color: #FFFFFF;
text-decoration: none;
font-family: Times, "Times New Roman", Palatino;
font-size: 24px;
}

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

gentleone
06-13-2011, 10:24 AM
try setting a margin: 0 and padding: 0 on ul#navlist in your CSS.

AlexC
06-14-2011, 12:11 AM
needed this:

#navlist { margin: 0; padding: 0; }

AlexC
06-14-2011, 04:53 AM
As an aside, Dw won't let you use spry in the list. This link shows how to do dropdowns in a list. Thought you might be interested.

http://www.alistapart.com/articles/horizdropdowns/

A good solution to the touchscreen problem you mentioned is to make the main button for the dropdown a link to a page with the nav options.

gentleone
06-14-2011, 05:21 PM
As an aside, Dw won't let you use spry in the list.
I'm not sure what you mean with this. the Spry horizontal dropdown is already an unordered list, so no need to put it in a list.

This link shows how to do dropdowns in a list. Thought you might be interested.

http://www.alistapart.com/articles/horizdropdowns/

Yeah I know that article (is a bit outdated tho'), but the other links I gave you are also unordered lists.

A good solution to the touchscreen problem you mentioned is to make the main button for the dropdown a link to a page with the nav options.
In this case usability has to suffer from accessibility. I will have a look again if I can find that dropdown menu that works on a click instead of hover. A user have to click twice to go to a page in the submenu, but I think its better then your option.