CSS help

I want to change the color of my div box for certain pages of my site in my css, but do not know what code to use someone can help I know its simple, but I can't get this right.

It's my css if you scroll to the bottom where it says body.events is where I want to change the box color thank you.

I pointed out the css box and events in purple

/*!

* Throw Bootstrap - Business Casual theme Bootstrap (http://startbootstrap.com)

* Code licensed under the Apache 2.0 license.

* For more details, see www.Apache.org/licenses/license-2.0 .

{body

do-family: ' open without ","Helvetica Neue", Helvetica, Arial, sans-serif;

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

-o-background-size: cover;

background-attachment: fixed;

background-repeat: no-repeat;

background-position: Center;

-webkit-background-size: cover;

Color: #000;

padding-bottom: 60px banner;

}

H1,

H2,

H3,

H4,

H5,

H6 {}

text-transform: uppercase;

do-family: "Josefin slab", "Helvetica Neue", Helvetica, Arial, sans-serif;

make-weight: 700;

letter-spacing: 1px;

text-align: left;

}

{p}

line-height: 1.6;

Color: #000;

}

{h}

Max-width: 400px;

border-color: #000000;

}

. Brand new,

{p:System.NET.Sockets.IPPacketInformation.address-bar

display: none;

}

{.navbar-brand

text-transform: uppercase;

Police-weight: 900;

letter-spacing: 2px;

}

{.navbar-nav

text-transform: uppercase;

Police-weight: 500;

letter-spacing: 3px;

}

full {} .img

min-width: 100%;

}

. Brandnew-before,

{. Brand new-name

text-transform: capitalize;

}

. Brand new-front {}

margin: 15px 0;

}

{. Brand new-name

margin: 0;

font size: 4;

}

{.tagline-divider

margin: auto 15px 3px;

Max-width: 250px;

border-color: #999999;

}

. Box {}

margin-bottom: 20px;

padding: 30px 15px;

background-color: rgba (255,255,255,0.6);

}

{text .intro

text-transform: uppercase;

font size: 1.25em;

Police-weight: 400;

letter-spacing: 1px;

}

.IMG-border {}

float: none;

margin: auto 0 0;

border: 1px solid #999999;

}

.img-left {}

float: none;

margin: auto 0 0;

}

{.navbar-footer

background: rgba (255,255,255,0.8);

}

footer p {}

margin: 0;

Padding: 50px 0;

}

@media screen and (min-width: 768px) {}

{. Brandnew}

display: inherit;

margin: 0;

padding: 0 10px 30px;

text-align: center;

text-shadow: 1px 1px 2px rgba (0,0,0,0.5);

do-family: "Josefin slab", "Helvetica Neue", Helvetica, Arial, sans-serif;

font size: 5th;

make-weight: 700;

line-height: normal;

color: #fff;

background - color:RGBA (51,51,51,0.7);

text-shadow: 2px 2px #000;

}

() .top-divider

margin-top: 0;

}

.img-left {}

float: left;

right margin: 25px;

}

{p:System.NET.Sockets.IPPacketInformation.address-bar

display: inherit;

margin: 0;

padding: 0 0 40px;

text-align: center;

text-shadow: 1px 1px 2px rgba (0,0,0,0.5);

text-transform: uppercase;

font size: 1.25em;

Police-weight: 400;

letter-spacing: 3px;

color: #fff;

background-color: rgba (51,51,51,0.7);

text-shadow: 2px 2px #000;

}

.the {}

background-color: rgba (51,51,51,0.7);

display: inherit;

margin: 0;

padding-bottom: 20px

}

.the li {}

Display: inline;

}

button-share-.fb {}

position: relative

top:-7px;

}

.FB-like > span {}

vertical-align: baseline! important;

}

{.navbar}

border-radius: 0;

}

{.navbar headed

display: none;

}

{.navbar}

min-height: 0;

}

{.navbar - default

border: none;

Background: RGBA (255,255,255,0.8);

}

. NAV > li > a {}

Padding: 25px;

}

.NavBar-nav > li > a {}

line-height: normal;

}

{.navbar-nav

Display: table;

float: none;

margin: 0 auto;

table-layout: fixed;

font size: 1.15em;

}

@media screen and (min-width: 1200px) {}

. Box: after {}

content: ";

Display: table;

Clear: both;

}

/ * start of the css for every page of the Conference * /.

{Body.Gallery}

}

{Body.Academy}

}

{Body.Vicar}

}

body. Ambassador {}

}

{Body.Aviva}

}

{Body.Arena}

}

{Body.Croke}

}

{Body.Gaiety}

}

{Body.Gate}

}

{Body.grand}

}

{Body.Laughter}

}

{Body.marlay}

}

{Body.Olympia}

}

{Body.RDS}

}

{Body.Button}

background-image: url (.. / img/event%20places%20pictures/The_Button_Factory.jpg)

}

Body.Whelans {background-image: url (.. / img/event%20places%20pictures/whelans.jpg)}

}

Body.signup {background-image: url (.. / img/bianca%20photos/IMG-20150717-WA0024.jpg)}

}

{Body.Events}

background-image: url (.. / img/bianca%20photos/IMG-20150717-WA0024.jpg)

}

On your page, the class is "box" and not "events-box. Because the names match not the CSS will not apply. Once you synchronize the names so that they match, one way or the other, the CSS must be returned.

Tags: Dreamweaver

Similar Questions

CSS help lack display button I can change to block

Hiya
I'll just follow the tutorial on how to make a website and got to the bit where it says scroll up the screen (which should be between visibility and overflow-y) so I can change to block, so that my link can be clicked in any block not only writing... Please help
Claire x

St Clair Web Design says:

I know how to add manually with something, but don't know what it is I have add?

You add the following line to your css stylesheet link. That will make the link display also wider than its parent container:

display: block;

Need CSS help... Please

Hello

I am a photographer who fights with DW CS5. I spent a few hours trying to understand a CSS code, and I struck out. I hope that one of the experts here will be kind enough to look and point me in the right direction.

I just installed a plugin to make a web gallery that will work well in Safari on an iPad or iPhone Lightroom. (My main site is Flash-based, so it won't work on mobile devices.) I'm trying to change some colors in the web gallery, and this is where I have a problem.

Here is a test of the mobile site (images of the sample, not the finals):

http://www.johnblaustein.com/ipad_test/

I can set the page background color in Lightroom (c4c0b4), and I added my own identity with a matching background color plate. (These correspond to my main site).

Q: what is the CSS code to change the color of the black bar at the top of the page, including all margins?

Q: what is the CSS code to change the color of the text in the black bar (text goes here if wanted)?

Q: what is the CSS code to change the color of the white background to select which album to see?

If you click on one of the albums... then...

Q: what is the CSS code to change the color of the black bar at the top of the page, including all margins?

Q: what is the CSS code to change the color of the text in the black bar (GROUP #)?

I'd appreciate really any help you can give me.

The CSS files are pasted below.

Thank you very much!

John

www.johnblaustein.com (primary site)

---------------------------------------------------------------------------------

STYLES. CSS

body {padding: 0; margin: 0; do-family: 'Lucida Grande', Arial, Helvetica, Verdana, without serif; color: #444340; min-height: 417px ;}}

H1 {}

color: #CCC;

text-align: right;

font size: 1.3em;

padding: 10px 15px;

margin: 0;

}

H2 {make-size: 1.1em; padding: 10px; margin: 0 ;}}

IMG {border: none ;}}

a {color: #444340 ;}}

#logo {}

Display: block;

float: left;

position: absolute;

left: 5px;

top: 5px;

Max-height: 50px;

Max-width: 70px;

}

#Header {}

Background: #000000;

background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

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

height: 61px;

padding: 0;

border-bottom: 1px solid #3c3c3c;

}

#Header img {display: block; margin: 0 auto 0 ;}}

#MainContent {padding-bottom: 30px ;}}

#Footer {padding: 10px; border-top: none ;}}

#SocialLinks {padding: 10px 0 0 0 ;}}

#SocialLinks: after {clear: penalties; content: "."; display: block; height: 0; visibility: hidden ;}}

#SocialLinks a {display: block; float: left; padding-right: 15px ;}}

. Gallery {list-style: none; padding: 0; margin: 0 ;}}

. Gallery: after {clear: penalties; content: "."; display: block; height: 0; visibility: hidden ;}}

. Gallery li {}

background-repeat: repeat no.;

text-align: center;

vertical-align: middle;

float: left;

/ * Width: 33.33333333%; * /}

/*. Gallery li a {display: block; margin: 5px; border: 1px solid #3c3c3c ;} * /}

. Gallery li img {}

background-repeat: repeat no.;

background-position: center;

vertical-align: middle;

text-align: center;

display: block;

Width: 75px;

height: 75px;

/ * Width: 100%;

height: auto; */

}

/ * To get examples of the inline only * /.

#PhotoSwipeTarget {width: 100%; height: 200px ;}}

#Indicators {text-align: center; margin-top: 20px ;}}

#Indicators span {display: inline-block; height: 10px; width: 10px; margin: 10px 0 0 0; padding: 0; - webkit-border-radius: 5px; - moz-border-radius: 5px; - o-border-radius: 5px; border-radius: 5px; background: #c5c5c5; overflow: hidden ;}}

#Indicators span.current {background: #EEBF02 ;}}

/ * LIST GALLERIES * /.

#AlbumContent ul li {display: block; clear: both; position: relative; list-style-type: none}

#AlbumContent ul li: first - child {}

border-top: 1px solid #d5d5d5;

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

-webkit-border-top-left-radius: 10px;

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

-webkit-border-top-right-radius: 10px;

}

#AlbumContent ul li: last - child {}

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

-webkit-border-bottom-left-radius: 10px;

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

-webkit-border-bottom-right-radius: 10px;

}

{#Albumlist}

}

#Albumlist li {}

list-style-image: none;

padding: 5px 5px 5px 6px;

border: 1px solid #d5d5d5;

margin-right: 30px;

border-top: none;

Background: #fff url (.. / images/listArrow.png) no-repeat right;

overflow: hidden;

font size: inherit;

}

li > a

{

display: block;

margin:-6px 0 - 6px 0;

padding: 0 14px 10px 4px;

text-decoration: none;

Color: inherit;

Background: url (.. / images/listArrow.png) no-repeat Center right;

}

{#button}

Display: block;

float: left;

position: absolute;

left: 5px;

top: 14px;

padding-left: 3px;

padding-right: 3px;

height: 30px;

min-width: 35px;.

Max-width: 60px banner;

line-height: 30px;

do-family: inherit;

do-size: 12px;

make-weight: bold;

color: #FFFFFF;

text-shadow: rgba (0, 0, 0, 0.6) 0px - 1px 0;

text-overflow: ellipsis;

text-decoration: none;

white-space: nowrap;

width of the border: 8px 0 0 14px;

Background: url (.. / images/btnBack.png) no-repeat;

-webkit-border-image: url (.. / images/btnBack1.png) 0 8 0 14.

}

---------------------------------------------------------------------------------

FWD. CSS

* photoswipe.css

* Copyright (c) %% year %% by Code Computerlove (http://www.codecomputerlove.com)

Under the license MIT

* Default styles for FWD

* Avoid any position or side based styles

* When possible, except if specified already here.

* The gallery works automatically to the item of the Gallery

* positions etc.

Body.PS - active, body.ps, div.ps-, div.ps-building - building

{

Background: #000;

overflow: hidden;

}

Body.PS - active *, div.ps - active *.

{

-webkit-tap-highlight color: rgba (255, 255, 255, 0);

display: none;

}

Body.PS - active *: focus, div.ps - active *: update

{

outline: 0;

}

/ * Document overlay * /.

/ * div PS-paper-Overlay

{

Background: #000;

}*/

/ * UILayer * /.

{div. PS-uilayer

Background: #000;

cursor: pointer;

}

/ * Zoom/pan/rotate layer * /.

{div. PS-zoom-pan-rotation

Background: #000;

}

div. PS-zoom-pan-rotation * {display: block ;}}

/ * Carousel * /.

div. PS-carousel-point-loading

{

Background: url (.. / images/loader.gif) Center no repetition;

}

div. PS-carousel-point-error

{

Background: url (.. / images/error.gif) Center no repetition;

}

/ * Legend * /.

div. PS-legend

{

Background: #000000;

background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

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

border-bottom: 1px solid #42403f;

color: #ffffff;

font size: 13px;

do-family: 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;

text-align: center;

}

div. PS-legend * {display: inline ;}}

div. PS-legend-low

{

border-top: 1px solid #42403f;

border-bottom: none;

min-height: 44px;

}

div. PS-legend-content

{

Padding: 13px;

display: block;

}

/ * Toolbar * /.

div. PS-toolbar

{

Background: #000000;

background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

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

border-top: 1px solid #42403f;

color: #ffffff;

font size: 13px;

do-family: 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;

text-align: center;

height: 44px;

Display: table;

table-layout: fixed;

}

div. PS-toolbar * {}

display: block;

}

div. PS-bar tools-top

{

border-bottom: 1px solid #42403f;

border-top: none;

}

div. PS-bar tools-close, div.ps - toolbar-previous, div.ps - toolbar-next, div.ps - toolbar-play

{

cursor: pointer;

Display: table-cell;

}

div. PS-toolbar div.ps - toolbar-content div

{

Width: 44px;

height: 44px;

margin: auto 0 0;

background-repeat: no-repeat;

}

div.PS - div.ps - tools-closing-happy-toolbar toolbar

{

background-position: 0 0;

}

div.PS - bar tools-content div. PS-toolbar-previous

{

background-position:-44px 0;

}

div.PS - div.ps - bar tools-previous-people with disabilities-content-toolbar

{

background-position:-44px 44px;

}

div.PS - div.ps - tools-next-content-toolbar toolbar

{

background-position:-132px 0;

}

div.PS - div.ps - bar tools-next-people with disabilities-content-toolbar

{

background-position:-132px 44px;

}

div.PS - div.ps - tools-play-happy-toolbar toolbar

{

background-position:-88px 0;

}

/ * Display high resolution * /.

@media only screen and (- webkit - min-device-pixel-ratio: 1.5).

only screen and (min - moz-device-pixel-ratio: 1.5).

only screen and (min-resolution: 240dpi)

{

div. PS-toolbar div.ps - toolbar-content div

{

-moz-background-size: 176px 88px;

-o-background-size: 176px 88px;

-webkit-background-size: 176px 88px;

background-size: 176px 88px;

}

------------------------------------------------------------------------------------------ ----

SOURCE CODE:

	<! DOCTYPE html >
	< html >
	< head >
	< title > Insert here if wanted text< /title >
	"< meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/"/ >
	"" < meta content= "width = device-width, original scale = 1.0, maximum scale is 1.0, scalable user = 0;" name= "Windows" / > "
	"< meta name="apple-mobile-web-app-compatible" content="Yes"/ >


	"" < link href= "assets/css/styles.css" type= "text/css" rel= "stylesheet" / > "
	"" < link href= "assets/css/photoswipe.css" type= "text/css" rel= "stylesheet" / > "

"" "< link rel="stylesheet" type="text/css" media="screen" title="custom settings" href="content / custom.css">"

" < script type="text/javascript" src="assets/js/klass.min.js"> " " < /script >
" < script type="text/javascript" src="assets/js/jquery1.6.2.js"> " " < /script >
" < script type="text/javascript" src="assets/js/code.photoswipe.jquery-3.0.4.js"> " " < /script >

< script type= "text/javascript" src= "assets/js/albumsview.js" > < /script >

"< script type="text/javascript">".
var pictures =]
{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0005.jpg",
"srcthumb":"bin/images/thumb/como_0005.jpg,"
"name": "como_0005.jpg",

},

