CSS Help - Positioning

Hi guys,
First off, thanks for reading and I do appreciate any help
that anyone can give me. The item that I'm need a hand with is
this: -
http://www.final-exodus.net/testing/walbrook2/
I've been having a play around with CSS and have kept it
simple so far, just so I can keep a clear idea of what's going on.
I'm quite keen to avoid using tables and for the most part had
managed to that until I ran into a problem with the navigation div
(img_nav). If I try to place second div alongside this one, it ends
up above or below it. I can't use a float property or it will just
move to the far left or right of the screen, when I want it to
appear next to the banner.
So, I figured our old friend the table might help. The page
you can see above is for a one row, two column table, with a spry
(version 1.4) menu in the left and the image on the right BUT the
spry menu item pushes the length of the table out of line with the
image.
So,I'm stuck. As such, my main questions are: -
1 - Is there a CSS combination I can use to "stack" the Spry
navigation to the left of my image without having to reasort to
hard coding or table.
2 - How can I edit the height of the Spry menu bar?
I can attach code here if it will help anyone.

S_Andrews wrote:
> Hi guys,
>
> First off, thanks for reading and I do appreciate any
help that anyone can
> give me. The item that I'm need a hand with is this: -
>
>
http://www.final-exodus.net/testing/walbrook2/
Hi,
Just a thought - you could try downloading a css layout,
preferably a 2
col and dropping your spry menu into the side column
(normally the nav
column) - you can download some here to play with....
http://csstinderbox.raykonline.com/
This may give you a better understanding of css layouts.
HTH
chin chin
Sinclair

Similar Messages

CSS sticky position

I'm trying to create a navigation bar that is initially down the page and as the user scrolls the navigation bar remains pinned to the top of the browser. An example are shown here, in a CSS demo http://demo.hongkiat.com/css-sticky-position/index2.html and then here is a complete website that uses this: http://albanyrisk.com/
On the second example (albanyrisk.com) the navigation bar initially seems pinned to the footer, and then moves to the header when scrolling – ideally, this is the effect I'm trying to achieve.
Any help greatly appreciated!
Thanks
Steve

Hi,
Try this tutorial: http://www.youtube.com/watch?v=c-SD489AGa8
Abhishek

How to emulate CSS fixed position in Flex 3

Does anyone know how to emulate CSS fixed positioning in Flex 3?
Canvas (absolute layout) uses coordinates same as HTML/CSS absolute positioning.
How do I achieve fixed positioning where the panel is taken out of the flow and positioned relative to the application chrome? (similiar to applicationcontrolbar, but not exactly)
Someone please tell me if it is possible and some ideas how to achieve.
Mike

do not use the forum as marketing place for you site. if you want to share the content with SDN users, you have the blog area, wiki, article area.
raja

Need help positioning a CSS declaration

In Adobe's CSS Advisor, Matt Smith has an article explaining
the Disappearing List Background Bug.
He says,
"The fix for this bug is simple: just relatively position the
affected lists. You can relatively position all lists with the
following CSS declaration:
ul, ol, dl { position: relative; }
Can anyone tell me where in the body of my code does this CSS
declaration go?
Thanks,
Lane

Murray -
I admit it - I'm an idiot when it comes to code. No matter
where I try to put this declaration, I'm wrong.
If I can be so bold, I've copied the first few hundred lines
of code and placed them below. Would you please notate for me where
this declaration would be placed in the body of my code?
<!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>MurCal Homepage</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

Sometimes you have to ask a simple question to grasp the
concept. I really appreciate your help in this matter!
Lane

Need help positioning flash photo gallery partially behind graphic.

I have created the basic photoshop layout that I will now be assembling in Dreamweaver. I wish to create a 4 or 5 image gallery using LightBox 2 that will rotate images within the header graphic. Image attached. How would I accomplish this code wise. Would I place the arched graphic within it's own <div> and float it above the div that holds the slideshow/gallery? Any help would be appreciated.

To the example that you have linked to above, make the following additions
<div id="arch-container" style="position:relative;">
<div id="arch-img" style="position:absolute; top: 170px;"><img src="images/arch-img.png" alt="arch_img" width="959" height="195" /></div>
</div>
I have used inline styles to make it easy on myself, but in reality you would put the style rules in the corresponding element selector in the CSS. Also, you would readjust the values to suit.
Also, it is worth mentioning that placing a width and height on your image as you have done, should really be done using CSS.
Added:
As a side note, I have gotten into the habit of using classes for all of my style rules. I came to the conclusion that this is the way to go when trying to analyse a problem within my web page. ID's are unique per document and as such are used when manipulating the DOM using JavaScript. Now when I see an ID in one of my documents, I know that it is not a styling matter as in CSS, but a problem within my script.
Take the above note as a thought, because there is a ongoing debate about this.
Message was edited by: Altruistic Gramps

So frustrated! Need help positioning image...

Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
and the source code:
<!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>Great Diamond Rentals, Diamond Cove, Great Diamond Island, Maine</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1.3.2");
    </script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle();
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
} else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
} else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
</script>
<style type="text/css">

</style>
<meta name="Keywords" content="Maine, Vacation, rentals, Great Diamond Island, Diamond Cove, vacation homes, Island, Casco Bay, Portland, Maine Coast, Atlantic Ocean, Oceanside, seaside, Family, New England, lobster, beach, beaches, islands, rental, hotel, inn, bed and breakfast, holiday, ferry, fort, historic" />
<meta name="Description" content="Vacation on a Maine island! Beautiful historic homes available for rent at Diamond Cove on Great Diamond Island in Casco Bay near Portland, Maine." />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('images/visited_homes.jpg','images/visited_about.jpg','images/vi sited_amenities.jpg','images/visited_map.jpg','images/visited_faq.jpg','images/visited_con tsact.jpg')">
<div id="container">
<div id="header">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="http://greatdiamondrentals.com/view_our_homes.htm" target="_top" onclick="MM_nbGroup('down','group1','viewhomes','images/visited_homes.jpg',1)" onmouseover="MM_nbGroup('over','viewhomes','images/visited_homes.jpg','images/visited_hom es.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_viewourhomes.jpg" alt="View Our Homes" name="viewhomes" width="186" height="30" border="0" id="viewhomes" onload="" /></a></td>
        <td><a href="about_the_island_2010.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/visited_about.jpg',1)" onmouseover="MM_nbGroup('over','about','images/visited_about.jpg','images/visited_about.j pg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_about.jpg" alt="images/visited_about.jpg" name="about" width="192" height="30" border="0" id="about" onload="" /></a></td>
        <td><a href="amenities.htm" target="_top" onClick="MM_nbGroup('down','group1','amenities','images/visited_amenities.jpg',1)" onMouseOver="MM_nbGroup('over','amenities','images/visited_amenities.jpg','images/visited _amenities.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="amenities" src="images/nav_amenities.jpg" border="0" alt="amenities and activities" onLoad="" /></a></td>
        <td><a href="map_2010.html" target="_top" onClick="MM_nbGroup('down','group1','map','images/visited_map.jpg',1)" onMouseOver="MM_nbGroup('over','map','images/visited_map.jpg','images/visited_map.jpg',1) " onMouseOut="MM_nbGroup('out')"><img name="map" src="images/nav_map.jpg" border="0" alt="island map" onLoad="" /></a></td>
        <td><a href="FAQ_2010.html" target="_top" onClick="MM_nbGroup('down','group1','FAQs','images/visited_faq.jpg',1)" onMouseOver="MM_nbGroup('over','FAQs','images/visited_faq.jpg','images/visited_faq.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img name="FAQs" src="images/nav_faq.jpg" border="0" alt="FAQs" onLoad="" /></a></td>
        <td><a href="contact2009.html" target="_top" onClick="MM_nbGroup('down','group1','contact','images/visited_contsact.jpg',1)" onMouseOver="MM_nbGroup('over','contact','images/visited_contsact.jpg','images/visited_co ntsact.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="images/nav_contact.jpg" border="0" alt="contact us" onLoad="" /></a></td>
      </tr>
    </table>
    <h1> </h1>
</div>
<div id="sidebar1">
      <div id="slideshow">
<img src="/images/slide1.jpg" />
<img src="/images/slide2.jpg" />
<img src="/images/slide3.jpg" />
<img src="/images/slide4.jpg" />
<img src="/images/slide5.jpg" />
<img src="/images/slide6.jpg" />
<img src="/images/slide7.jpg" />
<img src="/images/slide8.jpg" />
<img src="/images/slide9.jpg" />
<img src="/images/slide10.jpg" />
</div>
</div>
<div id="mainContent">
    <h1> </h1>
</div>
    
    <div id="footer">
      <p>Great Diamond Rentals, c/o Phoenix Management, P.O. Box 759, Saco, Maine 04072 - (207) 766-3005 - fax (207) 571-3066 -<a href="mailto: [email protected]"> [email protected]</a></p>
      
</div>
    <br class="clearfloat" />

</div>
</body>
</html>

staceyetc wrote:
Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
The width of your #mainConent <div> is too wide hence in IE it is displaced to beneath the side bar.
Change it to 560px wide and also add float: left; as shown below:
.twoColFixLtHdr #mainContent {
    height: 579px;
    width: 560px;
    float: left;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    margin-left: 0px;
    background-image: url(images/GDRmaincontent.jpg);
    background-position: right top;
    background-repeat: no-repeat;
background-color:#609;

Internet explorer css row positioning

