CSS Development question

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 1701 Views - Last Post: 16 June 2009 - 11:03 PM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

CSS Development question

Post icon  Posted 15 June 2009 - 03:55 PM

http://www.csszengar.../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.....


/* 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;
	}



Is This A Good Question/Topic? 0
  • +

Replies To: CSS Development question

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS Development question

Posted 15 June 2009 - 04:14 PM

The fish are all contained within extraDivX.
Was This Post Helpful? 0
  • +
  • -

#3 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS Development question

Posted 15 June 2009 - 04:17 PM

I was just curious how you were able to work that out?

:)

tommyflint
Was This Post Helpful? 0
  • +
  • -

#4 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS Development question

Posted 15 June 2009 - 04:20 PM

Opera's built-in (yes firefox users don't give me the firebug addon crap) developer tools -> http://rudivisser.com/opera.png
Was This Post Helpful? 0
  • +
  • -

#5 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS Development question

Posted 15 June 2009 - 04:24 PM

Wow i gotta swap to opera :)
Was This Post Helpful? 0
  • +
  • -

#6 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Development question

Posted 15 June 2009 - 04:46 PM

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
Was This Post Helpful? 0
  • +
  • -

#7 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS Development question

Posted 15 June 2009 - 04:51 PM

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

:)

tommyflint

This post has been edited by tommyflint: 15 June 2009 - 04:52 PM

Was This Post Helpful? 0
  • +
  • -

#8 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Development question

Posted 15 June 2009 - 09:27 PM

thanks for the help tommy perhaps some other developers can let me know what they use
Was This Post Helpful? 0
  • +
  • -

#9 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1184
  • View blog
  • Posts: 7,254
  • Joined: 07-September 06

Re: CSS Development question

Posted 15 June 2009 - 09:36 PM

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 :))
Was This Post Helpful? 0
  • +
  • -

#10 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS Development question

Posted 16 June 2009 - 03:24 AM

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.
Was This Post Helpful? 0
  • +
  • -

#11 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Development question

Posted 16 June 2009 - 02:23 PM

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?
Was This Post Helpful? 0
  • +
  • -

#12 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS Development question

Posted 16 June 2009 - 02:35 PM

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:

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");
}



:)
tommyflint

This post has been edited by tommyflint: 16 June 2009 - 02:36 PM

Was This Post Helpful? 1
  • +
  • -

#13 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Development question

Posted 16 June 2009 - 02:47 PM

what does div id mean?

This post has been edited by tnachbauer: 16 June 2009 - 02:55 PM

Was This Post Helpful? 0
  • +
  • -

#14 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS Development question

Posted 16 June 2009 - 02:48 PM

Using Opera :)
Was This Post Helpful? 0
  • +
  • -

#15 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS Development question

Posted 16 June 2009 - 02:53 PM

View Posttnachbauer, on 16 Jun, 2009 - 01:23 PM, said:

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 :D

You can set a style for a div with an ID with the CSS
div#IDNAME {
   /** whatever **/
}

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2