SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question placement of text around an image; three questions

    I have three questions. The full HTML [except for the html tags] and CSS are below.

    1. In the footer, I want the text to line up with the bottom of the image. I've played with margins and padding, but with no success. Is there a way to do it in CSS?

    2. In regard to the text placed around the image in the content div, I split up the text I wanted into two divs, and then placed each div where I wanted it within the content div. Is this a reasonable approach?

    3. For those two divs, how do I remove the white space on top of the text in both?

    For answers to any of these questions: thanks!

    Polly


    CSS:
    {
    background-image: url(graphics/leftsideborder.gif);
    background-repeat: repeat-y;
    }

    #toptitle {
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 250px;
    }

    /* this rule is so I can see where the divs are*/
    #toptitle, #navigation, #content, #footer {
    border: 1px solid red;
    padding: 2px;
    margin-bottom: 2px;
    }

    #navigation {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    width: 210px;
    letter-spacing: 0.03em;
    line-height: 200%;
    padding-left: 30px;
    float: left;
    top: 0;
    left: 0;

    }

    /* need this separately so that the rule overrides what the browser will do.*/
    #navigation a {
    text-decoration: none;
    }

    #navigation ul {
    list-style-type: none;
    }

    a:link {
    color: #6600CC;
    }
    a:visited {
    color: navy;
    }
    a:hover {
    color: #993333;
    }
    a:active {
    color: #6699FF;
    }

    #left {
    float: left;
    margin-top: 0;
    }

    #right {
    margin-left: 300px;
    margin-top: 40px;
    }


    #content {
    margin-left: 250px;
    background: url(graphics/church.jpg) no-repeat;
    background-position: top;
    width: 535px;
    height: 800px;
    }



    #footer {
    margin-left: 250px;
    width: 535px;
    height: 80px;
    clear: both;
    }


    #footer img {
    float: left;
    margin: 0 20px 0 0;

    {

    HTML:

    <body>

    <div id="toptitle">
    <!-- use an id because there is only one top title-->
    Unitarian Church of Montpelier
    </div> <!-- close top title div-->


    <div id="navigation">
    <!-- use an id because there is only one navigation area-->
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="believe.html">What We Believe</a></li>
    <li><a href="visit.html">Your First Visit</a></li>
    <li><a href="directions.html">Directions</a></li>
    <li><a href="education.html">Religious Education</a></li>
    <li><a href="interim.html">Our Staff</a></li>
    <li><a href="http://prem.calendars.net/ucofm/">Upcoming Events</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="governance.html">Governance</a></li>
    <li><a href="history.html">History</a></li>
    <li><a href="links.html">UU Links</a></li>
    </ul>
    </div> <!-- close navigation div-->



    <div id="content">
    <p>Worship and Church School: Sundays at 10:00 a.m.<br>
    Office Hours: Tuesday - Friday 10:00 a.m. - 5:00 p.m.<p>
    <div id="left">
    <p>The Rev. Marta Flanagan <br>Interim Minister</p>
    <p>Sam Rossier<br>Church Administrator</p>
    <p>Sherri Glebus<br>Director of <br>Religious Education</p>
    <p>Catherine Orr<br>Director of Music</p>
    </div> <!--close div "left"-->
    <div id="right">
    <p>We welcome everyone to our church.</p>
    <p>Braille and large-print hymnals are available for Sunday services.</p>
    </div> <!--close div "right"-->
    </div> <!-- close content div-->


    <div id="footer">
    <img src="graphics/chalice.gif" alt="" width="48" height="56" >
    <strong>Unitarian Church of Montpelier (802) 223-7861<br>
    130 Main Street, Montpelier, Vermont 05602</strong>
    </div> <!-- close footer div-->

    </body>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I would use to do what you want. I changed a few lines in here, I'm not going to explain it all but you can find them I'm sure. You may want to make sure you are using proper syntax and upgrade everything to xhtml 1.0 by the way. Anyway here goes:

    Code:
    <html>
    <head>
    <style type="text/css">
    {
    background-image: url(graphics/leftsideborder.gif);
    background-repeat: repeat-y;
    }
    
    #toptitle {
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 250px;
    width:535px;
    } 
    
    /* this rule is so I can see where the divs are*/
    #toptitle, #navigation, #content, #footer {
    border: 1px solid red;
    padding: 2px;
    margin-bottom: 2px;
    }
    
    #navigation {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    width: 210px;
    letter-spacing: 0.03em;
    line-height: 200&#37;;
    padding-left: 30px;
    float: left;
    top: 0;
    left: 0;
    
    }
    
    /* need this separately so that the rule overrides what the browser will do.*/
    #navigation a {
    text-decoration: none;
    }
    
    #navigation ul {
    list-style-type: none;
    }
    
    a:link {
    color: #6600CC;
    }
    a:visited {
    color: navy;
    }
    a:hover {
    color: #993333;
    }
    a:active {
    color: #6699FF;
    }
    
    #left {
    float: left;
    width:200px;
    }
    
    #right {
    float:right;
    width:300px;
    }
    
    
    #content {
    margin-left: 250px;
    background: url(graphics/church.jpg) no-repeat;
    background-position: top;
    width: 535px;
    height: 800px;
    }
    
    
    
    #footer {
    margin-left: 250px;
    width: 535px;
    height: 80px;
    clear: both;
    }
    
    
    #footer img {
    float: left;
    margin: 0 20px 0 0;
    
    }
    #textbaseline {
    vertical-align:baseline;
    }
    </style>
    </head>
    <body>
    
    <div id="toptitle">
    <!-- use an id because there is only one top title-->
    Unitarian Church of Montpelier
    </div> <!-- close top title div-->
    
    
    <div id="navigation"> 
    <!-- use an id because there is only one navigation area-->
    <ul><!-- had to remove you links here because it wouldn't let me post them on the forums -->
    </ul>
    </div> <!-- close navigation div-->
    
    
    
    <div id="content">
    <p>Worship and Church School: Sundays at 10:00 a.m.<br>
    Office Hours: Tuesday - Friday 10:00 a.m. - 5:00 p.m.</p>
    <div id="left"> 
    <p>The Rev. Marta Flanagan <br>Interim Minister</p>
    <p>Sam Rossier<br>Church Administrator</p>
    <p>Sherri Glebus<br>Director of <br>Religious Education</p> 
    <p>Catherine Orr<br>Director of Music</p>
    </div> <!--close div "left"-->
    <div id="right"> 
    <p>We welcome everyone to our church.</p>
    <p>Braille and large-print hymnals are available for Sunday services.</p> 
    </div> <!--close div "right"-->
    </div> <!-- close content div-->
    
    
    <div id="footer">
    <img src="graphics/chalice.gif" alt="" width="48" height="56"  />
    <p id="textbaseline"><strong>Unitarian Church of Montpelier (802) 223-7861<br>
    130 Main Street, Montpelier, Vermont 05602</strong></p> 
    </div> <!-- close footer div-->
    
    </body>
    </html>
    Hope I understood your questions properly and this solves your problems.

    ps. I had to remove the links because it wouldn't let me post them.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could post the parts of the link eg somewhere dot com /myfile.htm and then readers can type it in.

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,025
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by canassassin View Post
    upgrade everything to xhtml 1.0 by the way.
    If you are serving your XHTML as text, it doesn't matter at all.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    If you are serving your XHTML as text, it doesn't matter at all.
    It can be good to get used to the idea of using strictly structured code so that its always done properly. Just a suggestion. Personally I check all my work to make sure it completely passes as XHTML 1.1, [other than what I post here(guess im too lazy)] but thats just me being paranoid.

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,025
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    To do that you just need a strict document... and a HTML strict would do. XHTML was created to be used as an application and not as text so there is no advantage at all if you use it like regular HTML in the same way that it is no more structured than any strict version of HTML.

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Cue the XHTML vs HTML 4.01 Strict discussion... Seriously, many designers who know far more than I do (including Molona) say to code in HTML and leave the X out of it. I'll leave it to you to search out the discussions on the topic.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah. I'l just admit that Molona probably knows a lot more than me on the topic, and is probably more qualified to argue what to do in relation to xhtml and html.


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
  •