CSS -inheritance

Question

I styled my warning image and text like this:

enter image description here

It looks fine but the thing is I dont know how long the text on the right is going to be, so I need to make some inheritance between the text and the warning icon so when the text is longer the warning will move a bit more to the left site. Instead of the text moving under the image.

What I need: Make inheritance between warning image and text, not depending on how long the text is

My CSS:

.warningimg{
    background-image: url("images/warning.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 37px;
    height: 35px;
    margin-top: 56px;
    margin-left: 750px;
    margin-right: 1px;
}                
a .warning{
    color: #d4d4d4;
    height:35px;
    display: inline-block;
    text-align: right;
    float:right;
    margin-top: 30px;
    margin-right: 0px;
    text-decoration:none;
    margin-top: 65px; 
}

My HTML:

<div class="center">
    <div class="warningimg"></div>
    <a href="#"><span class="warning"><span class="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</span></a>
</div>

Live preview can be find on: http://funedit.com/andurit/try5/

Make inheritecne between warning image and text after it to always stay like this, not depend how long the text is — user258459
– user258459, Commented Apr 22, 2014 at 13:18
Don’t play with words like “inheritance”, which is a technical term in CSS, misunderstood by most people and probably not relevant at all here. Instead, explain simply what is wrong with the rendering. — Jukka K. Korpela
– Jukka K. Korpela, Commented Apr 22, 2014 at 13:40

Godinall · Accepted Answer · 2014-04-22 13:45:26Z

1

Instead of inserting a div with image background before warning text, you can use below

.warning:before {  
    content: " ";  
    background: url("images/warning.png");  
    height: 37px;  
    width: 35px;  
}

So that the text will always display before your warning span.

answered Apr 22, 2014 at 13:45

Godinall

2,2901 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zach Saucier Over a year ago

You have to position it :P

Godinall Over a year ago

Yup :) Thank you. That was for the asker to work out lol don't make it so easy for him.

user258459 Over a year ago

You got a thumb up for it man :P anyway dispite the fact i just did it with my own way thanks for your answer. You learn me something new : )

Godinall Over a year ago

@user258459 no problem as long as problem solved and the new solution becomes your possession

AlexPrinceton · Accepted Answer · 2014-04-22 13:50:57Z

1

Your code is very hard. You dont need a <div> for warning icon You must use simple construction. Like this (P.S and also this solve your problem)

HTML

<div class="warning-block"><span class="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</div>

CSS

.warning-block {
    float: right;
    padding: 0 0 0 50px; /*your distance between the icon and underlined text*/
    font-size:14px;
    line-height: 16px; /*line-height must be equall to the height of the icon*/
    background: url(img/icon.png)  no-repeat;
}

answered Apr 22, 2014 at 13:50

AlexPrinceton

1,20310 silver badges12 bronze badges

Collectives™ on Stack Overflow

CSS -inheritance

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related