www.webdeveloper.com
Results 1 to 12 of 12

Thread: show me the css on this site

  1. #1
    Join Date
    May 2006
    Posts
    135

    show me the css on this site

    Hi everyone, I'm pretty new to css and I'm having a hard time getting it to work. I've grasped some of the concepts, but I'm still a bit weak when it comes to positioning things the way I want on the page. I'm so used to using tables in HTML. But I want to use CSS since it's supposed to be a better technology. So if someone out there can show me how to get the same layout as I have on this site, www.mark-yieh.com/annesharp/magdahomepage.html, I would really appreciate that. Just the layout for the home page would be fine. I won't need to see the layout for the rest of the pages. Thanks.

  2. #2
    Join Date
    Nov 2005
    Location
    The best country in the world, Texas!
    Posts
    251
    First step is to basically split up your current design into "chunks", say the navigation links on the left, the big picture, and the text at the bottom. (or however else you want to split it up)

    Then put the code for each piece in a <div> with a unique id. For example:
    Code:
    <div id="mainImage"><img src="pictures/homePageImage.jpg"></div>
    Once you've got everything DIVided up, use CSS to make it float and put it in position:
    Code:
    <style>
    #mainImage { float: left; position: relative; top: ??px; left: ??px; }
    </style>
    Obviously enough, you'll need to figure out the exact location that you like best and replace the ??'s with the distance to move that piece of the puzzle -- there's a bit of trial-and-error involved there, but do it enough and you'll get the hang of it pretty quick.

    Those're the basics, at least, and should get you started. I wouldn't want to ruin all your fun, after all
    WARNING: Use code provided at your own risk!

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    The required syntax is <style type="text/css">..</style>. There is at least one other kind of style out there.

    I've never been happy with using floats for the general page layout. Unpleasent things happen when the page is resized too small. I prefer to use absolute positioning to move the links to the upper left or right. To make room for them yoiu have to give their parent element a width and then set the page margins as required.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    May 2006
    Posts
    135
    Can you show me how you would write the CSS for this page, www.mark-yieh.com/annesharp/magdahomepage.html. I understand the syntax and basics of CSS, but I just can't get it to layout the page the way I want. Here's my code for the HTML file:


    Code:
    <!DOCTYPE PUBLIC HTML "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>Test Document</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8895-1"/>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    </head>
    <body>
    
    <div id="leftLinks">
    <a href="#">Home</a><br/>
    <a href="#">About Magda</a><br/>
    <a href="#">Contact</a><br/>
    <a href="#">Press Room</a><br/>
    <a href="#">Speaking</a><br/>
    </div>
    <div id="mainPic"><img src="pictures/homePageImage.jpg" alt="Home Page image" title="Home Page 
    
    Image" width="700px" height="500px"/></div>
    <div id="contentParagraph"><p>Magda Herzberger, 80, is one of the few remaining survivors of the 
    
    Holocaust.  She is a distinguished poet, lecturer, composer, and the author of several books, 
    
    including Survival, the compelling autobiography of her childhood and suffering in the three Nazi 
    
    death camps during WW2.</p>
    <p>Through her books, poetry, music and public speaking engagements, it is Magda's goal to keep 
    
    the memory of the Holocaust alive, to instill love for poetry in the hearts of people, and to show 
    
    the beauty of life.</p>
    </div>
    
    </body>
    </html>
    and here's my attempt at the CSS:

    Code:
    body {background-color: #c4c4c4;}
    
    #leftLinks {font-family: papyrus, arial, serif; line-height: 300%; 
    
    text-align: left; width: 100px; position: relative; right: 50%; 
    
    left: 50%; top: 50px; float: left;}
    
    #leftLinks a {text-decoration: none;}
    
    #mainPic {width: 700px; position: relative; left: 50%; right: 50%; 
    
    top: 50px;}
    
    #contentParagraph {text-align: left; font-family: arial, serif; 
    
    text-align: center;}
    Thanks for looking at it.
    Last edited by mark_yieh; 06-12-2006 at 07:05 AM.

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    To begin with, I would use HTML 4.01 Strict. There are problems with XHTML. But if you insist on using XHTML then you need to put the CSS in an external file.
    HTML Code:
    <style type="text/css">
    body {
        margin-left:10em;
    }
    
    #leftLinks {
        position:absolute;
        top:1px; left:1px;
        width:10em;
    }
    </style>
    Some people might be listening to the page on a screen reader and they really don't want to have to listen to the lnks each time they hit one of the pages. So move the links to the bottom or include the following as the first thing on the page:
    HTML Code:
    <div style="display:none"><a href="#mainPic">Skip to content</a></div>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    May 2006
    Posts
    135
    I did put the css in an external file. And you don't seem to be showing me how you positioned the <img id="mainPic"> tag.

  7. #7
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by mark_yieh
    I did put the css in an external file. And you don't seem to be showing me how you positioned the <img id="mainPic"> tag.
    I moved it 10em to the right by setting the BODY margin. But on second thought I would have done better to set the BODY padding. Typically, I put that image and the content together in another containing DIV element and set that margin.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" /> 
    <style type="text/css"> body, html {margin:0; padding:0; border:0;}/* Re-set IE to "zero" for these values */
    body {background-color:#c4c4c4;}
    p {font-family: arial, serif; padding:0 5px 0 25px;}
    a {font-family: papyrus, arial, serif; text-decoration: none;}
    a:hover	{font-family:papyrus, arial, serif, font-weight:bold;}
    #main {position:relative; left:105px; top:5px; width:70%; height:100%; margin-bottom:3px;}
    #content {width:670px; padding:10px 20px 10px 1px;}
    #navigation	 {position:fixed; left:10px; top:100px;}
    #navigation ul li {list-style-type:none; margin-bottom:10px;}
    img {}
    </style>
    <!-- next is a HACK to educate IE to do the best that it can on "fixed" menu divs -->
    <!-- this effect looks BEST in Firefox, Mozilla and Opera, etc. (Compliant browsers) -->
    <!-- basically, IE cannot get it right -->
    <style type="text/css"><!--
    #fixme {
    /* netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
    position: absolute; left: 15px; top: 50px;
    }
    body > div#fixme {
    /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
    position: fixed;
    }
    --></style>
    <!--[if gte IE 5.5]>
    <![if lt IE 7]>
    <style type="text/css">
    div#fixme {
    /* IE5.5+/Win - this is more specific than the NS4 version */
    left: expression( ( -125 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 130 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    </style>
    <![endif]>
    <![endif]-->
    
    
    </head>
    <body>
    <div id="main">
    <img src="http://www.mark-yieh.com/annesharp/pictures/homePageImage.jpg" alt="Tribute image of Magda Herzberger, Holocaust survivor" /> <div id="content"> <p>Magda Herzberger, 80, is one of the few remaining survivors of the Holocaust. She is a distinguished poet, lecturer, composer, and the author of several books, including <i>Survival</i>, the compelling autobiography of her childhood and suffering in three Nazi death camps during World War II.</p> <p>Through her books, poetry, music and public speaking engagements, it is Magda's goal to keep the memory of the Holocaust alive, to instill love for poetry in the hearts of people, and to show the beauty of life.</p>
    </div>
    
    <div id="fixme"><!-- this is also "navigation links" rule -->
    <div id="navigation">
    
    <ul>
    <li>
    <a href="aboutMagda.html" title="About Magda">About Magda</a>
    </li>
    <li>
    <a href="books.html" title="Books">Books</a></li>
    <li><a href="speaking.html" title="Speaking">Speaking</a>
    </li> <li><a href="pressRoom.html" title="Press Room">Press Room</a></li>
    <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul> 
    </div><!-- end "NAVIGATION" -->
    </div><!-- end "FIXME" -->
    </div><!-- end MAIN -->
    
    <br /><!-- just a spacer, because footer div is 'empty comment' -->
    <div style="position:relative; left:173px; width:70%; height:auto; padding:10px;;">
    <p> <!--A place for footer information, -if you need it --></p>
    </div>
    </body>
    </html>
    (edited from previously-posted code) :
    Fixed failure of navigation LI's to stay "fixed" in Firefox, and added "BOLD" hoverclass to links.

    -Joel
    Last edited by WebJoel; 06-12-2006 at 06:28 PM.

  9. #9
    Join Date
    May 2006
    Posts
    135
    Thanks WebJoel, I see how you did it, but I have a question. I noticed you used absolute positioning to position the navigation links. My question is :

    1.) Can you use relative positioning to position that also?
    2.) If I wanted to center the whole thing how would I do it? I tried adding another <div> just after the <body> element to wrap the whole code, but that doesn't seem to work.

    Here is my attempt at aligning just the picture and the navigation links. I want the picture to be on the right and the navigation links to be on the left and the whole thing to be centered on the page. Preferably I want to use relative positioning that way if they adjust the size of the browser, the page will adjust automatically.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>test page</title>
    <style type="text/css">
    #main {text-align: center;}
    #mainImage {position: relative; left: 150px; top: 10px; display: inline;}
    #links {position: relative; left: 0px; top: 100px;}
    </style>
    </head>
    <body>
    <div id="main">
    <img id="mainImage" src="http://www.mark-yieh.com/annesharp/pictures/homePageImage.jpg" 
    
    alt="Tribute image of Magda Herzberger, Holocaust survivor" /> 
    <span id="links">
    <ul>
    <li><a href="homePage.html">Home</a></li>
    <li><a href="contactPage.html">Contact</a></li>
    <li><a href="aboutMagdaPage.html">About Magda</a></li>
    <li><a href="pressRoom.html">Press Room</a></li>
    </ul>
    </span>
    </div>
    </body>
    </html>
    What I'm having problems with is that when I set the links to relative positioning I'm not sure if it's relative to the <div id="main"> or whether it's relative to <img>. It should be relative to <div id="main"> but when it's displayed it seems like it's relative to <img>. Also, I'm having difficulties in having the two elements sitting side by side with one another instead of one being on top of the other. I tried using <span> instead of <div> to try to prevent it from stacking on top of each other but that didn't work. I also tried to set the <img> tag to display: inline.

    Thanks for your help.

  10. #10
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Okay, -we'll try this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" /> 
    <style type="text/css"> body, html {margin:0; padding:0; border:0;}/* Re-set IE to "zero" for these values */
    body {background-color:#c4c4c4; width:90%; margin: 0 auto 25px auto;}
    p {font-family: arial, serif; padding:0 5px 0 25px;}
    a {font-family: papyrus, arial, serif; text-decoration: none;}
    a:hover	{font-family:papyrus, arial, serif, color:red; font-weight:bold;}
    #main {position:relative; left:120px; top:5px; width:630px; height:100%;
    padding-right:0; margin-bottom:3px; /* border:1px dashed blue;*/}
    #content {position:relative; left:-35px; width:650px; padding:10px 10px 10px 1px; /* border:1px dashed blue;*/}
    #navigation	 {position:fixed; left:5px; top:100px;}
    #navigation ul li {list-style-type:none; margin-bottom:10px;}
    img {}
    </style>
    <!-- next is a HACK to educate IE to do the best that it can on "fixed" menu divs -->
    <!-- this effect looks BEST in Firefox, Mozilla and Opera, etc. (Compliant browsers) -->
    <!-- basically, IE cannot get it right -->
    <style type="text/css"><!--
    #fixme {
    /* netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
    position: absolute; left: 5px; top: 50px;
    }
    body > div#fixme {
    /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
    position: fixed;
    }
    --></style>
    <!--[if gte IE 5.5]>
    <![if lt IE 7]>
    <style type="text/css">
    div#fixme {
    /* IE5.5+/Win - this is more specific than the NS4 version */
    left: expression( ( -145 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 130 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    </style>
    <![endif]>
    <![endif]-->
    
    
    </head>
    <body>
    <div id="main">
    <!-- ABSOLUTE PATH URL: http://www.mark-yieh.com/annesharp/pictures/homePageImage.jpg -->
    <img src="http://www.mark-yieh.com/annesharp/pictures/homePageImage.jpg" 
    alt="Tribute image of Magda Herzberger, Holocaust survivor" />
    <div id="content">
    <p>Magda Herzberger, 80, is one of the few remaining survivors of the Holocaust. She is a distinguished poet, lecturer, 
    composer, and the author of several books, including <i>Survival</i>, the compelling autobiography of her childhood 
    and suffering in three Nazi death camps during World War II.</p> <p>Through her books, poetry, music and public 
    speaking engagements, it is Magda's goal to keep the memory of the Holocaust alive, to instill love for poetry in 
    the hearts of people, and to show the beauty of life.</p>
    </div>
    
    <div id="fixme"><!-- this is also "navigation links" rule -->
    <div id="navigation">
    
    <ul>
    <li>
    <a href="aboutMagda.html" title="About Magda">About Magda</a>
    </li>
    <li>
    <a href="books.html" title="Books">Books</a></li>
    <li><a href="speaking.html" title="Speaking">Speaking</a>
    </li> <li><a href="pressRoom.html" title="Press Room">Press Room</a></li>
    <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul> 
    </div><!-- end "NAVIGATION" -->
    </div><!-- end "FIXME" -->
    </div><!-- end MAIN -->
    
    <br /><!-- just a spacer, because footer div is 'empty comment' -->
    <div style="position:relative; left:173px; width:70%; height:auto; padding:10px;;">
    <p> <!--A place for footer information, -if you need it --></p>
    </div>
    </body>
    </html>
    Okay, -this *tries to auto-center* but because the navigation-menu is "fixed" in-place, it does not actually 'center' exactly. But now at least it is viewable in 800x600 mode without horizontal scrollbar, and it is forgiveably-close in 1024x768.

    USE THE ATTACHED IMAGE though, to make this work. I trimmed-off the left and right sides for a substaintial KB savings off the top from your 103-KB image (that is to say, it currently would take 21-seconds+ for a 56K dial-up modem to download!) to an optimized 46.6KB file (which takes 9.2 seconds to download @56K).
    The reduced-width image makes this 'nearly-centering' web page work. The native image is too wide, and throws the page off..
    The KB-per-second savings for 56K dial-up will appreciate the fact that the entire page will/should resolve in 'about 12-seconds', more-or-less... It will resolve nearly 50% sooner than before.

    Not sure how or if the page can ever truly 'center' if we keep the navigation positioned "fixed"... Maybe if we put the fixed navigation DIV *outside* of the #MAIN div... that might do it, but we'd have to change the body width then also. Hmm...
    See how you like this so far.
    -Joel
    Attached Images Attached Images
    Last edited by WebJoel; 06-13-2006 at 07:08 PM.

  11. #11
    Join Date
    May 2006
    Posts
    135
    hmmm I didn't know my image was such a large file. Thanks for pointing that out. I guess I was too concerned with making the layout, that I didn't have a chance to consider optimizing the page yet. In any case, I made it quite smaller now using Fireworks. It's only 25K now and it loads in 3 seconds on a 56K modem and the quality of the image is not affected very much. As for the code that you just sent me, I'll take a look at it right now and let you know how it turns out. Thanks a lot.

  12. #12
    Join Date
    May 2006
    Posts
    135
    Ok I finally found out the solution to my problem. Here it is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>test page</title>
    <style type="text/css">
    <!--
    #wrapper {text-align: center}
    #inside {width: 850px; margin: auto}
    ul {float: left;}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="inside">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    </ul>
    <img src="http://www.mark-yieh.com/annesharp/pictures/homepageimage.jpg"/>
    <p>Magda Herzberger, 80, is one of the few remaining survivors of the Holocaust. She is a 
    
    distinguished poet, lecturer, composer, and the author of several books, including 
    
    <i>Survival</i>, the compelling autobiography of her childhood and suffering in three Nazi 
    
    death camps during World War II.</p> 
    <p>Through her books, poetry, music and public speaking engagements, it is Magda's goal to keep 
    
    the memory of the Holocaust alive, to instill love for poetry in the hearts of people, and to 
    
    show the beauty of life.</p> 
    </div>
    
    </div>
    
    </body>
    </html>
    The solution lies in the margin: auto property and don't forget the set the width property also.

    To those reading this thread, hope this is as informative for you as it was for me. Thanks everyone.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles