-
1. Re: Need Advice on Page Layout
Ken Binney May 7, 2012 10:25 AM (in response to Comp. 792)Comp. 792 wrote:
I keep having problems
Care to tell us what problems you're having?
Nested DIV's are the way to go
-
2. Re: Need Advice on Page Layout
Comp. 792 May 7, 2012 10:30 AM (in response to Ken Binney)In Dreamweaver would the (1 column fixed, centered, header and footer) be a good starting point but does this allow for the white space on both sides?
-
3. Re: Need Advice on Page Layout
osgood_ May 7, 2012 10:42 AM (in response to Comp. 792)This should get you started:
<!DOCTYPE html PUBLIC "-//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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
#wrapper {
width: 660px;
margin: 0 auto;
}
h1 {
text-align: center;
}
.section {
padding: 20px 0;
overflow: hidden;
border-top: 2px solid #000;
}
.section img {
float: left;
border: 1px solid #999;
}
.sectionTextWrapper {
margin: 0 0 0 180px;
}
.section h2 {
font-size: 18px;
margin: 0 0 0 180px;
padding: 0 0 10px 0;
}
.section p {
line-height: 18px;
margin: 0 0 0 180px;
padding: 0;
clear: right;
}
.button {
float: right;
display: inline-block;
text-decoration: none;
background-color: #000;
padding: 5px 15px;
color: #fff;
margin: 8px 0 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Title Goes Here</h1>
<div class="section">
<img scr="images/image_1.jpg" width="160" height="120" alt="" />
<div id="sectionTextWrapper">
<h2>Subtitle Goes Here</h2>
<p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>
<a href="#" class="button">Button Image</a>
</div><!-- end sectionTextWrapper -->
</div><!-- end section -->
<div class="section">
<img scr="images/image_1.jpg" width="160" height="120" alt="" />
<div id="sectionTextWrapper">
<h2>Subtitle Goes Here</h2>
<p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>
<a href="#" class="button">Button Image</a>
</div><!-- end sectionTextWrapper -->
</div><!-- end section -->
<div class="section" style="border-bottom: 2px solid #000;">
<img scr="images/image_1.jpg" width="160" height="120" alt="" />
<div id="sectionTextWrapper">
<h2>Subtitle Goes Here</h2>
<p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.
Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>
<a href="#" class="button">Button Image</a>
</div><!-- end sectionTextWrapper -->
</div><!-- end section -->
</div><!-- end wrapper -->
</body>
</html>
-
-
5. Re: Need Advice on Page Layout
Comp. 792 May 7, 2012 3:48 PM (in response to Comp. 792)osgood,
Hi, I just realized (too late) that I need a grey background with drop shadow like in my image. Is there any way to add this or is it too late and do I need to start all over?
I also need to add a horizontal bar at the top of the image with a logo and drop down menu so it will match the rest of the website. Can I make the logo top bar and drop down menu a separate external style sheet so it can be used across my whole site?
-
6. Re: Need Advice on Page Layout
Nancy OShea May 7, 2012 4:06 PM (in response to Comp. 792)Apply background-color to body and box-shadows to #wrapper. Feel free to change values to suit.
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-color:#666666;
}
#wrapper {
width: 660px;
margin: 0 auto;
-webkit-box-shadow: 2px 3px 5px #333333;
-moz-box-shadow: 2px 3px 5px #333333;
box-shadow: 2px 3px 5px #333333;
}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
7. Re: Need Advice on Page Layout
Comp. 792 May 7, 2012 5:03 PM (in response to Nancy OShea)Thanks Nancy. Works great but I am having a couple of problems. I applied your code to the code above and this is what I am getting. (see image)
1. The Grey Background color is filling the whole page and I need the area behind the text to be white.
2. The Drop Shadow is too close to the text and images. (I need some space between the drop shadow and white area)
-
8. Re: Need Advice on Page Layout
Nancy OShea May 7, 2012 5:20 PM (in response to Comp. 792)Try this:
#wrapper {
width: 660px;
margin: 0 auto;
-webkit-box-shadow: 2px 3px 5px #333333;
-moz-box-shadow: 2px 3px 5px #333333;
box-shadow: 2px 3px 5px #333333;
padding: 12px; /**adjust as needed**/
background: #FFF;
}
CSS Tutorials: http://www.w3schools.com/css/default.asp
Nancy O.
-
9. Re: Need Advice on Page Layout
Comp. 792 May 7, 2012 10:28 PM (in response to Nancy OShea)Nancy, yes that was it thank you so much!
Let me explain what it is I am trying to do. I now have the page looking quite good but I need to incorporate 2 more things so it will have the look of my existing website. Those 2 things are:
my "website navigation menu”, "horizontal bar" at the top of the page and logo.
Below is my website menu. I have copied this .html code into my new page but the styling is confusing me. The navigation menu uses a style (see code below) but I am not sure what the style is controlling the look of the menu. I want to make the menu look like it does on my website here. website
How can I add my menu, horizontal bar and logo so it looks like it does on my website?
<div id="header" class="clearfix">
<div class="holder clearfix">
<div class="skipLink"><a href="#content" title="Skip to content">Skip to content</a></div>
<div id="title"><span><a href="index.html" title=“WEBSITE LOGO" rel="home"><img src="images/temp/logo.png" alt=" " width="200" height="50"/></a></span></div>
<ul id="siteNav">
<li><a href="index.html">Home</a></li>
<li class="hasSub">
<a>Gallery</a>
<ul>
<li><a href="2d_character.html">2D Character</a></li>
<li><a href="3d_character.html">3D Character</a></li>
<li><a href="concept_art.html">Concept Art</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="illustration.html">Illustration</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="sketchbook.html">Sketchbook</a></li>
</ul>
</li>
<li><a href="http://blogspot.com/">Blog</a></li>
<li class="hasSub">
<a>Store</a>
<ul>
<li><a>Coming Soon!</a></li>
</ul>
</li>
<li class="hasSub">
<a>Info</a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="process.html">Process and Pricing</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div><!-- #header -->
-
10. Re: Need Advice on Page Layout
osgood_ May 8, 2012 12:31 AM (in response to Comp. 792)Upload what you have so far and provide a link to the page so we can take a look rather than trying to guess where everything is meant to go.
-
11. Re: Need Advice on Page Layout
Comp. 792 May 8, 2012 8:43 AM (in response to osgood_)Upload what you have so far and provide a link to the page so we can take a look rather than trying to guess where everything is meant to go.
Osgood, here is the link to the page. http://www.buzzfx.ca/featured.html
Let me explain what it is I am trying to do. I now have the page looking quite good but I need to incorporate 2 more things so it will have the look of my existing website. Those 2 things are:
my "website navigation menu”, "horizontal bar" at the top of the page and logo.
Below is my website menu. I have copied this .html code into my new page but the styling is confusing me. The navigation menu uses a style (see code below) but I am not sure what the style is controlling the look of the menu. I want to make the menu look like it does on my website.
How can I add my menu, horizontal bar and logo so it looks like it does on my website?
-
12. Re: Need Advice on Page Layout
Nancy OShea May 8, 2012 11:17 AM (in response to Comp. 792)Your top menu appears to be styled by base.css beginning at ul#sitenav. But that may be only one piece of it since you're also using reset.css and dark.css for global styles.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
13. Re: Need Advice on Page Layout
Comp. 792 May 8, 2012 12:10 PM (in response to Nancy OShea)Your top menu appears to be styled by base.css beginning at ul#sitenav. But that may be only one piece of it since you're also using reset.css and dark.css for global styles.
Thanks Nancy, yes the person who created the website used a gazzillion different CSS rules to style each element so it’s especially confusing to me. I want to try to make it “simpler” going forward. I thought if I made the menu/navigation a new and separate .CSS rule that might simplify things. I just need to find the correct rule elements to make it look like the current menu.
Here is the .CSS code for the header I believe. Confusing to me and I wish I understood how to simplify it somewhat.Would you paste this inline into the page above or create a separate external style for this?
/* HEADER ---------------------------------------------------------*/
#header {
background-color: #222;
}
#title a {
color: #319;
}
ul#siteNav li a {
color: #999;
}
ul#siteNav li a:hover,
ul#siteNav li a:focus {
color: #99CC00;
}
ul#siteNav > li.selected > a {
background: url(../images/sitenav_selected_dark.png) 50% 100% no-repeat;
}
ul#siteNav > li.hasSub.hover > a,
ul#siteNav li.hasSub ul {
background: #222;
}
ul#siteNav li.hasSub.hover a {
color: #999;
}
ul#siteNav li.hasSub.hover ul li a:hover,
ul#siteNav li.hasSub.hover ul li a:focus {
color: #99CC00;
}
ul#siteNav li.hasSub.hover ul li a {
border-top: 1px solid #333;
}
-
14. Re: Need Advice on Page Layout
Nancy OShea May 8, 2012 12:27 PM (in response to Comp. 792)Use an external CSS file for site wide styles.
Use embedded CSS between the <head> tags for page specific styles.
Use inline CSS (in the HTML code) rarely if ever. Inline is only used for HTML emails or when you need to create an exception to a CSS rule.
Add your menu styles to your main.css file.
How to link HTML pages to external .css.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists