squemish

Author Topic: Weird off set in Dreamweaver with Navigation - Urgent  (Read 2663 times)

Kaminel

  • Guest
Weird off set in Dreamweaver with Navigation - Urgent
« on: August 24, 2011, 02:39:46 pm »
I have attached a picture to show what is going on. For some reason the blue marked squares are attached to the nav buttons right below it about 15px. I have no idea why these are not in the same location. So when I add a background cover to my code for the li.current attribute it shows up in the blue squares rather than where the actual buttons are which are below.  I am trying to fix this so I can create rollovers but can't get it to work properly.

Please help. I have attached an image to show you what I am concerned about and then also all my files to this site including CSS, HTML, images etc.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Weird off set in Dreamweaver with Navigation - Urgent
« Reply #1 on: August 24, 2011, 02:54:29 pm »
In your navlogo style remove the positon: relative part. Once you do that the links should work ok. Always test the page in your browser, do not rely on what it looks like in Dreamweaver.

http://er5325.aisites.com/scripts/Kaminel/FAQpage.html

Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Kaminel

  • Guest
Re: Weird off set in Dreamweaver with Navigation - Urgent
« Reply #2 on: August 24, 2011, 03:19:17 pm »
Thank you for the response. I have tested it in the browser and it looks great. The problem is that when I add     background-color: #FFFFFF; to the following like this:

#navtop li.current {
    background-color: #FFFFFF;
   color:#F40B0B;
   }

I get the result in the attached jpeg (it looks the same in the browser). The link rollovers are not in the correct location.

In your navlogo style remove the positon: relative part. Once you do that the links should work ok. Always test the page in your browser, do not rely on what it looks like in Dreamweaver.

http://er5325.aisites.com/scripts/Kaminel/FAQpage.html



erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Weird off set in Dreamweaver with Navigation - Urgent
« Reply #3 on: August 24, 2011, 03:29:37 pm »
This CSS should fix it:

/* AbsolutBoards_Style.css -- External CSS for Pages Above the Rest */

a:link {
   color: #F40B0B;
   text-decoration:none;
   }

a:visited {
   color:#58595B;
   text-decoration:none;
   }

a:focus {
   color: #F40B0B;
   text-decoration:none;
   }

a:hover {
   color: #58595B;
   text-decoration:none;
   }

a:active {
   color: #F40B0B;
   text-decoration:none;
   }

body {
   background-color: #000000;
   background-image: url(images/AbsolutBoardsBackground.jpg);
   color: #000000;
   font-family: Verdana, Geneva, sans-serif;
   font-weight: 400;
   font-size: 0.95em;
   line-height: 1.15em;
   margin:0px;
   padding:0px;
   }

#main {
   padding:23px;
   }

#content {
    background-color: #FFFFFF;
    border: 0 solid #330000;
    margin: 10px auto;
    padding: 0;
    width: 983px;
   }

#header {
   background-image: url(images/AbsolutBoardsHeader.jpg);
   background-repeat: no-repeat;
   font-family: Verdana, Geneva, sans-serif;
   height:144px;
   line-height: 36px;
   padding-top:0px;
   position:relative;
   width:100%;
   }
   
p.navigationtext {
   color: #FFFFFF;   
   float:none;
   font-size: 1em;
   padding-right:20px;
   padding-top:108px;
   text-align:right;
   }

#footer {
   background-image: url(images/AbsolutBoardsFooter.jpg);
   width:100%;
   height:45px;
   }
   
p.footertext {
   color: #FFFFFF;
   font-size:0.7em;
   padding-top:13px;
   text-align:center;
   }

.list {
   margin-left: auto;
   margin-right: auto;
   text-align:left;
   width: 20em
   }

.hh {
   text-align:center;
   }

.hw {
   text-align:left;
   }

p.note, sup {
   color:#7E7E7E;
   font-size:0.7em;
   }

P.blocktext {
   margin-left: auto;
   margin-right: auto;
   width: 18em;
   }

h1 {
   color: #000000;
   font-size: 1.6em;
   text-align:center;
   }
   
h2 {
   color: #000000;
   font-size: 1.4em;
   text-align:center;
   }
   
h3 {
   color: #000000;
   cursor:pointer;
   font-size: 1.1em;
   text-align:left;
   }
   
h4 {
   color: #000000;
   font-size: 1.1em;
   text-align:center;
   }
   
h5 {
   color: #000000;
   font-size: 1.05em;
   text-align:center;
   }

strong {
   color: #F40B0B;
   }

#navtop {
   clear: both;
   color:#FFFFFF;
   font-size: 0.9em;
   height: 10px;
   margin-left: auto;
   padding: 0;
   text-align: center;
   width:100%;
   top:100px;
   }

#navtop ul {
   text-align: center;
   width:100%;
   padding-top:108px;
   padding-left:0;
   }

