dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help with sizing images to 75% of page width

  1. #1
    Join Date
    Jul 2012
    Posts
    10

    Help with sizing images to 75% of page width

    Hello,

    I just want to prefix by saying I am a novice to HTML and CSS - nevertheless I'm trying! Also I should mention that I am attempting to create an HTML5 doctype using the XHTML syntax linking to my CSS document.

    What I have been trying to do is create a very simple website with only a few pages. Here is the basic format of the homepage in order as it appears on the screen:

    I. Heading (this is a .jpg I created with the title of the website)

    II. Body content (could be an image, text with image, etc)

    III. A navigation row of buttons (each of these are images that line up next to one another)

    That's it! Very simple.

    Now what I'm trying to do is basically keep this template in place for multiple pages. So the body content might vary, but the heading and the navigation buttons at the bottom (which also are .jpg's) stays the same. I want everything to have the same dimensions on all pages:

    Header height = 190px
    Body Content height = 900px
    Navigation button height = 100px

    Here's the problem I'm having: how do I get everything to be set as 75% of page width? In other words, the header's width is 75% of page width, the body content's width is 75% of page width, and the navigation row of buttons (each right next to each other) only goes to 75% of page width.

    Here is basically the markup I have in my HTML5 document:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>benjamincook1.com--experienced marketing professional.</title>
    <meta charset="utf-8"/>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/
    html15.js"></script>
    <![endif]-->
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body background="stars_background.jpg">
    <header>
    <img src="heading2.png" alt="Heading image for website
    with benjamincook1.com logo"/>
    </header>
    <div id="bodycontent">
    <p><img src="About Ben.jpg" class="feature" width="200" height="120" alt="Picture of Ben Cook at
    2012 AMA Annual Conference, 'Beyond the Buzz'"/></p>
    <p>Hello! My name is Benjamin Cook a creative, ambitious, and culturally-fluent professional
    actively seeking opportunities in a marketing coordinator role. I have had many experiences
    in my life and have been to many places. I grew up in the Twin Cities of Minnesota but after
    high school decided to head west and attend Santa Clara University, a small university in
    Silicon Valley.</p>
    <p>At Santa Clara I majored in marketing and also earned a minor in Spanish studies. My entire
    junior year was spent in Madrid, Spain which was one of the best years of my life. I learned
    so much about the Spanish culture, language, and also was able to earn credits towards my major.
    </p>
    </div>
    <nav>
    <a href="http://www.marketinginthetwincities.com" target="_blank"><img src="button1.gif"
    alt="Link to marketinginthetwincities.com"./></a>
    <a href="http://www.marketinginthetwincities.com/about-the-author
    /" target="_blank"><img src="button2.gif" alt="Link to About Benjamin page"./></a>
    <a href="http://www.marketinginthetwincities.com/ben-cook-sample-work/" target="_blank">
    <img src="button3.gif"
    alt="Link to portfolio of
    Benjamin Cook sample work"./></a>
    </nav>
    </body>
    </html>

    My CSS file is basically blank except for a command to float the picture I included in the bodycontent div with the text:

    /*
    CSS for benjamincook1.com
    */

    .feature {
    float: right;
    margin: 10px;
    }

    If anyone can help me figure out how to do this, I would be immensely grateful.

    Thank you.

  2. #2
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    you'll have to create rules to tell the sections what you want them to do. for instance:

    HTML Code:
    #bodycontent {
    	width:75&#37;;	
    }
    will adjust the size of the content area to 75% of the page width.

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