Positioning issues … new at customizing ~

  • Hi,

    I apologize in advance as I’ve a thread here, but can’t figure out how to delete it. (Wanted to merge both issues together.)

    This is the website I’ve been working on, still needing various tweaks and such, but no matter where or how I search and the variety of things I try, I just can’t seem to fix anything properly.

    Design was a bit too complex for my first I believe. ??

    My first problem is the newspaper at the bottom, I need it to be at the very bottom, right now it has a space below it … tried setting both the margin and padding bottom to 0, but still won’t work.

    The menu, I can’t seem to get the space between each link to be the same amount of pixels, as well … when I hover the mouse over top the first link to test the drop down, I’m not able to click it! I’ve been at this for days it seems.

    Any help would be greatly appreciated … as I’d like to get this completed and over with.

    Thank you kindly,
    Jennifer

Viewing 15 replies - 1 through 15 (of 21 total)
  • Thread Starter jennifer420

    (@jennifer420)

    The following are the css codes for both the menu and newspaper sections:

    Newpaper

    .newspaper {
float:right; background:url(img/newspaper.png) bottom; width:382px; height:329px;padding-bottom:0px; }

    Menu

    .menu {
margin-top: 37px;
margin-left: 10px;
padding: 10px;
position: absolute;
width:auto;
z-index:4;  }

/* hack to correct IE5.5 faulty box model */
* html .menu {width:746px; w\idth:745px;}

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:75px;margin-right: 20px;}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {float:left;position:relative; padding:0; }

/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:75px; height:20px;  font-weight:bold; }

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:70px; w\idth:70px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:url(https://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 78px center;}

/* style the second level hover */
.menu ul ul a.drop:hover{background: url(https://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 78px center;}

.menu ul ul :hover > a.drop { url(https://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 70px center;}

/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:89px;}

/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited { color:#000; height:auto; line-height:1em; padding:5px 5px; width:68px;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:68px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000;}
.menu :hover > a, .menu ul ul :hover > a {color:#000;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

/* ================================================================
   This CSS is further CSS I have created specifically for WordPress
   so that the current page is highlighted in two levels.
   If you want it in three levels let me know.

   Author: Isaac Rowntree
   Website: www.zackdesign.biz
=================================================================== */

.menu ul ul .current_page_item a {
  color: red;
  background: white;
  border-left: 1px solid black;
}

.menu .current_page_item a {
  color: red;
  font-weight: bold;
  background: white;
}

.menu ul .current_page_item ul a {
  color: white;
  font-weight: normal;
  background: black;
}

.menu ul .current_page_item ul a:hover {
  background: gray;
}

.menu .current_page_item a:hover {
  background: white;
}

    Jennifer I cannot inspect it in Stylizer because at line 64 this: width:275px; height: 263px; no-repeat; top: 50px; left: 650px;position: absolute; seems unvalid.

    First start validating here: https://www.xhtml-css.com

    because in IE your top menu is far off to te right.

    Thread Starter jennifer420

    (@jennifer420)

    Thanks henkholland,

    Surprisingly I didn’t have as many errors as I expected and was actually able to correct them … only a few closing divs that weren’t necessary!

    However, still hasn’t fixed the issues … any more ideas or ‘direction’?

    Thank you for your time, I appreciate it.

    Jennifer

    Thread Starter jennifer420

    (@jennifer420)

    Anyone? I’ve been at this for days and really was hoping to find a little help here …

    if you increase the height in .newspaper to 350px, it’ll flow to the bottom.

    the absolute directive in your menu is messing things up in my Firefox.

    This might look better (at least it does for me):

    .menu {
    margin-bottom:27px;
    margin-left:10px;
    margin-top:37px;
    padding:10px;
    width:auto;
    z-index:4;
    }

    If you ‘text-align: center;’ your li’s, then it looks a lot nicer.

    All li’s seem to have an 75×20 dimension, don’t know where it picks that up.

    Thread Starter jennifer420

    (@jennifer420)

    Thank you kindly pboosten,

    I got the newspaper fixed! Still having some menu issues, but it’ll come … ??

    Oke, let’s start by fixing the layout: both in IE and FF your content div floats through the menu div, and that should not be the case.

    Here’s what I mean: https://devnull.boosten.org/wpforum/nageela01.JPG

    An easy fix is to put ‘clear: both’ in #content
    That gives a readable layout.

    All li’s seem to have an 75×20 dimension, don’t know where it picks that up.

    I now know: you defined a width in ‘.menu a’ of 75px.

    That’s why they all are that size. You could solve that with padding on both sides and drop the width directory, for instance ‘padding: 0 10px;’

    That gives a nice display of your menu. The next thingemy to focus on is the sub menu.

    Thread Starter jennifer420

    (@jennifer420)

    Pboosten,

    Thank you so much, I really appreciate it … all looks so much better now. Hopefully from your end too!

    Now on to the sub-menu yes Lol

    Going to apply the same and see if it fixes the issue ~`

    Thank you again,
    Jennifer

    Call me Peter, that’s more friendlier than my login name ??

    It may take a while, since I’m at work, but the modified layout already makes it easier to work on.

    I simply think the distance between the menu and the sub menu is too big. In ‘.menu ul ul’ is a directive called ‘top: 31px;’ which, when removed puts the sub menu higher. Then you’re able to click.

    oke, finally, replace that ‘top: 31px’ with ‘padding-top: 10px;’ and it looks quite decent (if I may say ?? )

    and… I would change the a:hover color to something lighter.

    Thread Starter jennifer420

    (@jennifer420)

    Thanks so much for your time Peter, I appreciate it ~` ??

    I’m slowly getting there … a few links to place in the sidebar area and such and it’s pretty much complete!

    Thank you again!

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Positioning issues … new at customizing ~’ is closed to new replies.