Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

background Houdini


mariusmoisa

Recommended Posts

hi ... again ,

 

well i've read for 5 days now and i made my header nav bar ...but , my background image vanishes . the nav bar is like this :

 

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

caption, th, td {

text-align:left;

font-weight:normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:"";

}

blockquote, q {

quotes:"" "";

}

 

/* remember to define focus styles! */

:focus {

outline: 0;

}

 

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

 

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

 

/* HTML5 tags */

header, section, footer,

aside, nav, article, figure {

display: block;

}

 

/* */

/* End of CSS reset */

/* */

 

 

body {

margin:0;

padding:0;

background:#ccc;

font-family:"Arial";

}

 

#container {

width:1000px;

margin:100px auto;

}

 

h1.page-title {

font-size:36px;

text-align:center;

margin-bottom:50px;

color:#6f6f6f;

cursor:default;

}

 

/* Styling needed for the navigatio bar */

 

ul#nav-bar {

background: #E5E5E5; /* old browsers */

background: -moz-linear-gradient(top, #E5E5E5 0%, #C4C4C4 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E5E5E5), color-stop(100%,#C4C4C4)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E5E5E5', endColorstr='#C4C4C4',GradientType=0 ); /* ie */

border:1px solid #757575;

border-bottom:3px solid #A30000;

-moz-border-radius:10px 10px 0 0;

-webkit-border-radius:10px 10px 0 0;

border-radius:10px 10px 0 0;

padding:10px 20px;

cursor:default;

}

 

ul#nav-bar li {

display:inline;

margin-right:-4px;

}

 

ul#nav-bar li a {

text-decoration:none;

font-weight:bold;

color:#1d1d1d;

border-left:1px solid #6f6f6f;

padding:10px 20px;

}

 

ul#nav-bar li:first-child a {

border-left:none;

}

 

ul#nav-bar li:nth-child(2) a {

border-left:none;

}

 

ul#nav-bar li a:hover {

background:rgba(0, 0, 0, 0.1);

}

 

ul#nav-bar li a.active {

padding:20px 20px 10px 20px;

background: #E20000;

background: -moz-linear-gradient(top, #E20000 0%, #A30000 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E20000), color-stop(100%,#A30000));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E20000', endColorstr='#A30000',GradientType=0 );

-moz-border-radius:5px 5px 0 0;

-webkit-border-radius:5px 5px 0 0;

border-radius:5px 5px 0 0;

-moz-box-shadow:0px -1px 5px #000000;

-webkit-box-shadow:0px -1px 5px #000000;

box-shadow:0px -1px 5px #000000;

filter: progid:DXImageTransform.Microsoft.Shadow(strength=0, direction=0, color='#000000');

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=0, Direction=0, Color='#000000')";

color:#fff;

}

 

/* End of styling needed for the navigation bar */

 

p.info {

text-align:center;

margin: 100px 0;

}

 

p.info a {

font-weight:bold;

text-decoration:none;

color:#1d1d1d;

}

 

p.info a:hover {

color:#fff;

}

 

 

and i've tried all the obvious colors and background color removed , but it didn't show my background image again . any help is welcomed . thank you.

Link to comment
Share on other sites

Where is this background image? If it's in the body, you're not telling it any more to put up an image. First all tags (including body) are set to a transparent background (the usual default). Then body gets a line-height set. Then body gets a light gray (#CCC) background color. Nowhere do you define a background image.

Link to comment
Share on other sites

I think you are just copy pasting complete css blocks from various sources that override other css settings you have, so the final result is a matter of good luck

 

Put all the rules you have for body all over your stylesheet into one block and clean it up then

Link to comment
Share on other sites

hi , thank you for your answers , my site is http://soundell.com and yes i took bits of codes from different sources that i see are working but only this background is not working ; the background image is define and the link is working but it can be cover or something else ( this is what i don't know ) .

Link to comment
Share on other sites

No,

body { all settings pertaining to the <body> tag in one place }

 

If you're talking about the background image for the whole site (background to <body>), you are not defining it anywhere.

Link to comment
Share on other sites

hi thank you for that and i did made the background and thanks to you i realize that is the

 

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

/*background: transparent;*/

}

 

i've made back the background to appear . thank you again to all.

Link to comment
Share on other sites

thank you for that, and i did took some lessons in The School , but for some reason i didn't find what i was looking for ( or i didn't search right ) . i want my site in css because i want code not images ( i want lower time for the site view ) and i like the wrighting of the code since i got my eyes on borland c++ , back in the days of my youth :)

Link to comment
Share on other sites

You can use multiple .css declarations of the same name...take this example;

 

.what {
 font-size: 15px;
 color: black;
}

 

Easy, 15px sized text in black.

 

Lower in the stylesheet, you now do this;

 

.what {
 text-transform: uppercase;
}

 

Now the text is still 15px and black, but is ALSO uppercase.

 

Now, you add another entry lower in the stylesheet;

 

.what {
 font-size: 20px;
}

 

Now the text is still UPPERCASE and still black but is now 20px in size.

 

Of course, it is preferable to keep all of it in one declaration (per stylesheet) for ease of changing. Most designers/developers use more than 1 stylesheet, with multiple declarations across them. You should never be changing the original stylesheet.css file, but instead use a new stylesheet file and use the Cascade.

 

The point of CSS is in it's name; http://www.w3.org/TR/REC-CSS1/#the-cascade

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...