SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie confused over positioning

    Elderly newbie building my first site from "Web Site The Right Way" by Lloyd.

    My Navigation, body and search divs are sitting on top of the tagline in Dreamweaver CS3. I have an image floated right. When I open the site up (on my computer) in Firefox 3.5 or IE 8 it is a mess until I click on any page in the navigation, after which it looks and works correctly.
    This site is not on the web because there is an earlier version up. Any help, in simple words will be greatly appreciated. Thank you.
    Here is my CSS page. Both this and the HTML for the site have been validated by Dreamweaver.

    Code:
    @charset utf-8;
    /* CSS for Sozein Right Way1*/
    
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    body bgcolor:#64748B;
    line-height:125%;
    padding:0;
    border: 0;
    } 
    
    h1 {
    font-family: "Trebuchet MS",  Arial, Helvetica, sans-serif;
    font-size:x-large;
    font-weight:bold;
    background-color:#26354A;
    color:#FFBA00;
    padding-top: 2em;
    padding-left: .4em;
    padding-bottom: .2em;
    margin: 0;
    }
    
    li {
    	font-size:small;
    	list-style-type:none;
    }
    
    h2 {
    	color:black;
    	font-size:medium;
    	font-weight:normal;
    }
    
    p{
    	font-size:medium;
    	color:black;
    }
    #sitebranding p {
    	background-color:#26354A;
    	color: #FFBA00;
    	letter-spacing:.3em;
    	line-height:26px;
    	padding-left: .2em;	
    }	
    
    #tagline p {
    	background-color: #26354A;
    	color: #FFBA00;
    	letter-spacing:.3em;
    	line-height:26px;
    	font-style:italic;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	padding-top: .2em;
    	padding-bottom: .2em;
    	padding-left: .8em;
    	margin: 0;	
    }
    
    #search {
    	font-size: x-small;
    	font-weight: bold;
    	position: absolute;
    	top: 106px;
    	right: 11px;
    }	
    #navigation {
    	background-color:#FFFF84;
    	color:navy;
    	font-weight:bold;
    	width:275px;
    	height:auto;
    }
    
    a {
    	font-weight: bold;
    }
    
    a:link { 
    	color:#000000;
    }
    
    a:visited {
    	color: gray;
    }
    
    a:hover {
    	text-decoration:none;
    	color:#FFFFFF;
    	background-color: navy;
    }
    
    a:active {
    	color:: aqua;
    	background-color: navy;
    }
    
    #navigation, #bodycontent, #header  {
    	position:absolute;
    	left: 3px;
    	top: 1px;
    }
    
    #navigation, #bodycontent {
    	top: 106px;
    }
    
    #bodycontent {
    	left:283px;
    	width:1135px;
    }
    
    #header {
    	width:100%;
    }
    
    .feature {
    	float:right;
    	margin: 10px;
    }
    
    table.courses {
    	border-collapse:collapse;
    }
    
    table.courses caption {
    	color: #000066;
    	font-size: small;
    	text-align: left;
    	padding-bottom: 5px;
    	font-weight: bold;
    }
    	
    th {
    	text-align:left;
    	background: #26354A;
    	color:#FFFFFF;
    	padding: 0.2em;
    }
    
    td {
    	border: 1px solid black;
    	padding: 0.2em;
    }
    
    table.courses th, table.courses td {
    	padding: 4px;
    	border: 1px solid #000066;
    }
    
    table.courses th {
    	font-size: x-small;
    	text-align: left;
    	padding-top: 0;
    	padding-bottom: 0;
    	padding-left: 2px;
    	padding-right: 2px;
    }
    
    table.courses td {
    	font-size: small;
    	background: #FFFF84 /*url(/images/Neils%20trial%20Td.jpg) */ repeat-x top  ;
    }
    
    		/* declarations for Quiet Days table */
    table.quietdays {
    	border-collapse:collapse;
    }
    
    table.quietdays caption {
    	color: #000066;
    	font-size: small;
    	text-align: left;
    	padding-bottom: 5px;
    	font-weight: bold;
    }
    	
    th {
    	text-align:left;
    	background: #26354A;
    	color:#FFFFFF;
    	padding: 0.2em;
    }
    
    td {
    	border: 1px solid black;
    	padding: 0.2em;
    }
    
    table.quietdays th, table.quietdays td {
    	padding: 4px;
    	border: 1px solid #000066;
    }
    
    table.quietdays th {
    	font-size: x-small;
    	text-align: left;
    	padding-top: 0;
    	padding-bottom: 0;
    	padding-left: 2px;
    	padding-right: 2px;
    }
    
    table.quietdays td {
    	font-size: small;
    	background: #FFFF84 repeat-x top;
    }
    /* end of declarations for Quiet Days table */
    
    /* declarations for Quiet Days Timetable table */
    table.timetablequietday {
    	border-collapse:collapse;
    }
    
    table.timetablequietday caption {
    	color: #000066;
    	font-size: small;
    	text-align: left;
    	padding-bottom: 5px;
    	font-weight: bold;
    }
    	
    th {
    	text-align:left;
    	background: #26354A;
    	color:#FFFFFF;
    	padding: 0.2em;
    }
    
    td {
    	border: 1px solid black;
    	padding: 0.2em;
    }
    
    table.timetablequietday th, table.timetablequietday td {
    	padding: 4px;
    	border: 1px solid #000066;
    }
    
    table.timetablequietday th {
    	font-size: x-small;
    	text-align: left;
    	padding-top: 0;
    	padding-bottom: 0;
    	padding-left: 2px;
    	padding-right: 2px;
    }
    
    table.timetablequietday td {
    	font-size: small;
    	background: #FFFF84 repeat-x top;
    }
    /* end of declarations for Quiet Days Timetable */
    
    /*start of declarations for form on Contact Us page*/
    form.contact fieldset {
    	border: 2px  solid navy;
    	padding:  10px;
    }
    
    form.contact legend {
    	font-weight:bold;
    	font-size:small;
    	color:navy;
    	padding: 5px;
    }
    
    form.contact {
    	padding:0;
    	margin:0;
    	margin-top: -15px;
    	line-height: 150%;
    }
    
    form.contact label {
    	font-weight: bold;
    	font-size:small;
    	color: navy;
    }
    
    form.contact label.fixedwidth {
    	display: block;
    	width: 240px;
    	float: left;
    }
    
    form.contact .buttonarea input {
    	background: navy;
    	color: white;
    	font-weight: bold;
    	padding: 5px;
    	border: 1px solid white;
    }
    
    form.contact .buttonarea {
    	text-align: center;
    	padding: 4px;
    	background-color: #26354A;
    } 
    
    /*end of declarations for form on Contact Us page*/
    Last edited by spikeZ; Jul 17, 2009 at 10:21. Reason: added [code][/code] tags

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Neil and welcome to SitePoint

    From a quick glance at the code, other than some remedial shortening of declarations such as
    Code:
    padding:  0 2px;
    rather than:
    Code:
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2px;
    padding-right: 2px;
    and look at the same for font rules, the code looks ok.

    Can you post your HTML code too so we can see if that looks ok too?

    Also please use the bbcode tags [code][/code] so it keeps the indenting and alignments

    Cheers
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Enthusiast CupidsToejam's Avatar
    Join Date
    Jun 2009
    Location
    TX
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any way you can make this site live so we can "see" what you are seeing? If you cant make the site live, we need to see ALL the code. That means showing us the html also.

  4. #4
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. have not worked out how to do bbcode tags just yet.
    When I cut and paste the HTML I get:-

    In an effort to stamp out forum SPAM only members with 10 posts or more can post website links or email addresses. So I have deleted www chunks.

    I cannot figure a way of making this 'live' without ruining what is up and running - even if it is deprecated.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:/R/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http:999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sozein - A Churches' Ministry of Healing Trust</title>
    <link href="sozein RW1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
    <div id="sitebranding">
    <h1>Sozein</h1>
    </div>
    <div id="tagline">
    <p>A Churches' Ministry of Healing Trust</p>
    </div>
    <div>
    <!-- SiteSearch Google -->
    <form method="get" action="http:e.com/search">
    <div id="search">
    <label for="q">Search/label>
    <input id="q" name="q" size="20" maxlength="225" value="" type="text" />
    <input name="domains" value="http:/org.uk/" type="hidden" />
    <input name="sitesearch" value="http:/rg.uk/" checked="checked" id="mysite" type="radio" />
    <label for="mysite">Just this site</label>
    <input name="sitesearch" value="" id="www" type="radio" />
    <label for="www">WWW</label>
    <input name="btnG" value="Go" type="submit" />
    </div>
    </form>
    <!-- SiteSearch Google -->
    </div>
    </div>
    <!--end of header div-->
    <div id="navigation"><!--Start of main navigation div-->
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="Sozein index.htm">Home</a></li>
    <li><a href="mission.htm">Mission</a></li>
    <li><a href="quiet days.htm">Quiet days</a></li>
    <li><a href="courses.htm">Courses</a></li>
    <li><a class="Classic quotes.htm" href="Classic quotes.htm">Classic Quotes&nbsp;</a>
    <ul>
    <!--commenting out this sub-menu until I've learnt more
    <li><a href="Cloud of Unknowing.html">The Cloud of Unknowing</a></li>
    <li><a href="Walter Hilton.html">The Revd Walter Hilton</a></li>
    <li><a href="Theologia Germanica.html">The Theologia Germanica</a></li>
    <li><a href="St Francis de Sales.html">St Francis de Sales</a></li>
    <li><a href="Julian of Norwich.html">Julian of Norwich</a></li>
    <li><a href="Revd William Law.html">The Revd William Law</a></li>
    <li><a href="Madame Guyon.html">Madame Guyon</a></li>
    <li><a href="Thomas Traherne.html">The Revd Thomas Traherne</a></li>
    <li><a href="de Caussade.html">Fr Jean Pierre de Caussade</a></li>
    <li><a href="St Therese of Lisieux.html">St Therese of Lisieux</a></li>
    <li><a href="Teilhard de Chardin.html">Fr Pierre Teilhard de Chardin</a></li>
    <li><a href="Martin Israel.html">The Revd Dr Martin Israel</a></li>
    -->
    </ul>
    </li>
    <li><a href="Homeopathy.htm" class="MenuBarHorizontal">Homeopathy</a></li>
    <li><a class="Book Reviews.htm" href="Book Reviews.htm">Book Reviews&nbsp; </a>
    <ul>
    <!--commenting out this sub-menu until I've learnt more
    <li><a href="Pdf/Angels Messengers of Grace.pdf">Angels Messengers of Grace</a> </li>
    <li><a href="Pdf/A Reason for Living &amp; Hoping.pdf">A Reason for Living &amp; Hoping</a></li>
    <li><a href="Pdf/Review The Coincidence File.pdf">The Coincidence File</a></li>
    <li><a href="Pdf/Review Enduring Melody for website.pdf">The Enduring Melody</a></li>
    <li><a href="Pdf/Review several Books.pdf">Five Brief Reviews</a></li>
    <li><a href="Pdf/Review Four Ways, One Goal.pdf">Four Ways, One Goal</a></li>
    <li><a href="Pdf/Review Healing Death's Wounds.pdf">Healing Death's Wounds</a></li>
    <li><a href="Pdf/Review Healing Wounded History.pdf">Healing Wounded History</a></li>
    <li><a href="Pdf/Horizons of Perception by Barbara Bunce.pdf">Horizons of Perception</a></li>
    <li><a href="Pdf/Review 2 books.pdf">How to Befriend Your Shadow: Welcoming Your Unloved Side</a></li>
    <li><a href="Pdf/Journeying Home.pdf">Journeying Home</a></li>
    <li><a href="Pdf/Review Life after Loss.pdf">Life After Loss</a></li>
    <li><a href="Pdf/The Path to Well-being.pdf">The Path to Well-Being</a></li>
    <li><a href="Pdf/Review of Presence,.pdf">Presence</a></li>
    <li><a href="Pdf/Review Requiem Healing.pdf">Requiem Healing</a></li>
    <li><a href="Pdf/Review Way back to Paradise.pdf">The Way Back to Paradise</a></li>
    <li><a href="Pdf/Review The Works of Canon Michael Perry.pdf">The Works of Canon Dr Michael Perry</a></li>
    -->
    </ul>
    </li>
    <li><a href="about.htm" class="MenuBarHorizontal">About Us</a></li>
    <li><a class="Downloads and Links.htm" href="Downloads and Links.htm">Downloads &amp; Links&nbsp; </a>
    <ul>
    <!--commenting out this sub-menu until I've learnt more
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    -->
    </ul>
    </li>
    <li><a href="Fundraising.htm" class="MenuBarHorizontal">Fundraising</a></li>
    <li><a href="contact.htm" class="MenuBarHorizontal">Contact us</a></li>
    <li><a href="Guest book.htm" class="MenuBarHorizontal">Guest book</a></li>
    </ul>
    </div>
    <!--end of main navigation div-->

    <div id="bodycontent">

    <p><img src="images/Peace flowers1.jpg" class="feature" alt="two yellow roses called wedding day" /></p>
    <blockquote>
    <h2><strong>Healing is God's ceaseless work. Endlessly he desires our wholeness, our perfection in love.</strong></h2>
    </blockquote>

    <p>The Sozein Trust is situated in pleasant countryside, with the
    desire to serve and love God, by welcoming and
    attending to people who are poorly: physically,
    mentally or spiritually. </p>
    <p>Many folk like to think that the church
    can produce physical healing of diseased or damaged bodies.
    Whilst this occasionally happens it is not the core work of
    the church’s ministry of healing. The core work is encouraging
    both groups and individuals to seek, and grow in co-operating
    with the will of God. Through prayer and childlike, expectant
    trust we allow God “to love the hell out of us&#8221 so that
    our actions become more charitable and less destructive.</p>
    <p>&#8220Here&#8221, as a Chairman of the Trustees said, &#8220people
    meet their real selves and discover what it is to love themselves
    and be loved by others and by God. By the gently strong work
    of the Spirit of God broken hearts are bound together, captives
    are released and people who feel themselves to be imprisoned
    are set free.&#8221</p>
    <p>The Sozein Trust is for any who feel
    the need of a listener, prayer help or a place to be alone
    with God. We have&nbsp; a residential library for
    individuals or groups and a small chapel.
    Holy Communion is celebrated on Fridays at 12.00 noon.</p>

    <h1>Coming Next &quot;Embrace me, Lord&quot; a Quiet day on Wednesday August 12th 9.45-4pm</h1><br/>

    <p><strong>What We Do</strong></p>

    Healing Eucharist's: Every Friday at 12 noon, with simple lunch. Please book.<br/>

    Retreats, Quiet Days and teaching for clergy and laity, individuals and groups.<br/>
    Attending to distressed people needing spiritual support.<br/>
    Spiritual Direction.<br/>
    A Residential and day library resourcing the Ministry of Healing, Christian Spirituality and Mysticism.<br/>
    Sozein is available to parish teams and individuals seeking help in the Christian healing ministry.<br/>
    <p>&nbsp;</p>

    Sozein is a registered charity No. 1044449

    <p></p><p></p></div>
    <!--end of bodycontent div-->

    <!--Google analytics code-->
    <script type="text/
    <!--End of google analytics code-->
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi neil

    your html code also look fine except missing part in the Google analytics code
    at the bottom

    as I don't have the sample of the image or even the size of the image in
    <p><img class="feature" src="images/Peace flowers1.jpg" /></p>
    I guess the width is the same width of right content.

    Well IMHO,it would be easier for me if you use float than position=absolute
    but if you like it there are some thing you have to fix.

    First, your header width is 100% but your left content is 275px and your right is 1135px
    It should be whether
    change header width to 1410px (not recommend)
    or change your right content to 25% and your content left to 74%(because there is 3px gap on the left)

    Second,your search position (Top) should be only 16px not 106px if you need your search place in the header.

    This is not all the fix but will help your page look better

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grateful thanks to all who have replied. I shall certainly work on this; your help is just what I need. I have learnt, also to turn on No Script bits so that the BB buttons now work, too!

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neil.broadbent View Post
    When I open the site up (on my computer) in Firefox 3.5 or IE 8 it is a mess until I click on any page in the navigation, after which it looks and works correctly.
    Do you mean that the homepage is messed up, but the other pages look correct? This sounds as if you have a syntactical error specifically on the home page of your site.

    For example in a html element, a div id/class or perhaps failing to close an element correctly.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this intended?

    - Line 134 fail to have <p> tags around them
    - Line 149 unfinished tag <script type="text/

    Not sure that either of those would cause major issues though.

  9. #9
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whichever page I first open up in a browser on my computer is messed as originally described above. When I click any other page in Navig that and all subsequent pages look fine ( and work perfectly). All XHTML and CSS are all validated OK.

  10. #10
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the line comments. These are just my editing and are no problem.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neil.broadbent View Post
    Thanks for the line comments. These are just my editing and are no problem.
    Yes, I didn't think they would be causing any issues.

    The only other thing I can think of, before leaving this up to the people much better at this then me, is having a duplicate copy of the site with links pointing in all the wrong places. (I did notice you have a mixture of .htm and .html extensions in your link names).

    As ridiculise as this may sound, it is a problem I encounter fairly regularly when working with my students. They will often create duplicate copies, rename files in Windows Explorer, having an untitled-1.html that they are using as an index which points to an index.html that they are not...etc.

    Sorry if none of this is of any help.

  12. #12
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Harristown. I can quite see why you offer these comments and that it would potentially cause mess-ups. I have re-checked and I have managed to avoid such pitfalls. Thanks, though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •