CODEWITHSUNDEEP
htmlcss
chaitanya90
chaitanya90

Reputation: 707

CSS: how to keep my text fixed wrt to window size?

My problem is that I want my text not to move when I resize the window as it happens with the image.

I tried using a <div> container with a left attribute among other things however I am unable to achieve the result I'm looking for.

I have the following CSS:

body {
    background-color: #204f6e;
    background-image: asset-url('beige_paper.png');
    background-position: top left;
    background-repeat: repeat;
}
#div1 {
    visibility:show;
    left: 606px;
    top: 59px;
    z-index:200;
}
.image1 {
    height: 9.65em;
}
#div2 {
    visibility:show;
    left: 187px;
    top: 218px;
    z-index:200;
}
#div3 {
    visibility:show;
    left: 185px;
    top: 305px;
    right: 200px;
    z-index:200;
}
#div4 {
    visibility:show;
    left: 215px;
    top: 390px;
    right: 200px;
    z-index:200;
}

and I have the following HTML:

<div id="div1">
    <%=i mage_tag( "logo.png", :class=>"image1") %>
</div>

<br />

<div class="contents" id="div2">
     <h1>
         <p>
             <span style="color: #008080;">
                 <strong>
                     <span style="font-size: 60px;">Some text</span>
                 </strong>
             </span>
         </p>
     </h1>
</div>

<div class="contents" id="div3">
    <p> 
        <span style="font-size: 11px; color: #808080;">
            <span style="font-size: 30px;">
                Some text
            </span>
            <br />
        </span>
    </p>
</div>

<div class="contents" id="div4">
    <p> 
        <span style="font-size: 24px; color: #808080;">
            Some text
        </span>
    </p>
</div>

Here is the JSfiddle

Upvotes: 0

Views: 2194

Answers (2)

Szandor
Szandor

Reputation: 403

The question isn't very clear, but there are a few ways to go.

Static widths

You could use a static width for an element. For instance:

html { width: 1200px; }

will make your entire page always be 1200px wide. Substitute html for any element, ID or class you want.

Nowrap

If you want a block element to not do text wrapping at all, you can use white-space:

h1 { white-space: nowrap; }

The example above would make all level 1 headings print on one line, no matter how wide they are.

Also...

...not really related to the question, but your HTML is all messed up and makes it harder for you. There is no reason to nest the <span> tags the way you do, for instance, and a <p> should never be nested inside an <h1> tag. And why use <strong> there? An extra strong heading? You will find that keeping your HTML neat and clean will help a great deal when writing your CSS.

Upvotes: 2

Derek
Derek

Reputation: 3435

Use white-space: nowrap; on the element for which you don't want the text to wrap.

Upvotes: 0

Related Questions