placement of text around an image; three questions

**pellerbe** · Jan 27, 2009 12:18

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">

Unitarian Church of Montpelier
</div> 

<div id="navigation">

<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> 

<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> 
<div id="right">
<p>We welcome everyone to our church.</p>
<p>Braille and large-print hymnals are available for Sunday services.</p>
</div> 
</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> 

</body>

**canassassin** · Jan 28, 2009 01:43

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.

**Dr John** · Jan 28, 2009 07:18

You could post the parts of the link eg somewhere dot com /myfile.htm and then readers can type it in.

**molona** · Jan 28, 2009 08:58

Originally Posted by canassassin

upgrade everything to xhtml 1.0 by the way.

If you are serving your XHTML as text, it doesn't matter at all.

**canassassin** · Jan 28, 2009 10:47

Originally Posted by molona

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.

**molona** · Jan 28, 2009 11:49

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.

**Black Max** · Jan 28, 2009 22:08

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.

**canassassin** · Jan 29, 2009 00:50

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.

User Tag List

Thread: placement of text around an image; three questions

Thread Tools

Display

placement of text around an image; three questions

Bookmarks

Bookmarks

Posting Permissions