{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0049.jpg",
"srcthumb":"bin/images/thumb/como_0049.jpg,"
"name": "como_0049.jpg",

},

{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0072.jpg",
"srcthumb":"bin/images/thumb/como_0072.jpg,"
"name": "como_0072.jpg",

},

{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0080.jpg",
"srcthumb":"bin/images/thumb/como_0080.jpg,"
"name": "como_0080.jpg",

},

{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0131.jpg",
"srcthumb":"bin/images/thumb/como_0131.jpg,"
"name": "como_0131.jpg",

},

{
'album': "GROUP 1",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0185.jpg",
"srcthumb":"bin/images/thumb/como_0185.jpg,"
"name": "como_0185.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/como_0297.jpg",
"srcthumb":"bin/images/thumb/como_0297.jpg,"
"name": "como_0297.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0414.jpg",
"srcthumb":"bin/images/thumb/hearey_0414.jpg,"
"name": "hearey_0414.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0517.jpg",
"srcthumb":"bin/images/thumb/hearey_0517.jpg,"
"name": "hearey_0517.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0557.jpg",
"srcthumb":"bin/images/thumb/hearey_0557.jpg,"
"name": "hearey_0557.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0765.jpg",
"srcthumb":"bin/images/thumb/hearey_0765.jpg,"
"name": "hearey_0765.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0854.jpg",
"srcthumb":"bin/images/thumb/hearey_0854.jpg,"
"name": "hearey_0854.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/hearey_0953.jpg",
"srcthumb":"bin/images/thumb/hearey_0953.jpg,"
"name": "hearey_0953.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1312.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1312.jpg,"
"name": "jb_sh_1312.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1492.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1492.jpg,"
"name": "jb_sh_1492.jpg",

},

{
'album': "GROUP 2",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1529.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1529.jpg,"
"name": "jb_sh_1529.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1596.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1596.jpg,"
"name": "jb_sh_1596.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2470.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2470.jpg,"
"name": "jb_sh_2470.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2544.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2544.jpg,"
"name": "jb_sh_2544.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1789.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1789.jpg,"
"name": "jb_sh_1789.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1851.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1851.jpg,"
"name": "jb_sh_1851.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_1913.jpg",
"srcthumb":"bin/images/thumb/jb_sh_1913.jpg,"
"name": "jb_sh_1913.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2123.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2123.jpg,"
"name": "jb_sh_2123.jpg",

},

{
'album': "GROUP 3",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2166.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2166.jpg,"
"name": "jb_sh_2166.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2310.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2310.jpg,"
"name": "jb_sh_2310.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2599.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2599.jpg,"
"name": "jb_sh_2599.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2676.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2676.jpg,"
"name": "jb_sh_2676.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2817.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2817.jpg,"
"name": "jb_sh_2817.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2924.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2924.jpg,"
"name": "jb_sh_2924.jpg",

},

{
'album': "GROUP 4",
"title:","
'legend': 'none ',.
"srclarge": "bin/images/large/jb_sh_2936.jpg",
"srcthumb":"bin/images/thumb/jb_sh_2936.jpg,"
"name": "jb_sh_2936.jpg",

}

];

< /script >

< / head >
"< body onLoad="AlbumList()">."

"< div id="header">".
< h1 > Insert here the text if wanted to< / h1 >

"< div id="logo">".
"" < a href= "http://www.johnblaustein.com" > < img class= "logo" src= "content / logo.png" alt= "Logo" > < /a > . "
< / div >

< / div >

"< div id="AlbumContent">."
"< ul id="Albumlist' > '.

< /ul >
< / div >

"< div id="MainContent">".

"< ul id="Gallery" class="Gallery">" "

< /ul >

< / div >
< / body >
< / html >

This piece of code would probably go to the head of your page, which is somewhere betweenand

There is another solution, it seems, according to the screen size you can see here: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/

It seems to me that might be a little more inclusive.

There are plenty of options to do what you want to do, but I don't him did not myself. If this piece of code is not doing it for you, I would say this marker as replied and repost your question sepearately as, "What is the best way to redirect mobile?" If you think that you get a range of options, then perhaps, including the possibility of not to do!

All the best

Martin

Advanced CSS Help!

I use Dreamweaver CS5.5 under the master CS5.5 collection.
On my site, I currently have a unique style sheet (named style.css) and it contains 7 styles (background, .networking, .header, .footer, .main, .mainround, .instruction).
Each page is constructed as follows:
background is applied
. Networking is applied to a table top
. Header is applied to a table under the table of .networking
.main, .mainround, and/or .instruction is applied to one or more tables in the body of the site
.footer is applied to the lower table
What follows is the same on EVERY page of my site.
The background style is applied to each page (is image background, background-scrolling: scroll; and background-repeat: no-repeat)
The .networking table will be including links/scripts to share my site on social networking sites.
.Header table contains my logo to the site as a good turnover 5 images/links.
The table of .footer inludes rollover images/links.
What I want to do:
I want my 'main' style to include all information 4 supra styles in one. For example, that I will not name the substance of style (in my style.css file). When I apply the background to the body of my site, to hold this page now have my background and image parameters of the table network with links to work, the table header with my logo and animated buttons and tables of footer with my bearings. Although nothing does appear in the tables and are contained in something else, that's good, as long as it is eficient and I get the desired style / effect!
Currently everything is centered on the page with the car left and right margins, the top margin to keep everything in order and well spaced and no bottom margin. I need these settings/styles to stay, and I need to be able to insert the content between the header and footer of my site. If I need to exclude from the table footer, I understand, but I think that everything I want to do should be possible.
Thank you for your help fellow forum users. You have been an incredible help so far and I look forward to the day when I can actually meet someone any more questions!

I want my 'main' style to include all information 4 supra styles in one.

Can't happen, because in the styles that are applied to EVERYTHING, you have styles that should only be applied to certain elements on the page. This is not to say that you can not improve and simplify your CSS-

{body

Width: 800px;

background-color: #FFF;

background-image: url(images/background.png);

background-repeat: no-repeat;

Auto margin: 0;

padding: 0;

}

. Header {}

top of the margin: 20px;

}

.footer {}

height: 18px;

margin-top: 10px;

}

.instruction {}

do-family: 'Myriad Pro', arial, helvetica, sans-serif;

font size: 24 PX.

text-align: center;

vertical-align: middle;

padding: 5px;

margin-top: 10px;

}

.main {}

margin-top: 10px;

do-size: 16px;

}

{.mainround}

margin-top: 10px;

border-radius: 20px;

}

Need CSS help

I am relatively new to CSS and stumbling autour. Can someone look at this page and tell me how to get the 'more' boxes aligned in the white boxes four albums?
http://www.fbcwentzville.com/new_site_2010/index_new.html
Can I use a relative position and how would approach I did this? In addition, when you make changes to the CSS file in Dreamweaver, changes take place immediately? I tried to play with the relative position and did not see the changes in him.
Thank you!

Hey Malaperty. Let me help you out and at least solve the problem at hand. Rather easy, but it will be a small pixel playing on your end to fine tune where you want your buttons 'more' with precision.

First to add position: relative; to your .subdiv2 in the css. so the final code will look like this:

{.subdiv2}

position: relative;

Width: 225px;

float: left;

margin: 0 12px 0 0;

Background: url (.. / images/sub_div_bg.gif) repeat-y 0 #D6D7A0 0;

Color: #000;

height: 350px;

padding: 0;

}

Then remove the margins of .subdiv2 p.more in your css and add the code below.

. Subdiv2 p.more {}

position: absolute;

Bottom: 20px;

right: 20px;

}

I added 20px to the right and bottom properties, but that's where you have to play with him to refine the placement. Bottom: 20px means it will be 20px from the bottom of the .subdiv2 div and right: 20px, 20px to the right side of the element subdiv2 find it.

I won't get explain why this works as you have some links to learn all this.

In regard also to absolute positioning being a bad strategy layout... Well that may be no more evil. It is bad if it is misused, and then things can get ugly. Just use it and he can do form some of the best web effects that you can imagine. Learn, love, and always use it wisely.

Check this link on http://csszengarden.com/ here you will find that they use absolute positioning anywhere in the sampling sites... really think outside the box. So absolute positioning is not not to fear!

2 sets of links as non ordered lists. 2nd set not recognizing correct CSS, help please...

Hello!
I have two sets of links on my web page, set up in an unsorted list format. the first across the top and the second along the left side. The second set seems to always take on the styles of the first. They are both identified in the different div tags and have their own css styles...
How can you have two sets of links, set up as non ordered lists and edit both independently of each other?
the CSS code is attached...
Thanks for the help!

You have a link to the online site?

Briefly looking at the CSS, each grouped selectors must be declared in its entirety.

for example

a.the li #topMenu, li a.current:hover, li a.current: active {...

Only the first selector refers specifically to the inside
inside the div id = "topMenu". Others are global.

For specifically refers to items only within the #topMenu, the selector should read:

a.the li #topMenu, li a.current:hover, li a.current #topMenu #topMenu: active {...

and so on.

CSS help please
Hello:

In FF on Mac, I got an error of style that I can not find:

http://www.curlytopdesign.com/TestWebs/Provencher/about_us.html

It is in the bottomlinks div; the "on P & F" (no relation) and pipes are "BOLD", where the thickness of police should be normal. I think that it is only this page and only on FF.

Here's the CSS:
http://www.curlytopdesign.com/TestWebs/Provencher/stylesheets/pfmain.CSS

I'm sure it's right in front of me, but I can't. Can you help me?

Thank you, Ned
Hi, Walt:

It seems that I'm lazy, and I should practice what I preach on the Validation. Thanks for your help!

Rgds, Ned

Sensitive images CSS help

I usually make my reactive images by adding
max-width:100%; height:auto;
the css class that is called for the image.
However, I have now an image that is used with a hover and click effect that I want to make sensitive and above will not work.
The image I have is in three parts for her. The upper part is the normal state, the central part is pointing State and the lower part is the active state.
The total picture is 280px wide and high 3x125px.
In the css I use:
{.p01-button
Width: 280px;
height: 125px;
background: url('home01.png') top left no-repeat;
}
for the normal state, then:
.P01-button: hover {}
background-position: center left;
}
for the State showed up and
.P01-button: active {}
background-position: bottom left;
padding-top: 0px;
}
for the active state.
This set works very well with a browser full screen, but the images don't fit on smaller screens.
Can I do these sensitive in a manner similar to the first method?
Thanks in advance.

Thank you Nancy. I didn't know that. See you soon.

The Horizontal alignment of the table using DW4 and css help.

It works in Internet Explorer, but not FireFox.
The Web site is http://www.airrepaircarolina.com/
The CSS code is below...
* {margin: 0;} Padding: 0 ;}
. {BoldBody}
do-family: "Times New Roman", Times, serif;
do-size: 18px;
make-weight: bold;
Color: #000;
}
{#table1}
background-color: #FFF;
letter-spacing: normal;
text-align: left;
vertical-align: top;
horizontal-align: center;
Word-spacing: normal;
white-space: normal;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
top: auto;
position: fixed;
}
. {To header
do-family: "Times New Roman", Times, serif;
font size: 24 PX.
make-weight: bold;
color: #0E76BD;
}
. {BodyCopy}
do-family: "Times New Roman", Times, serif;
do-size: 18px;
make-weight: normal;
Color: #000;
}
. LinkText}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-weight: normal;
color: #FFF;
}

LannBarr wrote:

What should I put in where you have the double asterisk * with width, it is centered *

Nothing. It's just an explanatory note (or comment) in the CSS syntax.

/ * This is a CSS comment * /.

CSS help with menu

Hi all
I'm having a problem with this page: http://sambashop.BusinessCatalyst.com/
If you see the sub menu at the top right (about, contact etc) puts it perfectly in Chrome, but if you look at it in Internet Explorer, it is struck along a little bit to the right and out of the rounded corner box.
Any ideass?
See you soon

Hello Paul - Green Printery,

Don't not to dismiss the comment of Peter, but it looks like your main question where you put your dynamic menu. Here's a jsfiddle with your code in it and we see there are script tags in the tags and then your dynamic menu div is below that one tag with another empty a tag on your ul.

http://jsfiddle.NET/chaddidthis/Gmrxp/2/

If IE is doing you a service, indicating that your code is a bit wonky. If you were to delete the first a tag that keeps the script menu tag takes place online where it belongs.

Here's an another violin, showing how the menu should look like:

http://jsfiddle.NET/chaddidthis/Gmrxp/3/

Hope this helps,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

Very simple CSS help, borders

Very little CSS problem. I have a Web page that is a fixed height with blue borders on each side and the bottom. This Web page has a facebook comments box, and I noticed after a number of comments, comments exceed beyond my Web page under my foot. It does because most of comments added to a web page gets more Web page. And my Web page having a fixed height comments started running off the page. The simple solution to this would be at the height of the div to auto or don't have much style to set a height at all. I did this and for some reason when I do this my web page borders disappear. My question is how to make my Web page to extend with comments from facebook without my borders disappear. Example of a page on my site: http://covermyprofile.com/view.php?id=12 & image = http://i1176.photobucket.com/albums/x332/Ja rel20/covers/hiphop/kid_cudi_glasses.jpg
```
#bodywrap {
 width: 910px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #9FD6E1;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #9FD6E1;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #9FD6E1;
 height: 2025px; (if i set this to auto my borders disappear)
```
Rather than using the property HEIGHT use INFINITY as per

{#bodywrap}

Width: 910px;

border-left-width: 1px;

border-left-style: solid;

border-left-color: #9FD6E1;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #9FD6E1;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #9FD6E1;

overflow: hidden;

}

GRAMPS

CSS HELP! IT IS NOT CENTERING BACKGROUND

