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:
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.
Reply With Quote
Bookmarks