Jump to content

keytoner

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by keytoner

    How do I place an image outside the body content?

    in CSS

    Posted

    Hello, I am very confused. I have messed around with HTML and CSS but never understood it. I am trying to now.

    I am trying to learn from a book called MURACH's HTML and CSS3.

    I cannot figure out how to place an image outside of the content.

    Here is what I am trying to explain.

    This is the result of the html and styles....    the page

    Here is the CSS  ...

    article, aside, figure, footer, header, nav, section {
        display: block;
    }
    html {
        background-image: -moz-linear-gradient(top, white 0%, #facd8a 100%);
        background-image: -webkit-linear-gradient(top, white 0%, #facd8a 100%);    
        background-image: -o-linear-gradient(top, white 0%, #facd8a 100%);
        background-image: linear-gradient(top, white 0%, #facd8a 100%);    
    }
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 87.5%;
        width: 600px;
        background-color: white;
        margin: 15px auto;
        padding: 15px 25px;
        border: 1px solid black;
        -moz-border-radius: 25px;
        border-radius: 25px;
        -webkit-box-shadow: 5px 5px 0 0;
        -moz-box-shadow: 5px 5px 0 0;
        box-shadow: 5px 5px 0 0;
    }

    h1 { font-size: 200%; }
    h2 { font-size: 125%; }

    h1, h2, p {
        margin: 0;
        padding: 0;
    }
    a { font-weight: bold; }
    a:link { color: green; }
    a:visited { color: #ef9c00; }
    a:hover { color: blue; }

    ul { margin: 0 0 1.5em; 
        padding-left: 2em;
    }
    li { padding-bottom: 0.25em; }

    p { padding: 0.25em 0; }
        
    em { font-weight: bold; }

    /* the styles for the header */
    header { 
        padding-bottom: 2em;
        border-bottom: 2px solid #ef9c00;
    }
    header img { float: left; }
    header h1 {
        color: #ef9c00;
        text-align: center;
        text-shadow: 2px 3px 0 black;
        margin-bottom: 0.25em;
    }
    header h2 {
        color: green;
        font-style: italic;
        text-align: center;
    }

    /* the styles for the section */
    section { clear: left; }
    section h1 {
        font-size: 200%;
        margin: 1em 0 0.35em; 
    }
    #contact_us { margin-top: 1em; }
    a.date_passed  { color: gray; }

    /* the styles for the footer */
    footer {
        margin-top: 2em;
        border-top: 2px solid #ef9c00;
        padding-top: 0.7em;
    }
    footer p {
        font-size: 80%;
        text-align: right;
    }

     

     

     

    and here is the html.....

     


    <!doctype html>

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>San Joaquin Valley Town Hall</title>
        <link rel="shortcut icon" href="images/favicon.ico">
        <link rel="stylesheet" href="styles/main3.css">
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </head>
        
    <body>

        <header>
            <img src="images/logo.jpg" alt="Town Hall Logo" width="80">
            <hgroup>
                <h1>San Joaquin Valley Town Hall</h1>
                <h2>Bringing cutting-edge speakers to the valley</h2>
            </hgroup>
        </header>
        <section>
            <h1>2011-2012 guest speakers</h1>
            <nav>
              <ul>
                  <li>October 19, 2011: <a class="date_passed" href="speakers/toobin.html">Jeffrey Toobin</a></li>
                <li>November 16, 2011: <a class="date_passed" href="speakers/sorkin.html">Andrew Ross Sorkin</a></li>
                <li>January 18, 2012: <a href="speakers/chua.html">Amy Chua</a></li>
                <li>February 15, 2012: <a href="speakers/sampson.html">Scott Sampson</a></li>
                <li>March 21, 2012: <a href="speakers/eire.html">Carlos Eire</a></li>
                <li>April 18, 2012: <a href="speakers/tynan.html">Ronan Tynan</a></li>
              </ul>
            </nav>
            <h2>Looking for a unique gift?</h2>
            <p>Town Hall has the answer. For only $100, you can get 
               a book of tickets for all of the remaining speakers. And the bargain includes a 
               second book of tickets for a companion.</p>
            <p class="indent">Or, for $50, you can give yourself the gift of our speakers, and still get an extra
               ticket for a companion, but for just one of the events.</p>
            <p class="indent">See you at the next show?</p>
            
            <p id="contact_us"><em>Contact us by phone</em> at (559) 555-1212 for ticket information.</p>
        </section>
        <footer>
            <p>&copy; Copyright 2012 San Joaquin Valley Town Hall.</p>
        </footer>
    </body>
    </html>

     

     

    I want to be able to place an image on either side of the main content, and I just can't figure out how.

    If anyone would clue me in, I will be forever indebted!

    How to make buttons "fixed" against scrolling

    in HTML/XHTML

    Posted

    Thanks a million Ingolme!

    Simple for you, but for some reason it passed over my head.

    It works perfectly, almost.  The buttons moved from the top left to bottom right with a border around them.

    I'll have to scrutinize the external css sheet and see if I can figure out the conflict;

    But the buttons are fixed!

    Thank you   (it's not the first time you've help me see the "forest thru the trees)

    How to make buttons "fixed" against scrolling

    in HTML/XHTML

    Posted · Edited by keytoner

    Hi everyone, I haven't here for awhile and I'm not sure I'm in the right forum. might need to be in css

    I have two buttons that scroll along with the page, I want them to remain "fixed", as it will be a

    very long page and I need the buttons to always be visible no matter how far down the viewer scrolls.

    If anyone can guide me to where I can learn how to do this, I would be immensely grateful.

    Thank you

    John

    oops! sorry, I forgot to put in some of the coding:

    <script>

    jQuery(function(){ // on DOM load
        menu1 = new sidetogglemenu({  // initialize first menu example
            id: 'togglemenu1',
            marginoffset: 10,
            downarrowsrc: 'toggledown.png'
        })

        menu2 = new sidetogglemenu({  // initialize second menu example
            id: 'togglemenu2',
            position: 'right',
            source: 'togglemenu.txt',
            revealamt: -5
        })
    })

    </script>
    </head>

    <body>
    <button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>
    <button onClick="menu2.toggle()" class="sideviewtoggle">Toggle Menu 2</button>

    How can I insert an image in e-mail as an active anchor link?

    in General

    Posted

    Hello, 

      this seems like a dumb question... but I want to be able to send an e-mail with an image being a "link".

    I can't figure out how to do it, text is simple, but an image is different!

    I'm sure it is simple to you, but I just don't where to find out how to do it.

    I don't want anyone to do it for me, I just really could use some guidance.

    Thank you very much if anyone can point me in the right direction!

    Also, I apologize if I posted this in the wrong place.

    Thank you, John Gann

×
×
  • Create New...