OK my page's work perfidy everywhere but not in Internet Explorer... I want the background to be centered and fixed also (so it does not scroll), everything I try send page wach hole or it alings he left
CSS:
/*****************************************/
/*************** RESET CSS ***************/
/*****************************************/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, ht ml, label, table, tr, td {margin: 0; padding: 0 ;}}
table {border-collapse: collapse; border-spacing: 0 ;}}
fieldset, img, an img,: link, img: visited img {border: 0 ;}}
address, caption, cite, dfn, code, var, th {make-style: normal; make-weight: normal ;}}
OL, ul {list-style: none ;}}
Caption, th {text-align: left ;}}
H1, h2, h3, h4, h5, h6 {make-size: 100% ;}}
q: before, q: after {content: ";}}
/ * Site * /.
{body
Background: #2 c 2825 url(images/topBg-repeat.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
font: 12px / 1.46 Verdana, Verdana, Geneva, without serif.
margin: 0;
Color: #000;
text-align: center;
}
TD {make-size: 1em ;}}
form {}
Display: inline;
margin: 0;
padding: 0;
}
H1 {make: normal 1.5em Arial, Helvetica, without serif; color: #0f0f0f;} }
H2 {make: normal 1.3em Arial, Helvetica, without serif; color: #0f0f0f;} padding-bottom: 20px; }
H3 {make: normal 1.1em Arial, Helvetica, without serif; color: #0f0f0f;} padding-bottom: 20px; }
{H2. Header}
color: #484848;
padding: 10px;
background-color: transparent;
make-weight: bold;
}
{p}
padding-bottom: 10px;
padding-left: 20px;
}
an img {border: 0 ;}}
a: link {color: #493933 ;}}
a: visited {color: #493933 ;}}
a: active {color: #bbb0a8}
a: hover {color: #bbb0a8 ;}}
. Clear {clear: both; font-size: 0em; height: 0em ;}}
.floatRight {float: right ;}}
.floatLeft {float: left ;}}
. AlignRight {text-align: right ;}}
. AlignLeft {text-align: left ;}}
.AlignCenter {text-align: center ;}}
.margincenter {auto margin: 0 ;}}
. Small {make-size: .9em ;}}
. Smaller {make-size: .8em ;}}
. Smallest {make-size: .7em ;}}
signs {size are: 1.1em ;}}
.larger {size are: 1.2em ;}}
.largest {size are: 1.3em ;}}
. Bold {make-weight: bold ;}}
. Italic {make-style: italic ;}}
.red {color: #dd0000 ;}}
. Blue {color: #0000ff ;}}
. Grey {color: #999999 ;}}
. NoWrap {white-space: normal ;}}
. Link-pipe {color: #999999 ;}}
.input_error {border-color: #cc0000 #ff0000 #ff0000 #ff0000 ;}}
Select {}
border-width: 1px;
border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.
padding: 1px 2px;
}
. Error-message {}
padding: 4px;
text-align: center;
Width: 60%;
Auto margin: 0;
color: #dd0000;
make-weight: bold;
}
. LOGN .error-message,
. AFCL .error-message,
. ORDL .error-message {}
margin: 12px 24 PX.
Width: auto;
}
any intelligence-message {}
padding: 4px;
text-align: center;
Width: 60%;
Auto margin: 0;
color: #0000dd;
}
. LOGN all intelligence-message {}
margin: 12px 24 PX.
Width: auto;
}
TD. Field textarea {}
Width: 200px; height: 100px;
}
. TextField, select, textarea,
#tax - fields of entry {} .form_row
border-width: 1px;
border-style: solid;
border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.
padding: 1px 2px;
Police: normal Arial, Helvetica, Verdana, without serif 1em;
}
. TextField, textarea {}
Width: 140px; height: 18px;
}
button {}
border: none;
background-color: #9c1f1c;
color: #ffffff;
font-size: .9em;
padding: 3px;
margin: 0;
cursor: pointer;
Width: auto;
overflow: visible;
}
{#site-container}
Width: 960px;
Auto margin: 0;
text-align: left;
border-collapse: collapse;
}
#bottom-wrap {clear: both; font-size: 0em; height: 0em ;}}
/ Top Navigation * bar * /.
{#-barre of navigation
Background: #fff url(images/mainNav-bg.jpg) no-repeat center;
height: 41px;
line-height: 0;
margin-bottom: 20px;
margin-top: 16px;
padding: 10px;
}
bar of navigation-# ul {}
Auto margin: 0;
padding: 8px 0 0 0;
Width: 560px;
Clear: both;
}
bar of navigation-# li {}
color: #ffffff;
list-style: none;
line-height: 12px;
float: right;
text-align: center;
margin: 0 2px;
Police-weight: normal;
}
navigation bar-# li.navigation - point-on {}
navigation bar-# li.navigation - point-off}
/ * tab padding * /.
bar of navigation-# li div div {padding: 5px 18px ;}}
/ * tab off images side * /.
li.navigation - point-off div.item - left navigation #-barre {background: transparent url() in top left no-repeat scroll ;}}
li.navigation - point-off div.item - right navigation #-barre {background: transparent no-repeat scroll top right ;} url()}
/ * tab on the side images * /.
li.navigation - point-on div.item - left navigation #-barre {background: transparent url() in top left no-repeat scroll ;}}
li.navigation - point-on div.item - right navigation #-barre {background: transparent no-repeat scroll top right ;} url()}
/ navigation bar links * /.
navigation bar-# li a: link,.
navigation bar-# li a: visited,
navigation bar-# li a: hover,
#-barre of navigation li a: active {}
color: #fff;
text-decoration: none;
}
{} #nav - box
#nav - search {}
{#nav} - basket
{#nav} - account
{} #nav - all - products
{#nav} - showcase
/ * Left navigation * /.
{#left-navigation}
padding: 10px 10px 20px 10px;
vertical-align: top;
Width: 200px;
}
/ * Column Pages * /.
. One-column #left navigation {display: none ;}}
. One-column #main - content {padding: 20px; width: 940px ;}}
#shipping - payment .form_row {text-align: left ;}}
{#category-tree}
background-color: #e3dad4;
padding: 10px;
}
{#category - tree - top - image}
Width: 218px;
}
{#category - tree - low - image}
background: transparent url(images/footer-bottom-bg.jpg) low no-repeat;
padding-bottom: 29px;
}
#category - tree {}
Display: block;
text-decoration: none;
color: #0f0f0f;
do-size: 12px;
}
{div #category - tree}
border-bottom: 1px solid #eee8e5;
padding: 10px 0;
}
tree-category # level - 1 {a}
padding: 4px 6px 4px 0;
background: transparent url() right no-repeat;
}
#category - tree level-2 a {padding: 4px 6px 4px 20px ;}}
#category - tree level-3 a {padding: 4px 6px 4px 30px ;}}
#category - tree level-4 a {padding: 4px 6px 4px 40px ;}}
#category - tree level-5 a {padding: 4px 6px 4px 50px ;}}
#category - tree level-6. a {padding: 4px 6px 4px 60px banner ;}}
#category - tree div.active End Sub
{#category-tree-header}
background: top url(images/categoryTitle-bg.jpg) no-repeat scroll Center;
height: 46px; Width: 218px;
padding-bottom: 20px;
}
{#category - tree - footer
background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;
height: 200px;
Padding: 60px banner 0 0 20px;
Width: 199px;
margin-top: 15px;
}
#category - tree - Footer img {}
Width: 35px; height: 35px;
margin-left: 5px;
}
{img.social - icons-first #category - tree - footer
margin-left: 25px;
}
/ * Content * /.
{#content container}
Clear: both;
margin: 0;
background-color: #fff;
}
{#main - content
vertical-align: top;
Width: 730px;
}
/ * Header/footer global * /.
{#global-in-head}
background: url() not high repetition;
}
#logo {}
height: 79px;
Width: 213px;
}
#logo a {}
Background: URL(images/logo.gif) no-repeat scroll left top transparent;
cursor: pointer;
Display: block;
height: 79px;
Width: 320px;
}
{#search}
float: right;
Padding: 40px 10px 4px 0;
}
{#header-links}
float: right;
Padding: 40px 12px 0 0;
line-height: 22px;
color: #ededed;
text-align: right;
}
{#header-links}
color: #fff;
}
{#global-footer}
border-top: 1px solid #dbcfca;
margin: 60px banner 0;
padding-top: 20px;
text-align: center;
}
#footer - links {}
color: #bbb0a8;
}
#footer - links ul {}
font: normal .9em Verdana, Helvetica, Arial, without serif.
margin: 8px 0;
padding: 0;
}
#footer - links ul li {}
list-style-type: none;
border-left: 1px solid #bbb0a8;
padding: 0 2px 0 6px;
margin: 0;
text-align: center;
Display: inline;
}
#footer - links li.first - child ul {border: 0 ;}}
#global-footer #footer - links #footer - plan of the site-link {display: none ;}}
{#miva-link}
do-size: .8em;
margin: 16px 0;
}
#miva - link has {color: #999999 ;}}
#-l ' the page header {clear: both ;}}
page #-pied {clear: both ;}}
{#maintenance}
color: #dd0000;
make-weight: bold;
}
/ * ACAD, CADE, AFAD, DAVID, OFC * /.
{.logout-link
margin: 12px 0;
float: right;
}
#customer - the label fields.
{label #affiliate - fields}
Clear: both;
float: left;
padding: 2px 5px 3px 0;
text-align: right;
white-space: nowrap;
Width: 170px;
}
label #affiliate - commissions,.
. {Label editable OSEL .not}
float: left;
Width: 120px;
make-weight: bold;
text-align: right;
padding: 0 6px 0 0;
}
#customer - input.textfield fields,
#affiliate - input.textfield fields,
#tax - input fields,
#affiliate - div.form_row div commissions,
div.form_row. fix div {}
Width: 170px;
margin: 0 4px 0 0;
}
#affiliate - commissions div.form_row div {float: left ;}}
#customer - select fields.
#affiliate - fields select {}
Width: 176px;
margin: 0 4px 0 0;
}
#login-details.
{#affiliate-Info}
margin: 16px 0 0 0;
}
#affiliate - commissions .form_row {margin: 0 8px 0 0;}
. {#Affiliate - AFAD fields
Width: 50%;
Auto margin: 0;
}
. Contact-DAVID #affiliate - #affiliate fields,
. DAVID #affiliate - #affiliate - commissions {} fields
float: left;
Width: 50%;
}
{.affiliate-code #affiliate - commissions}
Width: 230px! important;
}
{#affiliate - image #affiliate - commissions}
Width: 236px! important;
overflow: auto;
}
#affiliate-terms {margin-left: 155px ;}}
#affiliate - .form_row {div. fix fields
margin: 0 8px 0 0;
padding: 2px 0 0 0;
}
except-button,
continue-button {}
Clear: both;
text-align: right;
Padding: 24 PX 0 0 0;
}
.required {make-weight: bold ;}}
{H2. Fields-topic
background-color: #68635f;
color: #fff;
margin: 0 12px 0 0;
padding: 4px 4px 4px 12px;
}
.address2-label {margin: 0 14px 0 0;}
. Controls {}
Police: normal Verdana, Helvetica, Arial, without serif .7em;
visibility: hidden;
}
#customer - fields .controls label {}
float: none;
}
#ship-to,.
Bill - to # {}
Width: 50%;
float: left;
}
#ship - to input.checkbox h2,
#bill - h2 {input.checkbox}
margin: 0 2px 12px 0;
padding: 0;
Width: 13px;
height: 13px;
overflow: hidden;
}
div. Invalid input.textfield,
div. Invalid select,
#tax - fields of entry {} div.invalid
border-color: #cc0000 #ff0000 #ff0000 #ff0000.
}
tag div. Invalid {color: #dd0000 ;}}
. Warning-message {}
padding: 4px;
text-align: center;
Width: 60%;
Auto margin: 0;
color: #dd0000;
}
#customer - fields.editable .form_row,
{.form_row #affiliate - fields.editable}
margin: 6px 0 0 0;
text-align: left;
}
#customer - fields.non-{editable .form_row
margin: 0 4px 0 0;
text-align: left;
}
#customer - editable fields.non-etiquette.
#affiliate - fields.non-{editable label
margin: 0 0 0 30px;
padding: 0 4px 0 0;
make-weight: bold;
Width: 110px;
text-align: right;
float: left;
Clear: both;
white-space: nowrap;
}
#customer - fields.non - editable .form_row div,.
#affiliate - fields.non - editable .form_row div {}
float: left;
}
{#update-record}
Clear: both;
margin: 0 0 24 PX 24 PX.
}
label fields .tax {make-weight: bold ;}}
/ * LOGN, AFCL, ORDL ORHL * /.
. AFCL #main - happy,
. LOGN #main - happy. {#Main - content ORHL
Width: 940px;
}
. ORHL #main - content {}
. ORDL #main - content {padding: 28px 16px ;}}
. AFCL hickiing,
. LOGN hickiing {}
float: left;
height: 220px;
Width: 49%;
text-align: center;
}
. Hickiing {} ORDL
float: left;
height: 220px;
Width: 33%;
}
. .Lookup-section {} ORHL
float: left;
height: 220px;
Width: 50%;
}
. {.signin-section ORHL
float: left;
height: 220px;
Width: 48%;
}
. Lookup-section .form_row {}
. SignIn-section .form_row {}
hickiing h3,
. Lookup-section h3,
. SignIn-section h3 {}
text-align: center;
padding-bottom: 10px;
}
{.form_row}
margin: 6px 0 0 0;
text-align: center;
}
. Label LOGN,
. Label ORDL,
. {Label AFCL
Clear: both;
Width: 80px;
padding: 3px 5px;
}
. {Label ORHL
Clear: both;
padding: 3px 5px;
text-align: right;
white-space: nowrap;
Width: 90px;
}
. Grey-border-right {border-right: 1px solid #cccccc ;}}
. LOGN-entry {width: 120px ;}}
{# key invalid
Width: 23px;
float: left;
margin: 0 4px 0 0;
border-width: 1px;
border-style: solid;
border-color: #cc0000 #ff0000 #ff0000 #ff0000.
}
{}. sign-in-buttons
text-align: center;
margin: 12px 0 0 0;
}
{forgot password
font-size: .9em;
text-align: center;
margin: 12px 0 0 0;
}
/ * BASK, ASTC, OPAY, OSEL SE * /.
#basket - happy. non-modifiables.
#basket - happy .editable,
{Table #order - summary
Width: 100%;
border-left: 1px solid #d6d6d6;
border-top: 1px solid #d6d6d6;
margin-top: 10px;
}
#basket - happy. editable non-table.
table #basket - happy .editable,
{Table #order - summary
border-collapse: collapse;
Width: 100%;
}
#basket - happy editable .non-td,
TD #basket - happy .editable
#order - content td {}
background-color: #fff;
border-bottom: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
vertical-align: top;
Padding: 6px;
Police: normal 1em Arial;
}
#basket - table of contents table tr.basket - section td,
#basket - table of contents table tr.basket - section td,
#order - summary table tr.heading td {}
background-color: #68635f;
color: #fff;
make-weight: bold;
text-align: center;
do-size: 1em;
white-space: nowrap;
}
#Basketball-content .basket-Qty-input {width: 34px ;}}
#Basketball-content .item - delete {}
Width: 8%;
vertical-align: middle;
}
#basket - table of contents table .basket-section name - td.item {}
text-align: left;
}
#basket - happy .editable .item-quantity {}
Width: 13%;
text-align: center;
white-space: nowrap;
}
#basket - happy .non-{.item-editable quantity
Width: 6%;
text-align: center;
}
#Basketball-content .item-name options .item {padding-left: 16px ;}}
#basket - happy. fix .item-name {width: 59% ;}}
#basket - happy .editable .item-name {width: 66% ;}}
#basket - materials td.item - name {text-align: left ;}}
# price-.item-basketball-content {}
Width: 10%;
text-align: right;
white-space: nowrap;
}
#basket - content total .item {}
Width: 10%;
text-align: right;
}
#basket - .basket-cost materials .charge-description,.
#Basketball-content .basket-loads load .formatted {}
make-style: italic;
text-align: right;
white-space: nowrap;
}
#basket - #basket summary - totals .formatted-total,.
#basket - #basket - total summary .total-speedy {}
make-weight: bold;
text-align: right;
}
#Basketball-content .item-options td {}
.go .item-quantity {width: 8%! important ;}}
.go .item-name {width: 64%! important ;}}
#fields-key {margin: 16px 0 ;}}
.go-button {}
margin: 12px 10px;
text-align: right;
}
#payment-{} input fields
border-width: 1px;
border-style: solid;
border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.
padding: 1px 2px;
Police: normal Arial, Helvetica, Verdana, without serif 1em;
}
{label #payment - fields}
white-space: nowrap;
text-align: left;
padding: 3px 5px 3px 0;
Clear: both;
margin: 2px 0 0 0;
}
# fields - payment td {}
padding: 0 6px 0 0;
}
#shipping - payment .form_row {margin: 10px 0 0 0 ;}}
{label #shipping - payment}
float: left;
Width: 65px;
white-space: nowrap;
text-align: left;
padding: 3px 5px 3px 0;
Clear: both;
margin: 2px 0 0 0;
}
. OSEL .continue-button,
. OPAY .continue-button {}
margin: 0 12px 0 0;
}
. OFC #basket - content {margin: 32px 0 0 0 ;}}
. OPAY .fields-key {margin: 16px 0 0 0;}
fields-payment # .form_row {margin: 10px 0 0 0 ;}}
#customer - fields. fix {margin: 32px 0 0 0;}
#basket - happy. fix {32px margin: 16px 0 0 ;}}
/ * SRCH, PLST, CTGY, OUS1, OUSM * /.
. Categoy-registration
. All products,
product related,
*.search-results {}
Clear: both;
}
. Product-item {}
float: left;
padding: 0 20px 10px;
Width: 215px! important;
}
{.padding .product-point
background-color: #fff;
height: 300px;
overflow: hidden;
padding: 20px 10px;
text-align: center;
color: #484848;
border: 1px #dbcfca solid;
}
previous-next-.product {}
Clear: both;
margin: 12px 0;
}
. CTGY .product-details,
. PLST .product-details,
. SRCH .product-detail {}
overflow: hidden;
text-align: center;
color: #493933;
padding: 0;
margin: 0;
}
. Product-point .product-thumbnail {}
margin: 0 12px 0 0;
text-align: center;
}
. Product-point .product-thumbnail img {}
border: 0px solid #D6D6D6;
Max-width: 190px; height: 165PX;
}
{.purchase-buttons
text-align: center;
margin: 16px 0 0 0;
}
. Purchase-buttons input.button {}
margin: 0 0 0 17px;
padding: 5px;
float: left;
}
{td.item - .line-point buttons
white-space: nowrap;
}
. Item-buttons input.button {}
float: left;
margin: 0 0 0 5px;
padding: 5px;
}
. Point-line tr.header - line td {make-weight: bold ;}}
{.thumbnail-non-availability
Display: block;
Width: 110;
height: 110px;
background: transparent url() no-repeat scroll left top;
Auto margin: 0;
}
{image-no-availability
Display: block;
background: transparent url() no-repeat scroll left top;
}
. Next-previous {margin: 12px 0 0 0 ;}}
. Next-button {float: right ;}}
. Previous-button {float: left ;}}
. Search-new {margin: 0 3px 10px;}
. {#Main - content OUS1
padding-left: 225px;
padding-right: 225px;
}
. Upsale-section {text-align: center ;}}
. OUS1 .product-thumbnail {}
float: left;
height: 300px;
Max-width: 300px;
text-align: center;
padding: 0 20px 0 0;
}
. OUS1 .product-description {margin: 16px 0 0 0 ;}}
. OUS1 .thumbnail-non-availability {auto margin: 16px ;}}
. {#Main - content OUSM
padding-left: 160px;
padding-right: 160px;
}
{.upsale-lot
Width: 100%;
padding: 2px;
}
. Upsale-lot .heading td {make-weight: bold ;}}
. Upsale-box {width: 32px ;}}
. Upsale-name {width: 175px ;}}
. OUS1 .purchase-buttons textarea {}
text-align: center;
Width: 390px;
height: 100px;
}
. OUSM continue-button {text-align: center ;}}
.line-article table {width: 99% ;}}
. Line-item table tr.heading td {make-weight: bold ;}}
. Line-item table td {}
padding: 10px;
{border: 1px solid #ccc}
. Line-item .item-name {width: 30% ;}}
tr.alt_row .line-item {background-color: #f4ece7 ;}}
/ * PRODUCT DISPLAY * /.
.product-details-1 {}
Width: 48%;
float: left;
}
. Product-details-1 p {}
text-align: center;
}
{.product-details-2
Width: 48%;
float: left;
}
{.purchase .product-details-2 buttons}
margin: 16px 0;
text-align: left;
Width: 200px;
}
. Product-details-2 .purchase-keys {}
font-size: 17px;
height: 39px;
margin: 10px 0 0;
text-shadow: 2px 2px 2px #496E92;
Width: 140px;
}
.product-image {}
Max-width: 300px;
margin: 20px 0;
text-align: center;
}
. Product-image img {}
Max-width: 300px;
Max-height: 300px;
}
. Product-quantity-input {}
margin: 4px 0;
overflow: auto;
Width: 34px;
text-align: left;
}
{} related products
Clear: both;
16px margin: 32px 0 0;
}
. Product-attributes {}
margin: 16px 0;
text-align: left;
}
. Product-attributes td {}
padding: 4px 0;
}
. Product-attributes td.prompt}
vertical-align: top;
text-align: left;
padding-right: 5px;
}
. Product-attributes td.field}
text-align: left;
}
/ * INVC * /.
. INVC ordering-id,
. ADR ordering id {}
float: left;
make-weight: bold;
}
. INVC ordering date,
. {. Order-date ADR
float: right;
text-align: right;
}
. INVC ordering period,
. . Order date of ADR span {}
make-weight: bold;
}
. INVC h3,
. ADR h3 {}
Clear: both;
margin: 16px 0 24 PX 0;
}
/ * PATROL * /.
. PATR .continue-button {}
text-align: right;
margin: 12px 0;
}
/ * SMAP * /.
. SMAP h3 {}
}
. SMAP .category {}
Width: 33%;
text-align: left;
float: left;
}
. SMAP .category {} .padding
padding: 2px;
}
. SMAP .product {}
Width: 33%;
text-align: left;
float: left;
}
. SMAP .product .padding {padding: 2px ;}}
/ * ORDH, ADR * /.
table #orderhistory - list {border-collapse: collapse ;}}
{Table #order - summary
Width: 100%;
}
#order - summary table td.
#orderhistory - list table td {}
vertical-align: top;
}
#orderhistory - list ordering - reorganize {text-align: center ;}}
#orderhistory - list ordering-Bill {}
#orderhistory - list ordering-description {text-align: left ;}}
#orderhistory - list ordering-date {}
#orderhistory - ordering-bought list {text-align: center ;}}
#orderhistory - list ordering quantity {text-align: center ;}}
#orderhistory - list ordering {text-align: center ;}}
#orderhistory - followed list ordering {text-align: left ;}}
#orderhistory - ordering-total list {text-align: right ;}}
#-orderhistory - ordering rix {text - align:right ;}
#orderhistory - ordering-view list {}
vertical-align: middle;
padding: 0 8px;
}
#orderhistory - list tr.heading td {}
make-weight: bold;
white-space: nowrap;
}
#order - summary table tr td.order - reorganize {text-align: center ;}}
#order - summary table tr td.order - invoice {}
#order - summary table tr td.order - description {text-align: left ;}}
#order - summary table tr td.order - date {text-align: left}
#order - contents table tr td.order - bought {text-align: center ;}}
#order - summary table tr td.order - quantity {text-align: center ;}}
#order - summary table tr td.order - status {text-align: left ;}}
#order - summary table followed tr td.order {text-align: left ;}}
#order - summary table tr td.order - total {text-align: right ;}}
#order - summary table tr td.order - price {text-align: right ;}}
Description - #order - summary table tr td.charge,
#order - summary table tr td.charge - fairy {}
make-style: italic;
text-align: right;
}
#order - summary table tr td.charge - fairy {text-align: right ;}}
#order - summary table tr td.formatted - total,
#order - summary table tr td.total - speedy {}
text-align: right;
make-weight: bold;
}
{#customer-fields}
margin: 16px 0;
}
#Order_BillZip {width: 44px ;}}
.widest {width: 100% ;}}
/ * Homepage elements * /.
body. SFNT #left navigation {display: none ;}}
body. SFNT #main - content {width: 960px; padding: 0 ;}}
body. SFNT #main - content h1, body. SFNT #main - happy h2, body. H3 #main - content SFNT {margin-left: 20px ;}}
#header {}
background: url(images/header.jpg) no-repeat scroll center top transparent;
height: 280px;
20px margin: 10px 0 0;
Width: 960px;
}
#header a {}
position: absolute;
Width: 940px; height: 250px;
}
#header has {span
display: none;
}
{#free-shipping}
background: transparent url(images/shipping-banner.jpg) top no-repeat;
Width: 960px; height: 50px;
padding-bottom: 20px;
float: left;
}
#free - shipping a {}
position: absolute;
Width: 940px; height: 46px;
}
#free - shipping a span {}
display: none;
}
left-ad # {}
background: transparent url(images/left-ad.jpg) top no-repeat;
Width: 460px; height: 132px;
padding-bottom: 20px;
margin-top: 20px;
float: left;
}
left-ad # a {}
position: absolute;
Width: 460px; height: 132px;
}
a span {left-ad #}
display: none;
}
right-ad # {}
background: transparent url(images/right-ad.jpg) top no-repeat;
Width: 460px; height: 132px;
padding-bottom: 20px;
float: right;
margin-top: 20px;
}
right-ad # a {}
position: absolute;
Width: 460px; height: 132px;
}
right-ad a span {#}
display: none;
}
/ * - Welcome banner-* /.
{#welcome banner}
background: url(images/welcome-bg.jpg) no-repeat scroll center top transparent;
float: left;
height: 128px.
margin: 15px 0 0 10px;
padding-bottom: 10px;
Width: 687px;
Display: inline;
}
#welcome - banner h1 {}
color: #523F29;
margin: 0;
padding: 0;
}
#welcome - banner p {}
color: #523f29;
Width: 650px;
margin-top: 10px;
}
#welcome - banner a {}
color: #523f29;
text-decoration: underline;
margin-top: 10px;
padding: 0 20px 10px 20px;
}
/ * - end welcome banner-* /.
/ * - End newsletter-* /.
{#social-media}
background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;
float: left;
height: 128px.
margin: 15px 0 0 20px;
Width: 220px;
Display: inline;
}
# media social .the-icon {}
display: inline;
float: left;
margin: 55px 0 0 18px;
padding: 0;
}
/ * - End newsletter-* /.
/ *-subpages-* /.
#main - content h1 {}
margin: 0 20px 20px 10px;
color: #0f0f0f;
}
/ * - image css machine-* /.
.thumbnails {}
display: block;
margin: 0 0 0 60px banner;
padding: 0;
Width: 230px;
}
.thumbnails li {}
Display: block;
float: left;
margin: 5px 5px 0 0;
padding: 0;
Width: 150px;
height: 150px;
text-align: center;
border: 1px solid #eeeeee;
cursor: pointer;
}
.thumbnails li span {}
Display: inline-block;
height: 100%;
text-align: center;
vertical-align: middle;
}
.thumbnails li img {}
vertical-align: middle;
}
{.swatches}
Display: inline;
margin: 0;
padding: 0;
}
. Swatches li {}
Display: block;
float: left;
margin: 4px 4px 0 0;
padding: 0;
Width: 50px;
height: 50px;
text-align: center;
border: 1px solid #eeeeee;
cursor: pointer;
}
. Swatches li span {}
Display: inline-block;
height: 100%;
text-align: center;
vertical-align: middle;
}
. Swatches li img {}
vertical-align: middle;
}
{.product-image-margin
height: 8px;
}
{.closeup}
position: absolute;
top: 150px;
Padding: 15px;
Background: #fff;
border: 3px solid #eaeaea;
text-align: center;
display: none;
z index: 9999;
min-width: 274px;
min-height: 274px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;
-moz-box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;
-webkit-box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;
}
. CloseUp a {}
cursor: pointer;
position: absolute;
right:-15px;
top:-15px;
z index: 9999;
Color: #ff0000;
}
{#closeup - legend
margin: 15px 15px 0;
padding: 5px;
Police: "BOLD" 14px Arial, Helvetica, without serif.
color: #fff;
Background: #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: rgba(255,255,255, 0.75) 0px 0px 25px;
display: none;
}
{.closeup_backing}
position: absolute;
left: 0px;
Top: 0px;
Background: #000;
Background: RGBA (0,0,0,.6);
Filter:alpha(opacity=60);
Width: 100%;
z-index: 100;
}
. CTGY .product-details .product name.
. PLST .product-details .product name.
. SRCH .product-details .product-name {}
height: 40px;
}

