School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,475
  • Replies: 826,132
  • Topics: 137,479
  • Snippets: 4,420
  • Tutorials: 1,148
  • Total Online: 1,742
  • Members: 74
  • Guests: 1,668

Welcome to Dream.In.Code
Become an Expert!

Join 300,475 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,742 people online right now. Registration is fast and FREE... Join Now!




CSS Development question

 

CSS Development question
tscott

15 Jun, 2009 - 02:55 PM
Post #1

D.I.C Regular
***

Joined: 30 Jan, 2009
Posts: 297



Thanked: 1 times
My Contributions
http://www.csszengarden.com/?cssfile=/210/210.css&page=0
I'm reading this book which referred me to this site because it allows you to see the CSS and see whats going on here, now my question is did this designer just use a background image for the full site or did take specific images of the fish etc.....


CODE

/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
html {
    margin: 0;
    padding: 0;
    }
body {
    font: 75% georgia, sans-serif;
    line-height: 1.88889;
    color: #555753;
    background: #fff url(blossoms.jpg) no-repeat bottom right;
    margin: 0;
    padding: 0;
    }
p {
    margin-top: 0;
    text-align: justify;
    }
h3 {
    font: italic normal 1.4em georgia, sans-serif;
    letter-spacing: 1px;
    margin-bottom: 0;
    color: #7D775C;
    }
a:link {
    font-weight: bold;
    text-decoration: none;
    color: #B7A5DF;
    }
a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #D4CDDC;
    }
a:hover, a:active {
    text-decoration: underline;
    color: #9685BA;
    }
acronym {
    border-bottom: none;
    }


/* specific divs */
#container {
    background: url(zen-bg.jpg) no-repeat top left;
    padding: 0 175px 0 110px;  
    margin: 0;
    position: relative;
    }

#intro {
    min-width: 470px;
    }

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
    background: transparent url(h1.gif) no-repeat top left;
    margin-top: 10px;
    width: 219px;
    height: 87px;
    float: left;
    }
#pageHeader h1 span {
    display:none
    }
#pageHeader h2 {
    background: transparent url(h2.gif) no-repeat top left;
    margin-top: 58px;
    margin-bottom: 40px;
    width: 200px;
    height: 18px;
    float: right;
    }
#pageHeader h2 span {
    display:none
    }
#pageHeader {
    padding-top: 20px;
}

#quickSummary {
    clear:both;
    margin: 20px 20px 20px 10px;
    width: 160px;
    float: left;
    }
#quickSummary p {
    font: italic 10pt/22pt georgia;
    text-align:center;
    }

#preamble {
    clear: right;
    padding: 0px 10px 0 10px;
    }
#supportingText {    
    padding-left: 10px;
    margin-bottom: 40px;
    }

#footer {
    text-align: center;
    }
#footer a:link, #footer a:visited {
    margin-right: 20px;
    }

#linkList {
    margin-left: 600px;
    position: absolute;
    top: 0;
    right: 0;
    }
#linkList2 {
    font: 10px verdana, sans-serif;
    background: transparent url(paper-bg.jpg) top left repeat-y;
    padding: 10px;
    margin-top: 150px;
    width: 130px;
    }
#linkList h3.select {
    background: transparent url(h3.gif) no-repeat top left;
    margin: 10px 0 5px 0;
    width: 97px;
    height: 16px;
    }
#linkList h3.select span {
    display:none
    }
#linkList h3.favorites {
    background: transparent url(h4.gif) no-repeat top left;
    margin: 25px 0 5px 0;
    width: 60px;
    height: 18px;
    }
#linkList h3.favorites span {
    display:none
    }
#linkList h3.archives {
    background: transparent url(h5.gif) no-repeat top left;
    margin: 25px 0 5px 0;
    width:57px;
    height: 14px;
    }
#linkList h3.archives span {
    display:none
    }
#linkList h3.resources {
    background: transparent url(h6.gif) no-repeat top left;
    margin: 25px 0 5px 0;
    width:63px;
    height: 10px;
    }
#linkList h3.resources span {
    display:none
    }


#linkList ul {
    margin: 0;
    padding: 0;
    }
#linkList li {
    line-height: 2.5ex;
    background: transparent url(cr1.gif) no-repeat top center;
    display: block;
    padding-top: 5px;
    margin-bottom: 5px;
    list-style-type: none;
    }
#linkList li a:link {
    color: #988F5E;
    }
#linkList li a:visited {
    color: #B3AE94;
    }


#extraDiv1 {
    background: transparent url(cr2.gif) top left no-repeat;
    position: absolute;
    top: 40px;
    right: 0;
    width: 148px;
    height: 110px;
    }
.accesskey {
    text-decoration: underline;
    }
User is offlineProfile CardPM
+Quote Post


RudiVisser

RE: CSS Development Question

15 Jun, 2009 - 03:14 PM
Post #2

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
The fish are all contained within extraDivX.
User is online!Profile CardPM
+Quote Post

tommyflint

RE: CSS Development Question

15 Jun, 2009 - 03:17 PM
Post #3

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
I was just curious how you were able to work that out?

smile.gif

tommyflint
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: CSS Development Question