http://country-gallery.com/
On my index page, the box with our photo and where it says We update this site every day....is supposed to be in a row below the columns. I have tried to fix this issue with absolute positioning and clearing the float, but it doesn't help. Works perfectly in all other browsers.
In IE, it becomes a column.
How to fix in the css? Right now I have this div like so:
.borgeandjanet {
    width: 55%;
    background-color: FFF;
    float: left;
    margin-bottom: 0px;
    padding-left: 10px;
    font-size: 0.9em;
    clear: both;
    position: absolute;
    height: 140px;

yes thanks trying to not use absolute positioning
now i have the row floating below the columns, but...now it is floating to the left and not the right and I can't get it back over again!
http://www.country-gallery.com/
I have the section which starts with 'We update this site everyday' floating to the left and it needs to float right!
.borgeandjanet {
clear:both;
height:auto;
width: auto;
float:right;

CSS Logo position problem

Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.

Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
    margin: 0;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #66665E;
h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
    border: none;
img.left {
    float: left;
    margin: 7px 30px 0 0;
img.right {
    float: right;
    margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
    float: left;
    line-height: normal;
.list1 li img {
    margin: 0 30px 30px 0;
.list1 li.alt img {
    margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
    width: 920px;
    height: 45px;
    margin: 0 auto;
/* Menu */
#menu {
    float: left;
    width: 640px;
    height: 45px;
#menu ul {
    margin: 0;
    padding: 10px 0px 0px 5px;
    list-style: none;
    line-height: normal;
#menu li {
    display: block;
    float: left;
#menu a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 3px 25px 2px 25px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
    height: 20px;
    background: #FEC200 url(images/img02.jpg) repeat-x left top;
    color: #FFFFFF;
#menu .first {
    background: none;
/* Search */
#search {
    float: right;
    width: 250px;
    height: 45px;
#search form {
    float: right;
    margin: 0;
    padding: 12px 30px 0 0;
#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
#search-text {
    width: 135px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
#search-submit {
    height: 25px;
    margin-left: 10px;
    padding: 1px 10px;
    background: #C0C0C0 url(images/bg_grey.jpg);
    color: #000000;
/* Page */
#page {
    width: 920px;
    margin: 0 auto;
#page-bgtop {
    padding-top: 30px;
    /** LOGO */
#logo {
    width: 920px;
    height: 90px;
    margin: 0 auto;
    background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
#logo p {
    text-transform: lowercase;
    font-size: 10px;
#logo h1 {
    padding-top: 54px;
    font-size: 34px;
#logo a {
    text-decoration: none;
    color: #FFFFFF;
/* Content */
#content {
    float: center;
    width: 920px;
    height: 800px;
    padding-top: 0px;
    padding-right: 0px;
/* Post */
.post {
    background: url(images/img07.jpg) repeat-x left bottom;
    margin-bottom: 25px;
.post .title {
    height: 30px;
    color: #549900;
.post .title a {
    text-decoration: none;
    color: #585D60;
.post .date {
.post .meta {
    margin-top: -10px;
    padding: 2px 30px 2px 16px;
    background: url(images/img03.gif) no-repeat left 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
.post .meta span {
    display: block;
    margin-top: -10px;
.post .meta a { }
.post .entry {
    padding: 10px 0;
.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
    padding-left: 17px;
/* Sidebar */
#sidebar {
    float: left;
    width: 177px;
    padding-left: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #585D60;
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
    margin: 0;
    padding: 0px 10px;
#sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 7px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #464F54;
#sidebar p {
    line-height: 200%;
#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
#calendar tfoot #prev {
    border-top: 1px solid #24130F;
#calendar .pad {
    border-bottom: 1px solid #24130F;
#calendar #today {
    background: #24130F;
/* Footer */
#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
    background: #394144;
#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
#footer a {
    color: #E5FFC4;
This is the Mainpage:
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="logo">
</div>
<hr />
    
    <div id="header">
      <div id="menu">
        <ul>
          <li><a href="Vidmin.php" class="first">Home</a></li>
          <li><a href="Other.php">Other</a></li>
        </ul>
      </div>
      
      <div id="search">
        <form method="get" action="">
          <fieldset>
            <input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
          </fieldset>
        </form>
      </div>
      
</div>
    
    
    <div id="page">
    <div id="page-bgtop">
        <div id="content">
          <table width="920" border="0" align="center" cellpadding="4">
            <tr>
              <td height="42" valign="top"><table width="415" height="41" align="right">
                <tr>
                  <td width="215" height="35" align="center"> </td>
                  <td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
                  <td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="72" valign="top" align="center"><table width="859" height="72" border="0">
                <tr>
                  <td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
                  <td width="14"> </td>
                  <td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
                </tr>
                <tr>
                  <td height="17"><div align="center" id="register"></div></td>
                  <td> </td>
                  <td><div align="center" id="loginstatus"></div></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
                <tr>
                  <td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
                    <table width="300" height="291" >
                      <tr>
                        <td height="23" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
                          </div></td>
                        <td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
                          <input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
                          </div></td>
                        </tr>
                      <tr>
                        <td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
                          </div></td>
                        <td><div align="center"><img src="CaptchaSecurityImages.php?width=150&height=40&characters=8" alt="captcha"/></div>
                          <p>
                            <input name="security_code" id="security_code" type="text" size="30" />
                            </p></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="password" id="password" type="text" size="30" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name="submit" id="submit" value='Sign Up'/>
                          </div></td>
                        </tr>
                      </table>
                    </form></td>
                  <td width="6" align="center"></td>
                  <td width="475" align="center" valign="top"><form method='post' id='login_form'>
                    <table width="300" height="176" >
                      <tr>
                        <td height="19" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='emailenter' type='text' id='emailenter' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name='submit' value='Login'/>
                          <a href="ForgotPassword.php">Forgot Password?</a></div></td>
                        </tr>
                      </table>
                    </form></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="23" valign="top" align="center" > </td>
            </tr>
          </table>
</div>
        
        <div style="clear: both;"> </div>
    </div>
    </div>
    
    <div id="footer-bgcontent">
    <div id="footer">
        <p>Copyright (c) . </p></div>
    </div>
    
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help.

Urgent CSS Help Needed

Hi guys, I need some serious help, I am making a website for
University and am struggling to center the website so that it stays
centered on different resolutions and when the window is made
smaller. My lecturer gave me the code which is apparently this -
body {
margin:50px 0px; padding:0px;
text-align:center;
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
but I have no idea what to do with this stuff in order to
correctly implement it, the attached code is an example of one of
the pages I want centering, could someone either give me a step by
step walkthrough of what to do? or could they show me directly
where the code goes in the attached stuff.
Thanks in advance

try this:
<!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>Simons Self Portrait Bio</title>
<style type="text/css">

</style>
</head>
<body>
<div id="Content">
<div id="apDiv1"><img src="Images/xboxbio.jpg"
width="700" height="500" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect"
coords="12,456,122,492" href="xbox.html" />
</map></div>
<div id="apDiv2">
<iframe src="bioframe.html"
width="383" height="200"
align="right" marginheight="0" marginwidth="0">
</iframe>
</div>
</div>
</body>
</html>

Need Help positioning a graphic over an image.

Trying to position an arched graphic over an image in the header of this site. The photoshop image provided shows the three separate components. 1. The white content is one image that houses the main header images and the other three images lower on the page. In CSS it is the #inner-content. 2. #main-content is the teal color 3. The arch image, which sits inside #arch-container. The CSS is shown here, but when it is displayed in a browser...the #inner-content sits below the arch image instead of up underneath it. I have tried many variations within the CSS and can't find the solution. Help!
@charset "utf-8";
    margin: 0px;
    padding: 0px;
#page-wrap {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
#page-wrap #main-content {
    width: 960px;
    height: 1200px;
    background-color: #445d64;
    float: left;
#page-wrap #main-content #inner-content {
    height: 1175px;
    width: 800px;
    background-image: url(images/inner-container-bg.jpg);
    float: left;
    margin-left: 80px;
    clear: both;
#page-wrap #arch-container {
    width: 960px;
    height: 200px;
    z-index: 10;
    float: left;
    position: relative;
#page-wrap #arch-container #arch-img {
    background-repeat: no-repeat;
    float: right;
    width: 960px;
    position: absolute;

You need to bear with me a little more, age is rapidly setting in making it harder for me to understand what you are on about.
Which code did I supply?
Or do you mean the link?
If you are referring to the link, I do not see a 170px gap from the top.
Maybe someone more from this world would like to help you.
Happy New Year!

Need css help please!

I'm having a problem in IE 7 & maybe 8 with my website. Here is the link to the staging site:
http://www.checkmandesign.com/staging/
In IE 7 the main content div seems to be pushed down from where it is supposed to be. I am on a Mac and it looks fine in Firefox & Safari. I can't view it on a PC so I am going by what I am being told by friends and also what I see on browser shots. I am new to coding so perhaps my css is messy and causing this. Can anyone help? I am also having another issue with a jquery script in my portfolio pages. The gallery is not loading properly in IE 7&8. It's a known issue which some people have written fixes in the forums (http://blog.ilexius.de/blog-post/2010/09/27/javascript-galleria-and-ie6-7-and-8-compatibil ity/)
I am pasting my CSS below in case anyone can see something that I am missing regarding the content issue:
body, h1, h2, p, ul, li {
margin: 0px;
padding: 0px;
font: normal 12px/28px Arial, Helvetica, sans-serif;
color: #7d7c7c;
text-align: left;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
#content h1 {
font-size: 14px;
font-weight: bold;
color: #FD1D13;
display: block;
padding-bottom: 10px;
#content h2 {
font-size: 14px;
line-height: 28px;
color: #7d7c7c;
font-weight: bold;
#content p {
font-size: 12px;
line-height: 16px;
color: #7d7c7c;
display: block;
margin-top: 0px;
margin-bottom: 16px;
#outerWrapper {
width: 980px;
margin: 0px;
#header {
height: 136px;
float: none;
clear: none;
#nav_bar {
height: 108px;
top: 172px;
padding-left: 110px;
padding-top: 10px;
padding-right: 40px;
#content {
width: 460px;
left: 280px;
padding-left: 290px;
background: #ffffff;
text-align: left;
margin-top: 1px;
padding-top: 62px;
#footer {
height: 70px;
padding-top: 60px;
padding-left: 100px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
#footer p {
font-size: 10px;
line-height: 18px;
color: #7d7c7c;
text-align: center;
#footer p .footerLinks .footerLinks {
color: #7d7c7c;
text-decoration: underline;
#sidebar-left {
width: 140px;
padding-left: 130px;
float: left;
padding-top: 62px;
font-size: 13px;
#sidebar-right {
float: right;
width: 151px;
padding-left: 40px;
position: absolute;
top: 150px;
left: 751px;
height: 400px;
#mailingList {
font-size: 12px;
font-weight: bold;
color: #FD1D13;
#form1 {
padding-top: 20px;
.navbar-icon {
border-right: 1px solid #999;
padding-right: 5px;
margin: 0px;
z-index: 10;
#nav-bartext {
position: absolute;
z-index: 200;
#thumbnails {
height: 471px;
.clientList {
list-style: disc inside;
line-height: 16px;
font-size: 12px;
.footerLinks {
font-size: 10px;
color: #7d7c7c;
font-weight: normal;
#sidebar-left {
font-size: 14px;
line-height: 28px;
color: #1B0499;
#sidebar-right p img {
padding-bottom: 10px;

You can't have it both ways. You can either float a container or you can position it. I prefer to float columns.
#sidebar-right {
    float: right;
    width: 151px;
    padding-left: 40px;
/**REMOVE ALL OF THIS**/
    position: absolute;
    top: 150px;
    left: 751px;
    height: 400px;
Learn CSS positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Review Floats and Clearings -
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need CSS help

I'm relatively new to CSS and stumbling around. Can someone look at this page and tell me how to get the "more" boxes lined up in the top four white boxes?
http://www.fbcwentzville.com/new_site_2010/index_new.html
Would I use a relative position and how would I go about doing that? Also, when you make changes to the css sheet within Dreamweaver, do changes take place immediately? I tried playing around with relative position and didn't see any changes to it.
Thanks!

Hey Malaperty. Let me help you out and at least fix the issue at hand. Rather easy fix, but it will take a little pixel playing on your end to fine tune where you want your "more" buttons precisely.
First add postition:relative; to your .subdiv2 in the css. so the final code will look like this:
.subdiv2{
                position:relative;
                width:225px;
                float:left;
                margin:0 12px 0 0;
                background:url(../images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0;
                color:#000;
                height: 350px;
                padding: 0;
Next, eliminate the margins from .subdiv2 p.more in your css and add the below code.
.subdiv2 p.more{
                position:absolute;
                bottom:20px;
                right:20px;
I added 20px to the bottom and right properties but this is where you need to play with it to fine tune the placement. bottom:20px means it will be 20px from the bottom of the .subdiv2 div and right:20px means it will be 20px from the right side of the subdiv2 element.
I won't get into explaining why all this works as you have some links to learn all this.
As far as absolute positioning being a bad layout strategy...well that can't be any more wrong. It is only bad if it is misused and then things can get ugly. Use it right and it can make form some of the best web effects that you can imagine. Learn and love it, but always use it wisely.
Check this link out http://csszengarden.com/ here you will find they use absolute positioning all over the sample sites...truly thinking outside the box. So absolute positioning is not to fear!

Table created in Dreamweaver with CSS not positioning correctly

I've created a simple 9 page website using Dreamweaver and CSS. I am no pro but I can edit some in the code. I'm really enjoying the CSS but for some reason I cannot find out why my tables appear perfect in Firefox but not in Chrome or IE. The tables are centered properly but they appear way below where they're intended to be!
I've tried to paste my code but can't, is there somewhere I can post it?
-jrntmd8r88

After struggling with this last night I took a look again this morning and narrowed down and corrected the problem. Basically, this is what happened to cause the issue and how I resolved it. Hopefully it helps others in the future.
Steps
Create project in Windows version of Cp (I was using version 8.01).
For my client's requirements, which are quite unique and complex compared to the typical Cp project, custom quiz questions/scoring had to be developed. Since these are HTML5 (non-responsive) courses, and Javascript is the fastest/most efficient way to do this, I used Javascript extensively for quizzes via the 'Execute Javascript' action. So for quiz questions, each answer is simply a smartshape (transparent, with answer text in it) that triggers the 'Execute Javascript' on click. In addition, on many of the quiz slides there are Edge Animate/HTML5 interactions embedded.
Worked fine on windows upon publish. But when I opened on a new Mac and published, when a question answer was clicked nothing would happen.
Turns out the problem seems to be with the text in the Javascript window. I think it somehow gets corrupted, though it looks fine. I had to literally delete the javascript, save it, and then copy it back in. Once I did that, it works.
I've invested too much time in this project so far, so don't want to risk any more major issues popping up like this, so I switched back to Windows and canceled my subscription this morning. Fortunately I have a license from my employer for Windows and will just use that with Boot Camp.

Css background-position problem

Hello, I get a problem with this style:
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(images/myimage.jpg);
background-position: center bottom;
background-repeat:repeat-x;
</style>
In ie7 works fine, in firefox 2 the bottom position doesn't
work...
Any suggestion ?
Thanks
howdy

Hello, this is the page, simply copy and paste.
<!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>test background</title>
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(
http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
background-position: center bottom;
background-repeat:repeat-x;
#layer1{
text-align: center;
width: 300px;
margin-right: auto;
margin-left: auto;
border: 2px double #003333;
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Quisque cursus, justo a tincidunt volutpat, dui orci
feugiat
justo, at varius odio est quis turpis. Integer nisl enim,
condimentum
et, eleifend et, posuere quis, risus. Nam convallis. Integer
diam dui,
accumsan mattis, dignissim at, dictum rutrum, justo. Praesent
lacinia.
Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec,
malesuada
laoreet, aliquam sit amet, magna. Ut turpis metus,
sollicitudin ac,
fermentum non, pretium eu, augue. Nunc faucibus, leo eu
pharetra
ultrices, sem augue ultricies risus, at egestas velit lectus
ac velit.
Suspendisse pretium nibh dapibus turpis. Praesent felis mi,
vestibulum
eu, pellentesque et, consequat eu, ante. Nulla accumsan enim
et pede.
Suspendisse potenti.
Donec eget nulla. Proin et est. Integer volutpat, dolor
scelerisque
bibendum egestas, lacus dui venenatis odio, vitae varius
massa eros sit
amet ligula. Curabitur tellus. Curabitur ultricies volutpat
tellus. In
sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet
turpis at
nunc. Vivamus volutpat, metus dignissim accumsan hendrerit,
turpis
turpis aliquet nulla, non viverra dui dui quis quam. Mauris
sem nunc,
laoreet in, elementum vitae, tempor a, libero. Cras ac turpis
sit amet
risus cursus ultrices. Sed id quam.
Nulla tortor ligula, adipiscing nec, ornare eu, gravida in,
justo. Sed
elementum vestibulum lectus. Mauris lectus mauris, convallis
nec,
posuere quis, lacinia at, felis. Vestibulum ante ipsum primis
in
faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean cursus
quam eget dui. Maecenas sapien. Aenean pellentesque lobortis
mi. Quisque
tempor ipsum in libero. Pellentesque habitant morbi tristique
senectus
et netus et malesuada fames ac turpis egestas. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Quisque lacus tellus, ornare quis, euismod et, lacinia sed,
justo. Proin
auctor nisi sed tortor. Fusce in justo et nisl fermentum
vehicula.
Quisque urna felis, lacinia at, viverra in, fermentum ut,
lacus. Duis
tempus. Morbi bibendum libero vitae diam faucibus placerat.
Praesent eu sapien. Sed ut velit quis magna lobortis
malesuada.
Phasellus dignissim risus ac est. Pellentesque semper sem.
Donec porta
nulla nec quam. Pellentesque aliquet risus id quam. Proin
tincidunt erat
nec nunc. Praesent euismod fringilla ipsum. Donec ornare.
Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia
Curae; Sed leo.
Proin non nisi non neque porta tempus. Proin varius velit eu
sapien.
Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus
euismod,
felis in scelerisque pharetra, diam augue eleifend mi, a
rutrum mauris
arcu nec orci. Proin sed erat. Pellentesque et libero.
Aliquam ante
velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae
nisl ac
metus cursus viverra. Proin non felis. Donec massa. Nullam
quam lectus,
pulvinar eget, condimentum at, tristique in, quam. Proin
vehicula
elementum diam. Proin sapien. Praesent suscipit, lorem at
dapibus
fringilla, orci elit facilisis lacus, at dictum augue velit
quis enim.
Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum
gravida
vulputate mauris.
Pellentesque consectetuer. Cras tellus justo, iaculis vitae,
semper at,
scelerisque porta, tortor. Pellentesque at mi sed tellus
pellentesque
ultricies. In quis pede. Integer vel tortor at dui elementum
suscipit.
Praesent interdum posuere odio. Integer mollis mattis ipsum.
Duis id
metus ut nulla molestie sagittis. Suspendisse faucibus urna
vel metus.
Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis
pharetra
tortor, quis viverra neque lorem eget massa. Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit. Suspendisse vestibulum arcu
vitae odio.
Fusce enim lacus, porttitor nec, scelerisque non, viverra eu,
enim. Sed
mauris. In hac habitasse platea dictumst. Duis porta mauris
quis orci.
Donec suscipit turpis eu dui egestas suscipit. Suspendisse
potenti. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur
ridiculus mus. In hac habitasse platea dictumst.
Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem
at sem
euismod blandit. Nullam pede lacus, interdum eu, aliquam a,
pretium vel,
sem. Pellentesque fringilla leo feugiat nibh. Cras non enim.
Donec
luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec
nec lectus
nec leo iaculis fringilla. Sed felis magna, cursus et,
hendrerit sit
amet, pretium at, sapien. Vivamus ornare neque facilisis
arcu. Vivamus
nisi leo, varius ac, sodales ut, dapibus eget, eros.
</div>
</body>
</html>

SSI and CSS Help

I'm really hoping someone can help with this.
I have a couple of SSI's on a site I'm developing. They are
text only .html files that have links on them to other pages where
you can get more info.
My problem is that the page properties for my index.php page
override the CSS that I've created for the SSI's. I want the SSI
text to have it's own look, separate from what the look of the
index.php page is. Is this an easy fix or more major development.
I'm pretty new at all of this so talk to me like a child.
Thanks in advance for your help.

Put the CSS for the includes into the parent files. The
include files
should contain NO CSS.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"graphxguy777" <[email protected]> wrote in
message
news:eertmi$avr$[email protected]..
> I'm really hoping someone can help with this.
>
> I have a couple of SSI's on a site I'm developing. They
are text only
> .html
> files that have links on them to other pages where you
can get more info.
>
> My problem is that the page properties for my index.php
page override the
> CSS
> that I've created for the SSI's. I want the SSI text to
have it's own
> look,
> separate from what the look of the index.php page is. Is
this an easy fix
> or
> more major development. I'm pretty new at all of this so
talk to me like a
> child.
>
> Thanks in advance for your help.
>
>
>

CSS Help - Positioning

Similar Messages

Maybe you are looking for