SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    building a site entirely with css

    It's hard work, but strangely satisfying

    Here is my source for a site I've been doing, it is nowhere near finished:

    Code:
    /*navigation */
    
    .navt {
    	width: 100px;
    	padding: 5px;
    	background-color: #339966;
    	font-family: verdana, arial;
    	font-size: 12px;
    	font-weight: bold;
    
    	position: absolute; 
    	left: 0px; 
    	top: 0px; 
    	z-index: 1
    }
    
    .navb { 
    	width: 100px;
    	padding: 5px;
    	background-color: #99CC99;
    	font-family: verdana, arial;
    	font-size: 12px;
    
    	position: absolute; 
    	left: 0px; 
    	top: 24px; 
    	z-index: 2
    }
    
    /* main */
    
    .main {
    	width: 400px;
    	padding: 0px;
    	font-family: verdana, arial;
    	font-size: 12px;
    	text-align: justify;
    	line-height: 20px;
    
    	position: absolute; 
    	left: 125px; 
    	top: 0px; 
    	z-index: 3
    }
    
    /* News */
    
    .newst {
    	width: 235px;
    	padding: 5px;
    	background-color: #339966;
    	font-family: verdana, arial;
    	font-size: 12px;
    	font-weight: bold;
    
    	position: absolute; 
    	left: 538px; 
    	top: 0px; 
    	z-index: 4
    }
    
    .newsb {
    	width: 235px;
    	padding: 5px;
    	background-color: #99CC99;
    	font-family: verdana, arial;
    	font-size: 12px;
    	text-align: justify;
    
    	position: absolute; 
    	left: 538px; 
    	top: 24px; 
    	z-index: 5
    }
    
    /* several html tags */
    
    h1 {
    	font-family: verdana, arial;
    	font-size: 18px;
    	font-weight: bold;
    	margin-top: 0px;
    	margin-bottom: 0px
    }
    
    hr {
    	width: 100%;
    	height: 1px;
    }
    
    h6 {
    	/* mini text */
    	font family: verdana, arial;
    	font size: 8px;
    	color: #666666;
    	margin: 0px;
    }
    Ack I still have a long way to go :/ Havent even added images or <input> styles.

    Anyone else doing something similar to this? I know Nicky is.
    russell.cz.cc - coming soon (I promise!)

  2. #2
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Blimey - I don't think I'd attempt an entire site in CSS, especially as I use a lot of ASP. Anyway have you got a url we can have a look at??

  3. #3
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh I guess I could show you but its not very good yet. Still has a long way to go until it is totally finished.

    link (gone now)

    Basically its the navigation, the middle part with the actual content and a news area on the right. here are no graphics nor is there a header or footer.
    Last edited by RussellG; Apr 10, 2002 at 10:49.
    russell.cz.cc - coming soon (I promise!)

  4. #4
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's difficult to pass judgement or offer advice, because as you say, there's a long way to go. But so far, so good

  5. #5
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly. There is still a lot of text formatting to do. That is no where near finished. So please dont judge me on what you see there
    russell.cz.cc - coming soon (I promise!)

  6. #6
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Way to go! Mine is up and running now but I will always consider it a work in progress. I am going to convert it to XHML now me thinks.

  7. #7
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Nicky
    Way to go! Mine is up and running now but I will always consider it a work in progress. I am going to convert it to XHML now me thinks.
    XHML huh? Is that where it looks like it has drunk *waaaay* to much coffee?
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  8. #8
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ha ha, lack of chocolate made me miss a T.

  9. #9
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did my first all CSS design for an intranet about a year ago. It was definitely a learning experience!

    I haven't looked at the stylesheet in awhile & probably could clean things up a bit.

    Can't post a URL so, have a gander:

    body
    {
    margin-bottom:20px;
    margin-left:7px;
    margin-right:7px;
    margin-top:7px;
    }
    a
    {
    color:#003366;
    }
    a.white
    {
    color:#fff;
    }
    :hover
    {
    text-decoration:none;
    }
    h2,h3,h4,h5,h6
    {
    font-family:verdana;
    }
    img
    {
    border:0px;
    padding:0px;
    }
    img.homebutton
    {
    margin-left:13px;
    margin-top:15px;
    }
    img.rtop
    {
    float:right;
    margin-bottom:10px;
    margin-left:20px;
    margin-right:0px;
    margin-top:10px;
    width:250px;
    }
    h1
    {
    font:bold 115%/131% verdana;
    }
    h1.bluehdr
    {
    font:bold 16px/18px verdana;
    background:#003366;
    color:#fff;
    margin:0px;
    padding-bottom:7px;
    padding-left:10px;
    padding-right:10px;
    padding-top:7px;
    width:190px;
    }
    h2
    {
    background:#99cc66;
    font:bold 80%/131% verdana;
    margin:0px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    width:190px;
    }
    li,p,td
    {
    font:normal 80%/131% verdana;
    }
    select
    {
    color:#003366;
    font-family:verdana;
    font-weight:bold;
    width:160px;
    }
    table
    {
    background:#cccccc;
    border:1px solid #000;
    margin-bottom:15px;
    margin-top:5px;
    padding:5px;
    width:500px;
    }
    td
    {
    border:1px solid #000;
    padding-bottom:10px;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    }
    th
    {
    background:#003366;
    border:1px solid #fff;
    color:#fff;
    font:bold 90%/131% verdana;
    padding-bottom:10px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    }
    #disjoint
    {
    border:0px;
    font-size:1px; /*so the div doesn't resize with text resize*/
    height:35px;
    margin-left:214px;
    margin-top:13px;
    margin-right:0px;
    }
    #dropdown
    {
    background:#ccffff;
    height:160px;
    top:0px;
    width:190px;
    padding-left:15px;
    padding-top:30px;
    padding-bottom:15px;
    position:relative;
    }
    #leftcontent
    {
    background:#ccffff;
    border-bottom:1px solid #003366;
    border-left:1px solid #003366;
    border-right:1px solid #003366;
    border-top:0px;
    left:7px;
    padding:0px;
    position:absolute;
    top:70px;
    width:188px;
    }
    #leftcontent p
    {
    background:#ccffcc;
    margin:0px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    width:190px;
    }
    #leftcontent a
    {
    text-decoration:none;
    }
    #leftcontent a:hover
    {
    background:#003366;
    color:#fff;
    text-decoration:underline;
    }
    #leftcontent a span
    {
    display:none;
    }
    #leftcontent a:hover span
    {
    background:#ccffcc;
    border:1px solid #003366;
    color:#003366;
    display:block;
    left:193px;
    padding-bottom:25px;
    padding-left:15px;
    padding-right:15px;
    padding-top:15px;
    position:absolute;
    text-align:left;
    text-decoration:none;
    top:270px;
    width:200px;
    z-index:100;
    }
    #rightcontent
    {
    margin-bottom:0px;
    margin-left:190px;
    margin-right:20px;
    margin-top:0px;
    padding-left:29px;
    padding-bottom:20px;
    }
    #rightcorner
    {
    right:7px;
    padding:0px;
    top:7px;
    position:absolute;
    }
    #topblue
    {
    background:#003366;
    border:0px;
    height:43px;
    margin-left:190px;
    margin-right:0px;
    }
    #topgreen
    {
    background:#669900;
    border:0px;
    font-size:1px; /*so the div doesn't resize with text resize*/
    height:20px;
    margin-left:190px;
    margin-top:0px;
    margin-right:0px;
    }
    #toplogo
    {
    left:7px;
    padding:0px;
    position:absolute;
    top:7px;
    width:190px;
    }
    .shrinkit
    {
    color:003366;
    font-size:65%;
    font-weight:bold;
    }
    .nested
    {
    font-size:125%;
    }
    .note
    {
    font-style:italic;
    padding-bottom:10px;
    padding-left:4em;
    padding-right:4em;
    padding-top:10px;
    text-decoration:underline;
    text-align:center;
    }
    .nestednote
    {
    font-size:125%;
    font-style:italic;
    padding-bottom:10px;
    padding-left:4em;
    padding-right:4em;
    padding-top:10px;
    text-decoration:underline;
    text-align:center;
    }

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm doing a personal website in XHTML, all CSS and I'm learning ASP in the process too. It's actually developing quite nicely and when I am closer to being satisfactorily (a word?) completed, I will let you know.

    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My own site has been XHTML/CSS since day one and if anything, I find it easier to use this kind of approach with my PHP CMS than tables.

  12. #12
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Isotope, why are you specifying Hex colors with only three values? I have seen this done before.

  13. #13
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky, you can use shorthand if you are dealing with pairs of digits so #ffffff becomes #fff; #3399ff becomes #39f.

    It's so handy you find yourself being drawn to the web-safe palette cos it's all pairs

  14. #14
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have honestly never done that.

  15. #15
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by brokenvoice
    My own site has been XHTML/CSS since day one and if anything, I find it easier to use this kind of approach with my PHP CMS than tables.

    What is PHP CMS?


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  16. #16
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It means a content management system written in PHP.

  17. #17
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where can I find more information on the subject?


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  18. #18
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, if you are interested in building your own CMS, you can't go wrong with Kev's Book.

  19. #19
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Nicky
    I am going to convert it to XHML now me thinks.
    it shouldnt take you to long now you have everything in css, just close all tags the XHTML way add the XHTML doc type and add alt tags to your images! (and i thought you of all people would have already done that ) and your done.

  20. #20
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by iTec
    ...and add alt tags to your images! (and i thought you of all people would have already done that ) and your done.
    Are you saying I haven't?

  21. #21
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky, line 95: <img src="images/nickyart1.jpg">

  22. #22
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah! But I am not keeping that one. I stuck it in that column for now because it was on my old site but I haven't a clue what to put there instead. Suggestions are welcome.

  23. #23
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In frontpage 2002, you can right click on the source and choose "convert to XHTML tags" or something like that. It's pretty handy sometimes.

    And if you haven't tried Tiny GUI, then dont bother, it changes your code quite a lot. It messed around with my tables and I had to redo a lot of it.
    russell.cz.cc - coming soon (I promise!)

  24. #24
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by RussellG
    In frontpage 2002, you can right click on the source and choose "convert to XHTML tags" or something like that. It's pretty handy sometimes.
    there is also an extension for dreamweaver that does that :0) (you can get it @ macromedia exchange if your interested)

    but thats cheating and takes all the fun out of XHTML

  25. #25
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seen it

    If anyones interested, I write my CSS in Notepad, and use a mixture of frontpage 2002 and dreamweaver to do the rest.
    russell.cz.cc - coming soon (I promise!)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •