On oxfordmakespace.com i have two boxes that you can see when you put your browser into portrait by making it thinner than taller.
as you can see one is higher than the other, it is .nav2 i cannot get it back in place. Can some one help please?
This is the CSS for desktop view
/* navbar desktop */
.nav {
float:right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a, .nav a:link, .nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active, a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover, .nav a:active, .nav .active a:link, .nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float:left; /*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a, .nav2 a:link, .nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active, a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover, .nav2 a:active, .nav2 .active a:link, .nav2 .active a:visited {
background: #253;
}
This is the css for portrait mode
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/ /*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 0; /*physical position of box holding links*/
left: 46%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 75%; /*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 00%; /*physical position of box holding links*/
left: 2.5%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 70%; /*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*-------------------------------------------------------*/
} /*media query end--------------------------*/
I need it to be in the same position as the other one.
When your media query hits that break point remove position: relative; from .nav or set it to position: static if you're using media queries to just overwrite your desktop css
#media only screen and (max-width: 600px) and (min-width: 150px), (orientation: portrait)
.nav {
width: 100%;
/*position: relative;*/ //remove or set to position: static
min-height: 40px;
background-color: #999;
margin: 0px 0;
top: 0;
}
That will cause your header to just align to the top of the document instead of be contained within its parent
I recently built my first website (with much trial and error) and was quite pleased until I noticed that when you scroll down the page a little it creates a gap in the navigation so you can't click on the dropdowns. I'm going crazy trying to fix it. Can anyone please help? The site is at: http://lamplighters.org/education/smw.html
it appears to be an position issue that is set witht the element on the css. It would help to see your html and css code.
I can tell you that it has to do with the fact you used position: fixed. You have a series of other problems with your CSS as well.
I inspeceted the page and found a lot of things that didn't come together well for the navigation. Good housekeeping is not in order.
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}
#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
You may want to wipe your nav css clean and start from scratch.
I pulled a css file and put it below. hope this helps. Good luck with your sytle sheets in the future.
#menu{
width: 960px;
margin: 50px 0 0 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 60px;
text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
color: #FFFFFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0 35px;
padding: 0 15px;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
/*add a background position*/
background-position: left top;
}
#menu ul li:first-child a{
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menu ul li:first-child a:hover:after{
/*add color scheme*/
}
#menu ul li:last-child a{
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
i try to make my blog responsive but my navigator menu is behind the title, i want to make it in front of my title. you can look the print screen here
print-screen
and here's the nav code on media query;
.nav {
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.nav ul {
/*width: 599px;*/
padding: 5px 0;
position: absolute;
/*top: -13px;
left: -95px;*/
border: solid 1px #2FB8C8;
background: #2FB8C8 url(../images/icon-menu.png) no-repeat 10px 11px;
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
opacity:0.8;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width:599px;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
opacity:1;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
thanks in advance for your help
You could set the z-index explicitly to bring those elements forward.
.nav {
z-index:2
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.Title{
/*or what ever you gave it*/
z-index:1;
}
Check the following links for your guide. You also need to use jQuery.
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
http://webdesignerwall.com/demo/responsive-menu/
http://www.hongkiat.com/blog/responsive-web-nav/
I am developing a website, and using a traditional technique of CSS-only dropdown-menu, but integrating CSS3 attributes. That being said, the client wants specific menu items that push the bounds of the s that contain them. This is causing twitching when transitioning between menus.
The CSS looks like this:
#nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
padding-right:8px;
background-repeat:repeat-x;
z-index:3;
}
#drop { list-style-type: none; height: 32px; padding: 0; margin: 0 auto; width: 500px; vertical-align: baseline; color: #fbf9ec; }
#drop li { float: left; position: relative; padding: 0; line-height: 32px; background: #3a7c38 url(../images/nav-bg.png) repeat-x 0 0;}
#drop li:hover { background-position: 0 -40px;}
#drop li a { display: block; padding: 0 15px; color: #fbf9ec; text-decoration: none; }
#drop li a:hover { color: #fbf9ec; }
#drop li ul { opacity: 0; position: absolute; left: 0; width: 14em; background: #3a7c38; list-style-type: none; padding: 0; margin: 0; z-index: 2; box-shadow: 4px 4px 7px #888;}
#drop li:hover ul { opacity: 1; }
#drop li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#drop li:hover ul li { height: 30px; line-height: 30px; }
#drop li ul li a { background: #3a7c38; }
#drop li ul li a:hover { background: #254F24; }
The live example can be found at:
MasonandLauren.com/flotec/secondary.html
(Don't worry - The design is based on customer request, not my own)
Any help to eliminate the twitching would be appreciated!
Thanks!
~Mason
Try setting the z-index of your main nav items to 3 (the sub menu items +1).
It looks like the z-index of the sub tabs was causing them to be sequentially over and under the mouse as it moved.
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 32px;
background: #3A7C38 url(../images/nav-bg.png) repeat-x 0 0;
z-index: 3; /* <-- this is the new one */
I'm creating a store for my wife in Drupal. I'm not a web person and kept things pretty vanilla except for a few changes. It's not my first Drupal site but is my first store.
Using Firebug I have found the divs and have been able to change the colors where necessary.
I now need to make one change but I can't find where the problem is.
If I open up the table I want to change the background color of in Firebug I can view the css:
As you can see the background color reads as transparent.
If I click on the link where Firebug shows the css is coming from it points to
http://10.0.1.151/sites/default/files/css - The files in there look like caches of the css as they have very recent times and dates on.
If I change the background color temporarily using firebug:
the table looks exactly how I want it.
So I guess my question is how do I make that change to the style sheet so its permanent?
Thanks in advance,
Andrew
PS. I've chopped some of the bottom of style sheet of because I'm new and the site wont let me post more.
Below is a copy of style.css:
/* $Id: style.css,v 1.1.2.11 2010/07/02 22:11:04 sociotech Exp $ */
/* Margin, Padding, Border Resets
-------------------------------------------------------------- */
html, body, div, span, p,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, input, textarea {
margin: 0;
padding: 0;
}
img, abbr, acronym {
border: 0;
}
/* HTML Elements
-------------------------------------------------------------- */
p {
margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
}
ul, ol, dd {
margin-bottom: 1.5em;
margin-left: 2em; /* LTR */
}
li ul, li ol {
margin-bottom: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
}
a:link,
a:visited {
}
a:hover,
a:focus,
a:active {
text-decoration: underline;
}
blockquote {
}
hr {
height: 1px;
border: 1px solid gray;
}
/* tables */
table {
border-spacing: 0;
width: 100%;
}
caption {
text-align: left;
}
th {
margin: 0;
padding: 0 10px 0 0;
}
th.active img {
display: inline;
}
thead th {
padding-right: 10px;
}
td {
margin: 0;
padding: 3px;
}
/* Remove grid block styles from Drupal's table ".block" class */
td.block {
border: none;
float: none;
margin: 0;
}
/* Maintain light background/dark text on dragged table rows */
tr.drag td,
tr.drag-previous td {
background: #FFFFDD;
color: #000;
}
/* Accessibility
/-------------------------------------------------------------- */
/* skip-link to main content, hide offscreen */
#skip a,
#skip a:hover,
#skip a:visited {
height: 1px;
left: 0px;
overflow: hidden;
position: absolute;
top: -500px;
width: 1px;
}
/* make skip link visible when selected */
#skip a:active,
#skip a:focus {
background-color: #fff;
color: #000;
height: auto;
padding: 5px 10px;
position: absolute;
top: 0;
width: auto;
z-index: 99;
}
#skip a:hover {
text-decoration: none;
}
/* Helper Classes
/-------------------------------------------------------------- */
.hide {
display: none;
visibility: hidden;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
/* clear floats after an element */
/* (also in ie6-fixes.css, ie7-fixes.css) */
.clearfix:after,
.clearfix .inner:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
overflow: auto;
visibility: hidden;
}
/* Grid Layout Basics (specifics in 'gridnn_x.css')
-------------------------------------------------------------- */
/* center page and full rows: override this for left-aligned page */
.page,
.row {
margin: 0 auto;
}
/* fix layout/background display on floated elements */
.row,
.nested,
.block {
overflow: hidden;
}
/* full-width row wrapper */
div.full-width {
width: 100%;
}
/* float, un-center & expand nested rows */
.nested {
float: left; /* LTR */
margin: 0;
width: 100%;
}
/* allow Superfish menus to overflow */
#sidebar-first.nested,
#sidebar-last.nested,
div.superfish {
overflow: visible;
}
/* sidebar layouts */
.sidebars-both-first .content-group {
float: right; /* LTR */
}
.sidebars-both-last .sidebar-first {
float: right; /* LTR */
}
/* Grid Mask Overlay
-------------------------------------------------------------- */
#grid-mask-overlay {
display: none;
left: 0;
opacity: 0.75;
position: absolute;
top: 0;
width: 100%;
z-index: 997;
}
#grid-mask-overlay .row {
margin: 0 auto;
}
#grid-mask-overlay .block .inner {
background-color: #e3fffc;
outline: none;
}
.grid-mask #grid-mask-overlay {
display: block;
}
.grid-mask .block {
overflow: visible;
}
.grid-mask .block .inner {
outline: #f00 dashed 1px;
}
#grid-mask-toggle {
background-color: #777;
border: 2px outset #fff;
color: #fff;
cursor: pointer;
font-variant: small-caps;
font-weight: normal;
left: 0;
-moz-border-radius: 5px;
padding: 0 5px 2px 5px;
position: absolute;
text-align: center;
top: 22px;
-webkit-border-radius: 5px;
z-index: 998;
}
#grid-mask-toggle.grid-on {
border-style: inset;
font-weight: bold;
}
/* Site Info
-------------------------------------------------------------- */
#header-site-info {
width: auto;
}
#site-name-wrapper {
float: left; /* LTR */
}
#site-name,
#slogan {
display: block;
}
#site-name a:link,
#site-name a:visited,
#site-name a:hover,
#site-name a:active {
text-decoration: none;
}
#site-name a {
outline: 0;
}
/* Regions
-------------------------------------------------------------- */
/* Header Regions
-------------------------------------------------------------- */
#header-group {
overflow: visible;
}
/* Content Regions (Main)
-------------------------------------------------------------- */
.node-bottom {
margin: 1.5em 0 0 0;
}
/* Clear floats on regions
-------------------------------------------------------------- */
#header-top-wrapper,
#header-group-wrapper,
#preface-top-wrapper,
#main-wrapper,
#preface-bottom,
#content-top,
#content-region,
#content-bottom,
#postscript-top,
#postscript-bottom-wrapper,
#footer-wrapper,
#footer-message-wrapper {
clear: both;
}
/* Drupal Core
/-------------------------------------------------------------- */
/* Lists
/-------------------------------------------------------------- */
.item-list ul li {
margin: 0;
}
.block ul,
.block ol {
margin-left: 2em; /* LTR */
padding: 0;
}
.content-inner ul,
.content-inner ol {
margin-bottom: 1.5em;
}
.content-inner li ul,
.content-inner li ol {
margin-bottom: 0;
}
.block ul.links {
margin-left: 0; /* LTR */
}
/* Menus
/-------------------------------------------------------------- */
ul.menu li,
ul.links li {
margin: 0;
padding: 0;
}
/* Primary Menu
/-------------------------------------------------------------- */
/* use ID to override overflow: hidden for .block, dropdowns should always be visible */
#primary-menu {
overflow: visible;
}
/* remove left margin from primary menu list */
#primary-menu.block ul {
margin-left: 0; /* LTR */
}
/* remove bullets, float left */
.primary-menu ul li {
float: left; /* LTR */
list-style: none;
position: relative;
}
/* style links, and unlinked parent items (via Special Menu Items module) */
.primary-menu ul li a,
.primary-menu ul li .nolink {
display: block;
padding: 0.75em 1em;
text-decoration: none;
}
/* Add cursor style for unlinked parent menu items */
.primary-menu ul li .nolink {
cursor: default;
}
/* remove outline */
.primary-menu ul li:hover,
.primary-menu ul li.sfHover,
.primary-menu ul a:focus,
.primary-menu ul a:hover,
.primary-menu ul a:active {
outline: 0;
}
/* Secondary Menu
/-------------------------------------------------------------- */
.secondary-menu-inner ul.links {
margin-left: 0; /* LTR */
}
/* Skinr styles
/-------------------------------------------------------------- */
/* Skinr selectable helper classes */
.fusion-clear {
clear: both;
}
div.fusion-right {
float: right; /* LTR */
}
div.fusion-center {
float: none;
margin-left: auto;
margin-right: auto;
}
.fusion-center-content .inner {
text-align: center;
}
.fusion-center-content .inner ul.menu {
display: inline-block;
text-align: center;
}
/* required to override drupal core */
.fusion-center-content #user-login-form {
text-align: center;
}
.fusion-right-content .inner {
text-align: right; /* LTR */
}
/* required to override drupal core */
.fusion-right-content #user-login-form {
text-align: right; /* LTR */
}
/* Large, bold callout text style */
.fusion-callout .inner {
font-weight: bold;
}
/* Extra padding on block */
.fusion-padding .inner {
padding: 30px;
}
/* Adds 1px border and padding */
.fusion-border .inner {
border-width: 1px;
border-style: solid;
padding: 10px;
}
/* Single line menu with separators */
.fusion-inline-menu .inner ul.menu {
margin-left: 0; /* LTR */
}
.fusion-inline-menu .inner ul.menu li {
border-right-style: solid;
border-right-width: 1px;
display: inline;
margin: 0;
padding: 0;
white-space: nowrap;
}
.fusion-inline-menu .inner ul.menu li a {
padding: 0 8px 0 5px; /* LTR */
}
.fusion-inline-menu .inner ul li.last {
border: none;
}
/* Hide second level (and beyond) menu items */
.fusion-inline-menu .inner ul li.expanded ul {
display: none;
}
/* Multi-column menu style with bolded top level menu items */
.fusion-multicol-menu .inner ul {
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul li {
border-right: none;
display: block;
font-weight: bold;
}
.fusion-multicol-menu .inner ul li.last {
border-right: none;
}
.fusion-multicol-menu .inner ul li.last a {
padding-right: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded,
.fusion-multicol-menu .inner ul li.leaf {
float: left; /* LTR */
list-style-image: none;
margin-left: 50px; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li.first {
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded li.leaf {
float: none;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul {
display: block;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul li {
border: none;
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li ul.menu li {
font-weight: normal;
}
/* Split list across multiple columns */
.fusion-2-col-list .inner .item-list ul li,
.fusion-2-col-list .inner ul.menu li {
float: left; /* LTR */
width: 50%;
}
.fusion-3-col-list .inner .item-list ul li,
.fusion-3-col-list .inner ul.menu li {
float: left; /* LTR */
width: 33%;
}
.fusion-2-col-list .inner .item-list ul.pager li,
.fusion-3-col-list .inner .item-list ul.pager li {
float: none;
width: auto;
}
/* List with bottom border
Fixes a common issue when list items have bottom borders and appear to be
doubled when nested lists end and begin. This removes the extra border-bottom
*/
.fusion-list-bottom-border .inner ul li {
list-style: none;
list-style-type: none;
list-style-image: none;
}
.fusion-list-bottom-border .inner ul li,
.fusion-list-bottom-border .view-content div.views-row {
padding: 0 0 0 10px; /* LTR */
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 216.7%; /* 26px */
}
.fusion-list-bottom-border .inner ul {
margin: 0;
}
.fusion-list-bottom-border .inner ul li ul {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.fusion-list-bottom-border .inner ul li ul li.last {
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: -1px;
margin-top: -1px;
}
/*Andrew
*/
#views_slideshow_singleframe_pager_slideshow-page_2 .pager-item {
display:block;
}
#views_slideshow_singleframe_pager_slideshow-page_2 {
position:absolute;
right:0;
top:0;
}
#header-group-wrapper {
background-color:#92bbe9;
}
#main-wrapper {
background-color:#F3F3F3;
background-image:url('http://10.0.1.151/sites/all/themes/fusion/fusion_core/images/backgroundmain.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
width: auto;
}
/.front {
/background-color:#F3F3F3;
/background-image:url('http://10.0.1.151/sites/all/themes/fusion/fusion_core/images/background.jpg');
/background-repeat:no-repeat;
/background-attachment: fixed;
/width: auto;
/}
#views_slideshow_singleframe_pager_slideshow-page_2 div a img {
top:0px;
height:60px;
width:80px;
padding-right:10px;
padding-bottom:19px;
}
#mycontent{
width: 720px;
}
#block-views-new_products-block_1{
height:200px;
}
/* List with no bullet and extra padding
This is a common style for menus, which removes the bullet and adds more
vertical padding for a simple list style
*/
.fusion-list-vertical-spacing .inner ul,
.fusion-list-vertical-spacing div.views-row-first {
margin-left: 0;
margin-top: 10px;
}
.fusion-list-vertical-spacing .inner ul li,
.fusion-list-vertical-spacing div.views-row {
line-height: 133.3%; /* 16px/12px */
margin-bottom: 10px;
padding: 0;
}
.fusion-list-vertical-spacing .inner ul li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
.fusion-list-vertical-spacing .inner ul li ul {
margin-left: 10px; /* LTR */
}
/* Bold all links */
.fusion-bold-links .inner a {
font-weight: bold;
}
/* Float imagefield images left and add margin */
.fusion-float-imagefield-left .field-type-filefield,
.fusion-float-imagefield-left .image-insert,
.fusion-float-imagefield-left .imagecache {
float: left; /* LTR */
margin: 0 15px 15px 0; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-left .views-row {
clear: left; /* LTR */
}
/* Float imagefield images right and add margin */
.fusion-float-imagefield-right .field-type-filefield,
.fusion-float-imagefield-right .image-insert
.fusion-float-imagefield-right .imagecache {
float: right; /* LTR */
margin: 0 0 15px 15px; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-right .views-row {
clear: right; /* LTR */
}
/* Superfish: all menus */
.sf-menu li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
/* Superfish: vertical menus */
.superfish-vertical {
position: relative;
z-index: 9;
}
ul.sf-vertical {
background: #fafafa;
margin: 0;
width: 100%;
}
ul.sf-vertical li {
border-bottom: 1px solid #ccc;
font-weight: bold;
line-height: 200%; /* 24px */
padding: 0;
width: 100%;
}
ul.sf-vertical li a:link,
ul.sf-vertical li a:visited,
ul.sf-vertical li .nolink {
margin-left: 10px;
padding: 2px;
}
ul.sf-vertical li a:hover,
ul.sf-vertical li a.active {
text-decoration: underline;
}
ul.sf-vertical li ul {
background: #fafafa;
border-top: 1px solid #ccc;
margin-left: 0;
width: 150px;
}
ul.sf-vertical li ul li.last {
border-top: 1px solid #ccc;
margin-bottom: -1px;
margin-top: -1px;
}
ul.sf-vertical li ul {
border-top: none;
padding: 4px 0;
}
ul.sf-vertical li ul li {
border-bottom: none;
line-height: 150%; /* 24px */
}
ul.sf-vertical li ul li.last {
border-top: none;
}
ul.sf-vertical li ul li ul {
margin-top: -4px;
}
/* Pagers
-------------------------------------------------------------- */
ul.pager {
margin: 20px 0;
}
ul.pager li {
margin: 0;
white-space: nowrap;
}
ul.pager a,
ul.pager li.pager-current {
border-style: solid;
border-width: 1px;
padding: 3px 6px 2px 6px;
text-decoration: none;
}
ul.pager a:link,
ul.pager a:visited {
color: inherit;
}
ul.pager a:hover,
ul.pager a:active,
ul.pager a:focus {
border-style: solid;
border-width: 1px;
}
ul.pager span.pager-ellipsis {
padding: 0 4px;
}
.item-list .pager li {
padding: 0;
}
/* Forms
/-------------------------------------------------------------- */
/* defaults for all text fields */
.form-text {
padding: 2px;
}
/* defaults for all form buttons */
form input.form-submit {
cursor: pointer;
font-weight: bold;
margin: 2px;
padding: 3px 5px;
}
form input.form-submit:hover {
cursor: pointer;
}
fieldset {
margin: 15px 0;
padding: 10px;
}
html.js fieldset.collapsed {
margin-bottom: 15px;
}
/* limit width of form inputs */
textarea,
.form-item input,
.form-item select,
#content-region input.form-text {
max-width: 95%;
}
html.js textarea {
max-width: 100%;
}
/* adjust for collapsible fieldset differences */
fieldset.collapsible .resizable-textarea textarea {
max-width: 101.5%;
}
fieldset.collapsible .resizable-textarea .grippie {
width: 101%;
}
/* keep admin pages visible */
.page-admin #main-content-inner .nested,
.page-admin #content-group,
.page-admin #content-region,
.page-admin #content-inner {
margin-bottom: 1.5em;
overflow: visible;
}
/* keep admin form elements on top */
.page-admin .content-inner-inner {
z-index: 10;
}
/* theme settings form field width limit */
form#system-theme-settings select,
form#system-theme-settings input.form-text {
max-width: 95%;
}
/* keep theme select form visible */
#system-themes-form {
position: relative;
z-index: 1;
}
/* keep theme switcher visible */
.form-item select#edit-theme {
max-width: none;
}
/* keep admin columns from dropping under */
div.admin .left,
div.admin .right {
margin-left: 1%;
margin-right: 1%;
}
/* region labels on block admin page */
.block-region {
background-color: #F3F3F3;
border: 3px dashed #CCCCCC;
color: #555555;
font-weight: bold;
margin: 1px;
padding: 3px;
text-align: center;
text-shadow: 1px 1px #FDFDFD;
text-transform: uppercase;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* User Login Form
/-------------------------------------------------------------- */
/* remove centering on login form */
#user-login-form {
text-align: left; /* LTR */
}
#user-login-form .item-list {
margin-top: 1em;
}
#user-login-form .item-list ul {
margin-left: 0; /* LTR */
}
/* remove list styling on login form */
#user-login-form div.item-list ul li {
list-style-type: none;
margin: 0;
}
/* adjust openid link (display set in openid.js) */
#user-login-form li.openid-link a,
#user-login li.openid-link a {
background-position: 0 0;
padding: 0 0 0 20px;
}
/* User Login Form - Horizontal (Skinr selectable)
/-------------------------------------------------------------- */
.fusion-horiz-login#block-user-0 {
float: right;
margin: 20px 0 10px 0;
position: relative;
}
html.js .fusion-horiz-login#block-user-0 {
margin-top: 10px;
}
.fusion-horiz-login#block-user-0 h2.title {
display: none;
}
.fusion-horiz-login#block-user-0 #user-login-form div.form-item,
.fusion-horiz-login#block-user-0 #user-login-form input.form-submit,
.fusion-horiz-login#block-user-0 .item-list {
float: left;
margin: 0 10px 0 0;
text-align: left;
}
--- chopped
Turn off css aggregation in your /admin/settings/performance page. That will give you a much better view of where the css is coming from. In your styles.css in your theme you should be able to override whatever is coming before it. In other words: it doesn't really matter where the css is coming from, you simply need to put the css you want in your theme's style.css file.
So I believe this depends on your particular theme, so the URL to the resource would be helpful if it is live.
That said, I found the styling for tr.even for my site under:
drupal_Folder/themes/the_theme_name_I_am_using/css/style.css
I also believe that if you mouse over the blue "css_f4...." item that it will show you the name of the file that that particular CSS is in.