How to Narrow the Design of an Entire Page

Hi,
     I have been working on this problem for a while and still do not have an answer. I use Dreamweaver CS5.5. I am new at writing html code.
My question is: How do I set the width to a more narrowed setting of my entire design that is currently centered on my page. This would allow more of the background (sky) to show on the left and right sides of my page. Is it even possible at this late date after completeing the website.
You can see how my webpage looks now at -
www.lanisakai.com
Can I change some code to acheive this effect either in the index.html page or the "twoColLiqLtHdr.css" page or both?
Here is the code for both pages.
The Index.html Page
<!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>Lani Sakai Pastel Pet Portraits</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.container .content p .introduction strong {
          color: #000;
.container .content .introduction {
          color: #000;
body {
          background-image: url(Logo/sky1.jpg);
          background-position: center center;
          background-attachment: fixed;
</style>
</head>
<body bgcolor="#FFFFCC">
<div class="container">
<div class="header">
    <div align="center"><a href="http://www.lanisakai.com/"><img src="Logo/Logo3.jpg" width="805" height="172" border="0" /></a></div>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="http://www.lanisakai.com/">Home</a></li>
      <li><a href="http://www.lanisakai.com/previousworks.html">Previous Works</a></li>
      <li><a href="http://www.lanisakai.com/aboutme.html">About Me</a></li>
      <li><a href="http://www.lanisakai.com/feedback.html">Contact Me</a></li>
      <li><a href="sitemap.html">Site Map</a></li>
      <li><a href="http://www.lanisakaimobie.bugs3.com/">Smartphone Version</a></li>
      <li></li>
    </ul>
    <p></p>
</div>
<div class="content">
    <h1> </h1>
    <h1><img src="Original Drawings/DSCN4352-2.jpg" width="260" height="216" hspace="20" vspace="25" /> <img src="Original Drawings/DSCN9152-2.jpg" width="210" height="266" hspace="40" /></h1>
    <h2 class="introduction"><strong><em>Reasons why you want to have your pet's portrait drawn....</em></strong></h2>
    <p> </p>
    <p><img src="Drawings/untitled2.jpg" width="275" height="214" hspace="125" /></p>
    <p> </p>
    <p align="center"> </p>
    <p> </p>
</div>
<div class="footer">
    <p align="center">Copyright © 2013<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40745099-1', 'lanisakai.com');
ga('send', 'pageview');
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41801281-1', 'lanisakai.com');
ga('send', 'pageview');
</script>
   Lani Sakai Pastel Pet Portraits</p>
</div>
</div>
</body>
</html>
The twoColLiqLtHdr.css page
@charset "utf-8";
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          margin: 50;
          padding: 0;
          color: #000;
          background-image: url(images/sky1.jpg);
          background-position: left bottom;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
          padding-right: 15px;
          padding-left: 20px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
          font-size: medium;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color:#000000;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #000000;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
          color: #000;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
          width: 100%;
          max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
          min-width: 780px; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
          font-size: 100%;
          background-color: #6FF;
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #6F7D94;
          font-size: x-large;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
          float: left;
          width: 20%;
          padding-bottom: 10px;
          background-color: #66FFFF;
          font-size: medium;
.content {
          padding: 10px 0;
          width: 80%;
          float: left;
          font-size: 14px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
          border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 5px 5px 5px 15px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          text-decoration: none;
          background: #8090AB;
          color: #000;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          color: #FFF;
          font-size: 100%;
          background-color: #66CCFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
          background-color: #66FFFF;
          font-size: small;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
}.logo {
          height: 262px;
          width: 1088px;
          margin-right: auto;
.logo {
          height: 417px;
          width: 761px;
          margin-right: auto;
          margin-left: auto;
.introduction {
          font-size: x-large;
          font-style: normal;
          font-weight: lighter;
          color: #0033CC;
.logo {
          width: 770px;
          margin-right: auto;
          margin-left: auto;
.introduction {
          font-family: Verdana, Geneva, sans-serif;
.nameofpage {
          font-size: 200%;
          font-weight: bold;
.PictureTitle {
          font-size: medium;
.formby {
          font-size: 25%;
.formby {
          font-size: 12%;
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41801281-1', 'lanisakai.com');
ga('send', 'pageview');
</script>
Do I need to just start over from scratch?
Any suggestions would be appreciated.
Thank you,
Mobie Boy

Or you could include a width to your body style:
body {
background-image: url(Logo/sky1.jpg);
background-position: center center;
background-attachment: fixed;
width: 75%;}
It might work or not depending on your other color scheme.

Similar Messages

How can I copy and paste an entire page on the new Pages?

How can I copy and paste an entire page on the new Pages?

Open one document in Pages v5.5.3, Open a second document in Pages v5.5.3. Select, copy, and paste one page between source and destination documents. Document objects such as Text boxes, shapes, images, tables, etc must be individually selected, copied, and pasted.

How to resize the embeded player in a page after it has loaded?

Hi all
I'm working with Flash 8, with the FLV player component. The
player loads various flash videos (flv)
that can have verious sizes.
I have set the autosize detection for the player. But I want
the size of the embeded player to also
change according to the size of the loaded flv.
For example, if the loaded flv is 100px by 100px, I want the
embeded player to be 100px by 100px (in
the html code). if the flv is 500px by 350px, i want the
embeded flav to change to that 500 x 350px.
As far as I know, the sizes of the flv file cannot be
detected with PHP or javascript, so only the
component can detect the flv size. Therefore I would need a
way to re-write the embeded code after
the flv has loaded.
Anybody knows how to do that? Is it possible?
seb ( [email protected])
http://webtrans1.com | high-end web
design
Downloads: Slide Show, Directory Browser, Mailing List

Hi,
user13091824 wrote:
How to keep the filtered output in a page after user navigates back to all records from another page.
Currently it clears the search---While returing from page AM Return status should be True in pageContext.setForwardURL.:::
pageContext.setForwardURL("OA.jsp?page=/XXX/oracle/apps/po/msg/webui/SearchPG",
"SUPP_SEARCH",
OAWebBeanConstants.GUESS_MENU_CONTEXT,
null,
null,
true, // Retain AM
OAWebBeanConstants.ADD_BREAD_CRUMB_NO,
OAWebBeanConstants.IGNORE_MESSAGES);
---After setting AM Status to true u can able to c the values.
Regards
Meher Irk

How to make a picture fit an entire page in a pages

how to make a picture fit an entire page in a pages

Hello belluchis,
Thanks for using Apple Support Communities.
After inserting your image into your Pages document, follow the instructions in the Pages help section below to learn how to manipulate the object:
Resize, rotate, and flip an object - Pages Help for Mac
http://help.apple.com/pages/mac/5.2/#/tan114930688
Take care,
Alex H.

How to change the default Real-Time Collaboration page?

Who can tell me how to change the default Real-Time Collaboration page?
If I want to add my corporation logo in the top of the default page.How to do?
Thanks!

Thanks for your help.
"Click the Sites tab to display all sites and their IDs for your system." But I clicked the sites tab ,it showed "http://hostname:7777/imtapp/app/home.uix". I could not find the siteID parameter from it. Why?
How to get it from command?

How to print the Actual Check on 1st Page if line items are more for F110_p

Hi,
How to print the Actual Check on 1st page if the line items are more in F110_PRENUM_CHCK script. The standard script is printing at the last page of line items.
I tried using
IF &PAGE& EQ '1 '
/E 545 --> text element
ENDIF
but it is of no use.
Please let me know if anyone knows. Thanks in Advance.

Hi Krishna,
I guess, there is no other possible way to acheive this without modifying the standard driver program. Why because? in you driver program you check window will be called only on the last page... but before you change your driver program give a try like shown below....
Not sure, but give a try... In the first page you will be printing some void check try to replace the code inside the text element of void check with original check and make all the check void... note: in this text element, be sure you write two conditions...
IF &PAGE& = 1.
**PRint all check values..
ELSE.
***Print void values
ENDIF.
Close the thread if your question is answered.
Regards,
Sairam

HOW TO DISPLAY THE TEXT ON A PARTICULAR PAGE IN SAPSCRIPTS

HI,
   HOW TO DISPLAY THE TEXT ON A PARTICULAR PAGE IN SAPSCRIPTS?

in ur script main window
/: IF &TTXSY-PAGE& = 15.
ur text or standard text
/: ENDIF.
use this.
hope it helps if any issues revert back

How to get the form reference in .js page from .jsp page

hi
i have written one form in jsp page omething like:-
<html:form action="/shopping" onsubmit="return false;">
can anybody tell me,how to get the form reference in .js page from .jsp page ,
i have tried:-
var formRef = document.forms[0];
butits not working.
Thanks.

Its very simple......y cant u prefer google...Bad
c this example...
function submit()
alert("textbox"+ document.forms[0].name.value);//to get textbox value in js
document.forms[0].submit();//to submit jsp page using js
<html:html>
<html:form action="/shopping" onsubmit="submit()">
<html:text property=name>
learn to search in google..
</html:form>
</html:html>

How to know the amount of ora 11g page-out memory (sga and pga)?

How to know the amount of oracle 11g page-out memory ( sga and pga) in the SunSolaris 10 Unix and Linux.
I need to know how many oracle memory are being page-out ( all and for a one oracle server process).
thanks

You can monitor the paging with vmstat or sar commands.
http://download.oracle.com/docs/cd/B28359_01/server.111/b32009/tuning.htm#sthref500
You can also get the paging information on OEM home page if configured for your database.
But I don't know if there exists a method with which one can find out how much memory per session/server process is getting paged out.

How to keep the data entered on a page apex

how to keep the data entered on a page apex
so, I've got a registration page then wish go to another page P2 and I return to this P1 without losing data

Hi,
As long as the registration page is within the same session, the values will remain in the session until they are specifically cleared out. This can be done by a process on a page - so check if you have a "reset page" process on P1 and, if you do, delete it. This can also be done on a branch - so check the branch that takes you to P2 and see if there is anything entered in the Clear Cache setting and, if it shows *1*, remove that. There are other ways as well, but these are most typical.
Andy

How to keep the filtered output in a page after user navigates back?

How to keep the filtered output in a page after user navigates back to all records from another page.
Currently it clears the search

Hi,
user13091824 wrote:
How to keep the filtered output in a page after user navigates back to all records from another page.
Currently it clears the search---While returing from page AM Return status should be True in pageContext.setForwardURL.:::
pageContext.setForwardURL("OA.jsp?page=/XXX/oracle/apps/po/msg/webui/SearchPG",
"SUPP_SEARCH",
OAWebBeanConstants.GUESS_MENU_CONTEXT,
null,
null,
true, // Retain AM
OAWebBeanConstants.ADD_BREAD_CRUMB_NO,
OAWebBeanConstants.IGNORE_MESSAGES);
---After setting AM Status to true u can able to c the values.
Regards
Meher Irk

How to fit the footer always to bottom page

How to fit the footer always to bottom page.
Regards

Well, this is relatively simple. There are blue lines on your page with little blue squared arrows on each side. Hover your mouse over them to find out which ones define "Bottom of Page" and "Footer" (you will also see some towards the top of the page for Header). Adjust these so that the "Bottom of Page" line is quite literally the bottom of the page and move the footer one higher about 2 inches or so, depending on how big you want your footer to be. This automatically will define a footer to stay consistantly on the bottom of your page(s) throughout the site even when expanding or shrinking window sizes. Just another great feature of Adobe Muse

How to do The quotes and subscripts in pages??

Hi guys,
I don't know how to do the quotes and subscripts in pages for iOS...
Someone can tell me this??
Sorry for my English, I'm not American...

You can create left and right single quotes with option + }, and shift + option + }, respectively.
Double quotes work the same way using the { character substituted above.
Menu > Format > Font > Baseline:
Superscript is control + command and +
Subscript is control + command and -

TS1702 how to find the serial number, after purchase Pages online?

how to find the serial number, after purchase Pages online?

If you downloaded the standalone trial version of Lightroom, it will be necessary for you to uninstall that version. Then you will be able to install Lightroom through the creative cloud application manager. After you install Lightroom that way, just double-click on the catalog that you have already started.

Jtable: How to change the color of an entire row?

How can I change the color on an entire row in a Jtable based upon the value in one of the cells in that row.
For example: Lets say:
I have 5 rows. Each row has 4 columns.
If column 4 has a value "A" in any of the rows, all the text in that row should be red.
If column 4 has a value "B" in any of the rows, all the text in that row should be blue.
Just point me in the right direction and I will try to take it on from there.
Thanks

In the future, Swing related questions should be posted in the Swing forum.
But there is no need to repost because you can search the Swing forum for my "Table Prepare Renderer" (without the spaces) example which shows how this can be done.
But first read the tutorial link given above.

How to Narrow the Design of an Entire Page

Similar Messages

Maybe you are looking for