CODEWITHSUNDEEP
htmlcss
Magdi Gamal
Magdi Gamal

Reputation: 678

An alternative for div inside anchor tag other than span?

I have a banner button, 600px width and 200px height. Half of that would be a plain background with text in the middle and the other half would be an image:

HTML:

<li class="banner">
    <a>
        <p>Lorem ipsum</p>
        <div class="image"></div>
    </a>
</li>

CSS:

li a {
    display: block;
    width: 600px;
}

li p {
    background: #268388;
    width: 300px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    float: left;
}

li .image {
    background: url(image.jpg) no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
}

The div inside anchor messes things up. Replacing the div with a span makes unwanted margins with other elements/spans that I also added.

What do I do? Any other alternative for that div (other than adding the image directly in the HTML)?

Upvotes: 1

Views: 14191

Answers (6)

Martin Turjak
Martin Turjak

Reputation: 21234

You can alternatively use a pseudo element like :after ... that doesn't add an unnecessary empty tag to the markup:

li a {
    position: relative;
    display: block;
    width: 600px;
}
li p, li a:after {
    width: 300px;
    height: 200px;   
}
li p {
    float: left;
    background: #268388;
    margin: 0;
    text-align: center;
    line-height: 200px;
}
li a:after {
    content:'';
    position: absolute;
    right: 0;
    background: url(http://placehold.it/600x400) no-repeat;
    background-size: cover;
}

I combined the overlapping rules, to make it a bit more dry.

DEMO

Upvotes: 3

insertusernamehere
insertusernamehere

Reputation: 23610

You need to float the <div> element as well:

a {
    display: block;
    width: 600px;
}

a > p {
    float: left;
    background: #268388;
    width: 300px;
    height: 200px;
    margin: 0; /* new */
    text-align: center;
    line-height: 200px;
}

a > div {
    float: right; /* new */
    background: url(http://placehold.it/300x200) no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
}

Demo

Try before buy

Alternative

HTML

<a>
    <p>Lorem ipsum</p>
</a>

CSS

a {
    display: block;
    width: 600px;
    background: url(http://placehold.it/300x200) no-repeat 300px 0;
    /* alternatively as suggested by Martin Turjak */
    background: #268388 url(http://placehold.it/600x400) no-repeat top right;
    background-size: auto 100%;
}

a > p {
    background: #268388;
    width: 300px;
    height: 200px;
    margin: 0;
    text-align: center;
    line-height: 200px;
}

Demo

Try before buy

Upvotes: 1

Andrea Ligios
Andrea Ligios

Reputation: 50281

Add margin: 0; to your <p> element:

Running demo

Code

ul {
    list-style-type : none;
}

li a {
    display : inline-block;
      width : 600px;
}

li p {
   line-height : 200px;        
    background : #268388;
    text-align : center;        
        height : 200px;
        margin : 0px;      /* This one */ 
         float : left;        
         width : 300px;            

}

li .image {
    background : silver;
        height : 200px;
         float : left;        
         width : 300px;       
}

Upvotes: 0

Ghost Echo
Ghost Echo

Reputation: 2067

I wouldn't put a <div> inside of an <a>. For older browsers <a> elements should only have inline elements, a <div> is a block element. See Wrap link <a> around <div>
I would redo the HTML and pad the <a> to stretch out to cover the entire containing<div>. Float the new <div> and it's contained elements. Something like:

HTML

<li class="banner">
<div id="newDiv">
    <p>Lorem ipsum</p>
    <div class="image"></div>
    <a></a> 
</div>
</li>

CSS 

.newDiv a {display:block;width:x;height:x;padding:x;}

Upvotes: 1

Andrew
Andrew

Reputation: 1989

There is very little difference between a span and a div, by default div is display: block and span is display: inline. I would try changing them to span and adding the following css

a span.image { display: inline-block; margin: 0px; padding: 0px; }

Upvotes: 0

CoursesWeb
CoursesWeb

Reputation: 4247

Try with: <strong> or <em> tags.

Upvotes: 0

Related Questions