Getting text inside my border graphic.

**carrotflowers** · Sep 17, 2003 09:29

Hi SP CSS gurus,

I am seeking some advice/pointers about a good way to accomplish a design. You can see from here, what I am trying to get:
<deleted>

You can also see that to get the text inside the image, I set the width and height to specific pixels. I feel like that's not a great way to accomplish this, and I wondered if anyone had some advice.

Question 2: in the above link provided, the beginning of the text actually overlaps with the border image. Can anyone explain that to me?

Sorry, basic questions, I'm still a tables dependent designer trying to move to css dependent.

Thanks!

(And how do I vertical align center...just kidding

)

**Paul O'B** · Sep 17, 2003 12:37

Hi,

Because the image is in the background of the div the content will overwrite it unless you make alllowances. Therefore you will need to place the content appropriately using margin/padding etc.

Here is one solution:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 margin: 0px;
 background-color: #e7f5db;
 color:#000;
 font-family: "Trebuchet MS";
 font-size: 12px;
 text-align:center;
}
div {text-align:left}
.border {
 background-image: url(http://layla.sian.net/csstest/dotted_border.gif);
 background-repeat: no-repeat;
 padding: 0px;
 height: 394px;
 width: 546px;
 margin-right: auto;
 margin-left: auto;
 background-position: left top;
}
.text {
 text-align: left;
 padding:20px; 
}
.text p {margin:0px;}
#header {text-align:center}
-->
</style>
</head>
<body>
<div id="header"><img src="<A href='http://layla.sian.net/csstest/header_story.gif">http://layla.sian.net/csstest/header_story.gif"></div>
<div class="border">
  <div class="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
	elit. Morbi sit amet arcu. Mauris suscipit, magna pharetra dapibus malesuada, 
	ligula elit eleifend justo, sed aliquet diam erat eget wisi. Aenean mollis 
	scelerisque ligula. Ut turpis. Nulla bibendum. Duis nulla. Suspendisse suscipit 
	elit eget diam. Vivamus nec libero. Praesent eget magna sed velit faucibus 
	ornare. Nulla vehicula tellus ac arcu. Donec diam enim, nonummy ac, nonummy 
	at, gravida a, lorem. Class aptent taciti sociosqu ad litora torquent per 
	conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis 
	dis parturient montes, nascetur ridiculus mus. Mauris consectetuer tellus 
	vel nisl. Mauris fermentum, felis vestibulum sagittis aliquet, risus tortor 
	imperdiet tellus, eget porta nunc mi sit amet quam. Morbi vitae lacus vitae 
	leo feugiat auctor. Donec laoreet lobortis nisl. Integer rutrum nunc at arcu. 
	Mauris faucibus mi in nunc. Vivamus augue ligula, rhoncus at, vestibulum vitae, 
	condimentum dignissim, leo. Fusce ullamcorper dui non enim. Suspendisse potenti. 
	Curabitur viverra lobortis ligula. Etiam blandit auctor elit. Cras erat ipsum, 
	auctor id, cursus at, aliquet id, augue. Pellentesque habitant morbi tristique 
	senectus et netus et malesuada fames ac turpis egestas. Integer ut justo at 
	wisi volutpat consequat. Mauris sapien diam, malesuada ut, venenatis vitae, 
	tempor ac, urna. Ut porta nulla in turpis. Lorem ipsum dolor sit amet, consectetuer 
	adipiscing elit. Nulla nunc. Etiam rutrum vestibulum diam. Suspendisse potenti. 
	</p></div>
  </div>
</body>
</html>

Of course because you are using a background image as a border you will have to make sure that the content always fits as the border won't expand.

If you intend having variable lengths of text within a border the a better solution would be simply to border the text using border:10px dashed #000;. Then just make the little arrow as a separate image and place it in the correct place to overlay the top right border etc.

In this way the border will stretch around the length of the text and you need only specify the width of the container.

Hope this helps.

Paul

**carrotflowers** · Sep 17, 2003 13:19

I have to admit it, I'm a little confused. I used margin/padding in my css which worked in IE. Do you know why it broke in NS? I mean, I can see that your code above worked, I just can't get my finger on why my margins/padding didn't seem to work in NS. Sorry if I'm a bit thickheaded.

Maybe I just need to buy SP's css book!

I do like your better solution! I wanted to do that, but I don't know how to keep the triangle stay in the upper right hand corner of the border as it expands/contracts. How do I go about that?

**Paul O'B** · Sep 17, 2003 13:50

Hi,

There are slight differences between browsers at the best of times and the best way is to check in the browsers you want to support every time you change or add the CSS. In this way you will find out what works and where the differences lie.

In your example you were using a doctype without uri. This will put the browsers into quirks mode and make it harder to get consistent results. (e.g. ie6 willl use the broken box model etc)

I find it better to use a full doctype and always work in standards mode as shown in my original post.

The other error was that you enclosed your main content text in a span. A span is only to be used for inline content and although you had not used any p tags in your span and therefore theoretically it was ok, the problem arose in that you applied a class to the span which included paddings and margins etc. Padding and margins on inline content is not the same as block level content and the results can vary from browser to browser. Browsers are allowed to ignore top and bottom margins on inline content and will only place left and right padding at the very start of the content and the very end.

What you should have done was enclose the content in a div and give that a class of text. Even so browsers vary in their default margins on elements and you need to make sure that they are tested and if incorrect then explicitly set. (Sometimes Mozilla will inherit the margin of its first child element and you will need to watch out for it and set the margin: to zero.)

You also missed out the #symbol from your background colour which would cause it not to show in Mozilla and you have specified a size in points pt which most users deem to be unreliable for screen viewing. Use px, %, em - (look through other sitepoints thread about this if you want more info on text size.)

To place an element relative to another element the parent element needs to have a position set other than static (default). If you give the outer element a position:relative (you don't need to supply co-ordinates) then you can place the inner element in relation to that outer element. If you place the inner element absolutely at top:0;right:0 it should sit in the top right corner even if the element expands and contracts. This can sometimes be a bit fiddly and you made need to adjust the element using negative margins to pull it out of the div slightly.

The best way to learn is to try it out and see what happens, but remember to check in each browser as you go.

Hope this helps.

Paul

**carrotflowers** · Sep 17, 2003 18:27

Oh, hey changing the span to a div worked like a charm. Thanks for your reply, a really big help. I'm sure you've done a lot of different reading and a lot of your own experimenting. Was there a book or 2 that you thought were insightful and excellent resources for css development? Your replies always make a lot of sense to me so I'd value your recommendation.

Thanks!

**Paul O'B** · Sep 18, 2003 08:11

Hi,

The book I always refer to is the Cascading Style Sheets 2.0 Programmers reference by Eric Meyer.

It's not a tutorial but a reference manual but I find it more useful than all the other books because you can look up properties and see exactly how they work.

You do need a fair understanding of CSS to get the best from it though.

Paul

**carrotflowers** · Sep 18, 2003 08:57

Thanks Paul.

I read a little more of Eric Scmitt's Designing Web Pages With CSS last night, inspired by my lack of knowledge, and he also mentioned that book. I've never seen it in the bookstore, But I'll have to track it down. I took your advice about just adding a dashed border to my div to do what I wanted:
http://dapperdesigns.net/clients/fe/...nal/story.html

Here's the css for the dotted box and text within.

#content {
padding: 3%;
border: 2px dashed #999999;
position: relative;
background-image: url(images/logotrans.gif);
background-repeat: no-repeat;
background-position: center center;
margin-right: auto;
margin-left: auto;
width: 75%;
margin-bottom: 3%;
}

I did also try to get the triangle in the upper right corner. Am I right in thnking that I will only accompish this by using absolute positioning, and/or specifiying a specific width to the #header div in pixels?

I tried moving the triangle around relative to the #header but couldn't get it to the top.

**Paul O'B** · Sep 18, 2003 14:29

Hi,

If you want an image on top of your content but also to move with it, then you can use something like this.

Code:

#content img {
 position:absolute;
 right:0%;
 margin-top:-50px;/* pulls image out of the div*/
}

html

Code:

<div id="content"> 
<img src="k.gif" width=....etc....> 
Lorem ipsum dolor sit amet, consectetuer 
 etc..........

You are placing theimage in the content div which has a position:relative set. This gives you a point of reference to place the image absolutely at the top right corner. You can then use negative margins to pull the image out of the div into the desired position.

When you resize the screen the image will move with the content as required.

I also note that you are still using the partial doctype and that your content is not centred in IE but is centred in Mozilla. You need to out text-align:center to your insidebody id so that you cater for ie5 and ie6 in quirks mode.

Hope that helps.

Paul

**carrotflowers** · Sep 19, 2003 04:13

Thanks again, with your help, I'm pleased to have recreated my graphic with mostly css. http://dapperdesigns.net/clients/fe/...nal/story.html Stil have to get to work to test on a pc. About the uri, thanks for catching that. I've obviously become too reliant on Dreamweaver, which for some reason puts a DTD with no uri on new html documents. Like I used to do, I made myself a basic template to start with. Anyway, thanks again, your explanations have really clarified the div concept as well as relative/absolute.

User Tag List

Thread: Getting text inside my border graphic.

Thread Tools

Display

Getting text inside my border graphic.

Bookmarks

Bookmarks

Posting Permissions