Holy Mexican mole sauce! That's a lot of CSS code.

All you really need is this:

{body

Background: #2 c 2825 url(images/topBg-repeat.jpg) no repeat center top fixed;

}

See a live demonstration:

http://ALT-Web.com/demos/fixed-background.shtml

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

the combination of columns 2 and 3 css help

I need assistance with the creation of the 2 column and 3 column settings for presentations using css journal type column.
Im going to use a html to dreamweaver with fixed width template, the header and sidebar for navigation footer. My concept of design will be a block of text in css of two columns or introduction top of page under the banner/logo. Then less than a large banner for the separation and, finally, an image 3 column css text / image block sector.
Can someone give me some pointers to or the direction for this we put up. Is there an example of code that I could change or twist on my design needs?
Thanks in advance.

Which does not seem too difficult.

There are probably more than one way to skin this particular cat, but if you want a focused presentation you must first a container for the Center on the page and giving a width.

Inside this container, you would have your header div.

After another container and two columns that together would be block-level elements.

Then another div container and your three items at the level of your three columns block.

Then

I don't think that your columns must be div elements, they could be
elements, but it depends on how you add your content.

Once you have your HTML, you need to float the columns. You need a little math here because they need a width of the floating element and the combined width must not exceed the width of the container. You should also pay attention to the margin, padding, width and the box model.

