SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Learning shortcut... help someone (please)

    I'm just starting to learn CSS on my own. I have a little time at the end of the day, after the kids are in bed, to work on it. I'm finding lots of information about everything except what I'm trying to learn. So, I'm getting a little frustrated.

    I think that if I can see how to make a style sheet that positions two jpegs on a page, I can figure out how to build on it. I have two images that make up my header. Here is a very rough draft (using tables) of a design I was contemplating. The only part I'm concerned with are the two jpegs that make up the upper-right and right edges, "Windddhhhover Creative Design", (messed-up to keep this post out of my customers' Google searches). This page was put together with frames before I learned about the abilities of CSS. Now that I know what CSS can do, I see my new design ideas are ideally suited for CSS. I just have to work through some of the basics and add to it a little at a time.

    The way I understand CSS, I put instructions in the .css file for the images and where they go. But I'm fuzzy on linking it to the HTML in the document. This header is on every page I create, but there is no text, just jpegs. So it isn't like labeling a paragraph with a title that is referenced in the .css file.

    Can you see the source of my confusion? Please help me get those two jpegs put up in the top right corner. Thanks.

    http://www.windhoverdesign.com/newhome

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I see no jpg files referenced there I assume you are referring to the two images in the top right-hand corner there are various methods but here is a simple one:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Windhover...
        </title>
        <style type="text/css">
        <!--
    .t1 {
    position : absolute;
    right : 0;
    top : 0;
    height : 95px;
    width : 397px;
    }
    .t2 {
    position : absolute;
    right : 0;
    top : 95px;
    height : 474px;
    width : 64px;
    }
    p {
    position : relative;;
    left : 95px;
    top : 95px;
    width : 700px;
    font : 26px Geogia, serif;
    }
        -->
        </style>
      </head>
      <body>
        <img class="t1" src="http://www.windhoverdesign.com/images/welcomecornerdn_r2_c1.gif">
        <img class="t2" src="http://www.windhoverdesign.com/images/welcomecornerdn_r3_c2.gif">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent imperdiet,
    nunc nec cursus sagittis, diam ipsum mattis turpis, non blandit wisi quam ut dolor. Nullam quis leo vitae orci tristique commodo. Donec mauris elit, mollis vel, pharetra sit amet, sodales ac, nisl.</p>
      </body>
    </html>
    For the external link you would use something similar to:

    <link rel="stylesheet" href="yourfile.css" type="text/css" />

  3. #3
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I won't have time to try this until tonight and I'm sure I'll be thinking about it all day.

  4. #4
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...and I forgot- those were .gifs, not .jpegs. Sorry.


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
  •