15 Jun, 2009 - 03:20 PM
Post #4

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
Opera's built-in (yes firefox users don't give me the firebug addon crap) developer tools -> http://rudivisser.com/opera.png
User is online!Profile CardPM
+Quote Post

tommyflint

RE: CSS Development Question

15 Jun, 2009 - 03:24 PM
Post #5

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
Wow i gotta swap to opera smile.gif
User is offlineProfile CardPM
+Quote Post

tscott

RE: CSS Development Question

15 Jun, 2009 - 03:46 PM
Post #6

D.I.C Regular
***

Joined: 30 Jan, 2009
Posts: 297



Thanked: 1 times
My Contributions
is the ocean a seperate part as well tommy could you post where that is? thanks a lot for your help. also did the designer do this all in a text file how exactly do the pros do it I know no1 uses frontpage or dreamweaver I'm just starting out sorry if these questions are bad but my CSS book doesnt cover those
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: CSS Development Question

15 Jun, 2009 - 03:51 PM
Post #7

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
Yeah the ocean is also its own image which is repeated on the X axis in extra div2.

Well i personally use dreamweaver and i'm pretty sure most Pofessional designers use dreamweaver or a very similar application

smile.gif

tommyflint

This post has been edited by tommyflint: 15 Jun, 2009 - 03:52 PM
User is offlineProfile CardPM
+Quote Post

tscott

RE: CSS Development Question

15 Jun, 2009 - 08:27 PM
Post #8

D.I.C Regular
***

Joined: 30 Jan, 2009
Posts: 297



Thanked: 1 times
My Contributions
thanks for the help tommy perhaps some other developers can let me know what they use
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: CSS Development Question

15 Jun, 2009 - 08:36 PM
Post #9

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
Well, I am one who believe in knowing the stuff fully, so I do everything with notepad, or another standard text editor. No need for fancy syntax highlighting and definately no need for a "design" view.

I support Notepad, Notepad++, and <textarea></textarea>
(That last one is HTML smile.gif)
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: CSS Development Question

16 Jun, 2009 - 02:24 AM
Post #10

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
When working locally I use Dreamweaver's code view + Site Manager, because together they're awesome. Instead of having to use an FTP client just hit upload and job done, saves a bit of time especially when fixing a tedious bug.

When I'm working remotely I'll use Notepad++ installed on our (and clients') servers.
User is online!Profile CardPM
+Quote Post

tscott

RE: CSS Development Question

16 Jun, 2009 - 01:23 PM
Post #11

D.I.C Regular
***

Joined: 30 Jan, 2009
Posts: 297



Thanked: 1 times
My Contributions
where did u find that extra div 5 when I open the css file I don't see it also what does div id= mean?
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: CSS Development Question

16 Jun, 2009 - 01:35 PM
Post #12

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
That is a good point why they dont show you the whole CSS file :S
Well here is the whole css file if you want to analysis it:

CODE

body {
font-family: Arial, "Helvetica", sans-serif;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0% 0%;
background-color: #122981;
background-image: url("http://www.csszengarden.com/210/gradient_bg.jpg");
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
p {
text-align: justify;
color: #ffffff;
font-size: 0.7em;
line-height: 1.25em;
}
a:link, a:visited {
text-decoration: underline;
color: #a5bcff;
}
a:hover, a:active {
text-decoration: none;
color: #ff9600;
}
li {
text-decoration: none;
list-style-type: none;
display: block;
color: #ffffff;
}
#container {
width: 536px;
padding-left: 20px;
padding-right: 20px;
margin-top: 200px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
z-index: 6;
}
#intro {
width: 356px;
float: left;
}
#pageHeader {
margin-bottom: 20px;
float: left;
}
#pageHeader h1 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h1.gif");
width: 355px;
height: 29px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#pageHeader h2 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h2.gif");
width: 167px;
height: 12px;
float: right;
margin-top: 2px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
#quickSummary {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider01.jpg");
float: left;
padding-top: 50px;
}
#quickSummary p.p1 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/summary.gif");
width: 356px;
height: 49px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 6px;
margin-left: 0px;
}
#quickSummary p.p1 span, #pageHeader h2 span, #pageHeader h1 span {
display: none;
}
#quickSummary p.p2 {
width: 355px;
display: block;
}
#supportingText {
width: 356px;
float: left;
}
#supportingText h3, #intro h3 {
letter-spacing: 1px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
color: #7d775c;
width: 355px;
height: 18px;
}
#preamble, #explanation, #participation, #benefits, #requirements {
padding-top: 60px;
margin-top: 6px;
float: left;
}
#preamble {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider02.jpg");
}
#explanation {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider03.jpg");
}
#participation {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider04.jpg");
}
#benefits {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider05.jpg");
}
#requirements {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/divider06.jpg");
}
#linkList {
width: 141px;
position: absolute;
top: 101px;
left: 410px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#linkList2 {
font-size: 0.7em;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/paper-bg.jpg");
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 141px;
}
#linkList ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#linkList a.c {
display: inline;
color: #ff9600;
text-decoration: none;
font-weight: 400;
text-transform: capitalize;
}
#linkList li a {
color: #ffffff;
text-decoration: none;
}
#linkList li a:hover {
text-decoration: underline;
}
#lselect li {
line-height: 16px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
border-bottom-color: #003d90;
border-bottom-width: 1px;
border-bottom-style: solid;
}
#lselect li a {
font-weight: 700;
color: #ffffff;
display: block;
text-transform: uppercase;
text-decoration: none;
}
#larchives li, #lresources li {
line-height: 16px;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
color: #ffffff;
}
#linkList h3 {
width: 141px;
height: 20px;
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#preamble h3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_road.gif");
}
#explanation h3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_about.gif");
}
#participation h3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_participation.gif");
}
#benefits h3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_benefits.gif");
}
#requirements h3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_requirements.gif");
}
#linkList h3.select {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_select.gif");
}
#linkList h3.archives {
margin-top: 22px;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_archives.gif");
}
#linkList h3.resources {
margin-top: 22px;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/h3_resources.gif");
}
#preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span {
display: none;
}
#footer {
margin-top: 20px;
margin-bottom: 25px;
}
#footer a:link, #footer a:visited {
margin-right: 6px;
color: #ff9600;
}
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv3 span, #extraDiv4, #extraDiv5, #extraDiv6, #extraDiv6 span {
position: absolute;
}
#extraDiv1 {
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/clouds.jpg");
top: 0px;
right: 0px;
width: 100%;
height: 104px;
}
#extraDiv2 {
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/water_edge.jpg");
top: 104px;
right: 0px;
width: 100%;
height: 75px;
}
#extraDiv3 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 100% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/fish01.jpg");
z-index: 3;
top: 960px;
right: 4%;
width: 300px;
height: 123px;
}
#extraDiv3 span {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/fish_bottom.gif");
z-index: 3;
top: 1000px;
width: 224px;
height: 108px;
}
#extraDiv4 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/sunlight.jpg");
z-index: 3;
top: 0px;
left: 0px;
width: 472px;
height: 481px;
}
#extraDiv5 {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/fish_top.gif");
z-index: 7;
top: 220px;
left: 20px;
width: 180px;
height: 80px;
}
#extraDiv6 {
z-index: 2;
top: 125em;
left: 0px;
width: 100%;
height: 426px;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0% 100%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/seafloor_bg.jpg");
}
#extraDiv6 span {
z-index: 2;
top: 0px;
left: 0px;
width: 633px;
height: 426px;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0% 0%;
background-color: transparent;
background-image: url("http://www.csszengarden.com/210/seafloor.jpg");
}