My use of ID names is a bit awkward, but it shows my way of thinking.

I hope that aid, my caveat is that I'm not an expert so we could both be guided by an expert to put us right!

Kind regards

Martin

CSS help with IE/Firefox/Safari please
I just built this site http://www.d4digital.com/index.html
and want the navigation down to be in the same position on each page - everything looks OK in Safari/Firefox but not in IE. Any help much appreciated.

Ta

Booby
Thanks P@tty'll do - I am a novice on the forums and accept that there are different personalities on the Forums that give good advice but I am an experienced designer and I know what I'm doing, and specifically to make my clients.

Thanks for the tips and my apologies to Murray and Vix if your feathers are fluffed!

Return to work to solve the original problem, which I think I understand now thanks to some hacks.

concerning

Bobby

CSS help on a model.
I need to know how to make a template with CSS which can have areas keep the size and position defined. Other areas that will be adapted to the height that when you click on an element, this element, information and other products are loaded into a "content" section. What makes the page longer. I know how to do it with columns. For a better understanding of what the hell I'll just check this site out. http://sheepskinshoes.com/Ecom/BrowseStore.php?category=913 if you go here you can see the model that is at the top, right and bottom. Type in UGG on the search text entry field produced all uggs load into a sheet of "Contained" in the middle of the model and the bottom of the model is kept on the merits of the question how many elements will be in the Center. And that's what I need to know how to do with CSS.

Hope all this makes sense?

Thank you all!
It is called false columns - use Google to find tons of tutorials.

--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.dreamweavermx-templates.com - template Triage!
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"AZRealtor" wrote in message
News:fat7gd$B7b$1@forums. Macromedia.com...
> Here's a demo of what I think you're after.
> http://www.jimdavis.org/test/long.html
> In this example, I use a float: left to hold the item (the results of)
> your
(> query of database in your case). The graph on the right is the
> background
> image to the content div and simply repeats in the y axis the amount
> of the
> content changes.
>
> See http://wellstyled.com/css-2col-fluid-layout.html for a discussion
> on
> using a graph to create two columns with any longer column.
> Jim
>

CSS help

Similar Questions

Maybe you are looking for