#navtop li {
   color: #FFFFFF;
   display: inline;
   float:right;
   font-size: 1em;
   list-style:none;
   right:80px;
   text-decoration:none;
   text-align: center;
   }

#navtop ul li a {
   color:#FFFFFF;
   display:block;
   min-width:85px;
   text-align: center;
   text-decoration:none;
   top:53px;
   }

#navtop li.current {
   color:#F40B0B;
   background-color:#fff;
   }

#navtop ul li a:link {
   color:#FFFFFF;
   text-decoration:none;
   }

#navtop ul li a:hover {
   color:#F40B0B;
   text-decoration:none;
   }

#navtop ul li a:visited {
   color:#58595B;
   text-decoration:none;
   }

#navtop ul li a:active {
   color:#F40B0B;
   text-decoration:none;
   }

#navlogo {
   left:15px;
   top:-8px;
   z-index:1;
   }
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Kaminel

  • Guest
Re: Weird off set in Dreamweaver with Navigation - Urgent
« Reply #4 on: August 24, 2011, 03:54:20 pm »
You are awesome! Thank you sooo much.
How do I extend the white box for the current state so it goes all the way to the top of the black bar?

Picture from browser attached.

What classes do you teach? I don't think I have had you yet and was wondering if I might in the future.

I'm having a hard time learning how to get dreamweaver to do what I want if I do the css by code.

Thank you again sooo much!
Kami

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Weird off set in Dreamweaver with Navigation - Urgent
« Reply #5 on: August 24, 2011, 04:08:44 pm »
I teach a few different classes: IMD312, IMD323, IMD331, IMD401

Try this CSS:

a:link {
    color: #F40B0B;
    text-decoration: none;
}
a:visited {
    color: #58595B;
    text-decoration: none;
}
a:focus {
    color: #F40B0B;
    text-decoration: none;
}
a:hover {
    color: #58595B;
    text-decoration: none;
}
a:active {
    color: #F40B0B;
    text-decoration: none;
}
body {
    background-color: #000000;
    background-image: url("images/AbsolutBoardsBackground.jpg");
    color: #000000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.15em;
    margin: 0;
    padding: 0;
}
#main {
    padding: 23px;
}
#content {
    background-color: #FFFFFF;
    border: 0 solid #330000;
    margin: 10px auto;
    padding: 0;
    width: 983px;
}
#header {
    background-image: url("images/AbsolutBoardsHeader.jpg");
    background-repeat: no-repeat;
    font-family: Verdana,Geneva,sans-serif;
    height: 144px;
    line-height: 36px;
    padding-top: 0;
    position: relative;
    width: 100%;
}
p.navigationtext {
    color: #FFFFFF;
    float: none;
    font-size: 1em;
    padding-right: 20px;
    padding-top: 108px;
    text-align: right;
}
#footer {
    background-image: url("images/AbsolutBoardsFooter.jpg");
    height: 45px;
    width: 100%;
}
p.footertext {
    color: #FFFFFF;
    font-size: 0.7em;
    padding-top: 13px;
    text-align: center;
}
.list {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 20em;
}
.hh {
    text-align: center;
}
.hw {
    text-align: left;
}
p.note, sup {
    color: #7E7E7E;
    font-size: 0.7em;
}
P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 18em;
}
h1 {
    color: #000000;
    font-size: 1.6em;
    text-align: center;
}
h2 {
    color: #000000;
    font-size: 1.4em;
    text-align: center;
}
h3 {
    color: #000000;
    cursor: pointer;
    font-size: 1.1em;
    text-align: left;
}
h4 {
    color: #000000;
    font-size: 1.1em;
    text-align: center;
}
h5 {
    color: #000000;
    font-size: 1.05em;
    text-align: center;
}
strong {
    color: #F40B0B;
}
#navtop {
    clear: both;
    color: #FFFFFF;
    font-size: 0.9em;
    height: 10px;
    text-align: center;
}
#navtop ul {
    padding-left: 0;
    padding-top: 101px;
    text-align: center;
    width: 100%;
}
#navtop li {
    color: #FFFFFF;
    display: inline;
    float: right;
    font-size: 1em;
    height: 43px;
    list-style: none outside none;
    text-align: center;
    text-decoration: none;
}
#navtop ul li a {
    color: #FFFFFF;
    display: block;
    min-width: 85px;
    text-align: center;
    text-decoration: none;
}
#navtop li.current {
    background-color: #FFFFFF;
    color: #F40B0B;
}
#navtop ul li a:link {
    color: #FFFFFF;
    text-decoration: none;
}
#navtop ul li a:hover {
    color: #F40B0B;
    text-decoration: none;
}
#navtop ul li a:visited {
    color: #58595B;
    text-decoration: none;
}
#navtop ul li a:active {
    color: #F40B0B;
    text-decoration: none;
}
#navlogo {
    left: 15px;
    top: -8px;
    z-index: 1;
}
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu