• Locked
2 replies [Last post]
Fri, 2017-01-13 15:12
crudpuppy
crudpuppy's picture
Offline
newbie
Last seen: 6 years 19 weeks ago
Joined: 2017-01-13
Posts: 2
Points: 3

I'm not an expert user of CSS. I started writing HTML before CSS came in, and I tend to dodge it when I can.

However, I do use quite a few standard CSS constructs, including various size boxes defined in CSS:

.plate60 {
width:60;
border: 3px solid gray;
padding: 5px;
font-weight: bold;
font-size: 200%;
text-align:center;
}
 
.plate120 {
width:120;
border: 3px solid gray;
padding: 5px;
font-weight: bold;
font-size: 150%;
text-align:center;
}
.plate140 {
width:140;
border: 3px solid gray;
padding: 5px;
font-weight: bold;
font-size: 150%;
text-align:center;
}

And I've been using them thus, matching the size of the box to the size of the text:

<div class=plate60>999</div>
 
<div class=plate120>PITCH</div>

It would be more convenient if there was some mechanism whereby the box size matched itself to the text size. I was able to do that by defining a large margin, but it screwed up the margin for the rest of the page.

Is there a way out here?

Top
Tags:
Sat, 2017-01-14 23:13
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Have you tried...

{display: table;} or {display: inline-block;}?

Each causes the container to shrink-wrap its content.

Before doing that, let's consider practices, good and evil. Naming your class or id tokens for their appearance or presentation is an evil practice. Since I don't know what the page/site is about, I must guess. Let's call your plate(x) containers, .plate. Assuming they are not a list of some sort or grouped all together spatially, etc., each container needs only a class token of "plate".

<div class="plate foo">999</div>
 
<div class="plate bar">PITCH</div>
<!-- Don't forget that attribute values need to be quoted -->

Now for the css:
/* assuming from your html markup you 
   want the containers to be block */
 
.plate {
    border: 3px solid gray;
    display: table;
    margin: 0 auto;
    padding: 5px;
    font-weight: bold;}
 
/* I don't know why/context for font sizes, so … */
 
.foo {
    font-size: 150%;}
 
.bar {
    font-size: 200%;}

With more on the document structure, we can better declare tokens and style rules.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Mon, 2017-01-16 00:10
#2
crudpuppy
crudpuppy's picture
Offline
newbie
Last seen: 6 years 19 weeks ago
Joined: 2017-01-13
Posts: 2
Points: 3

Configuring the size of a box to fit the content

Thanks, Gary. I'm grateful for the hint. I'll try that.

As to style, I would be ashamed to have the style of these pages examined in any great detail. They are sure to be as non-standard as it is possible to be. It would probably take me months to clean up the html and css!

The pages are those of the ezine Mythaxis.

The magazine has been in existence since 2008, but each issue is generated from a pattern file and script file by a C program I wrote in 1999 for an entirely different purpose.

So far, I have kept it all cross-browser and even small-screen compatible, and have occasionally had to go back over a few issues to retrofit an improvement.

I tinker with it as little as possible, but one of my contributors wanted these boxed texts, so I had to try!

Top
  • Locked