smile.gif
tommyflint

This post has been edited by tommyflint: 16 Jun, 2009 - 01:36 PM
User is offlineProfile CardPM
+Quote Post

tscott

RE: CSS Development Question

16 Jun, 2009 - 01:47 PM
Post #13

D.I.C Regular
***

Joined: 30 Jan, 2009
Posts: 297



Thanked: 1 times
My Contributions
what does div id mean?

This post has been edited by tnachbauer: 16 Jun, 2009 - 01:55 PM
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: CSS Development Question

16 Jun, 2009 - 01:48 PM
Post #14

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
Using Opera smile.gif
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: CSS Development Question

16 Jun, 2009 - 01:53 PM
Post #15

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
QUOTE(tnachbauer @ 16 Jun, 2009 - 01:23 PM) *

what does div id= mean?

It gives an ID to a div.. IDs should always be unique when relating to an element, helps with Javascript too biggrin.gif

You can set a style for a div with an ID with the CSS
CODE
div#IDNAME {
   /** whatever **/
}
User is online!Profile CardPM
+Quote Post

crazyjugglerdrummer

RE: CSS Development Question

16 Jun, 2009 - 03:15 PM
Post #16

YOUR AD HERE
Group Icon

Joined: 7 Jan, 2009
Posts: 677



Thanked: 94 times
Dream Kudos: 425
My Contributions
The extradiv(1-6) are all completely empty and serve as handles for adding background images aka all of the images you see at the top.

I hear when people are working on a major website project everyone will be using dreamweaver. In a huge project they can afford it, and I guess some features are nice to speed up the dev process. Can we have some opinions/answers as to who uses it, and who doesn't? What features of it do people like most? biggrin.gif
User is offlineProfile CardPM
+Quote Post

cgomez82

RE: CSS Development Question

16 Jun, 2009 - 10:03 PM
Post #17

New D.I.C Head
*

Joined: 16 Jun, 2009
Posts: 5


My Contributions
QUOTE(crazyjugglerdrummer @ 16 Jun, 2009 - 03:15 PM) *

The extradiv(1-6) are all completely empty and serve as handles for adding background images aka all of the images you see at the top.

I hear when people are working on a major website project everyone will be using dreamweaver. In a huge project they can afford it, and I guess some features are nice to speed up the dev process. Can we have some opinions/answers as to who uses it, and who doesn't? What features of it do people like most? biggrin.gif


I like Notepad++. It accommodates most languages, has syntax highlighting and has a built in FTP. I used to use Dreamweaver but I found the UI to cluttered and it was a bit of a resource hog.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 03:28AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month