I am working on a theme and want to minimise the span's and div's being used for legibility's sake and am wondering - is it possible to add two images to the left and right of a div using only sub classes of the container?

ie:

.container {
width: 500px;
position: absolute;
}

.container .left {
float: left;
background: #000 url(myimage.png) no-repeat center top;
width: 50px;
}

.container .right {
float: right;
background: #000 url(myimage.png) no-repeat center top;
width: 50px;
}

Any comments or ideas as to what I can do to get this working ?

Regards,

mm

3 answers

0
points
This was chosen as the best answer

Do you want these images to be background images or just images?

If you want them to just be images use this code.

CSS:

.container { width: 500px; top:50px; left:50px; position: absolute; }

.left { float: left;}

.right { float: right;}

Obviously, you can position the .container div where ever you want.

HTML:

<div class="container">
<img src="left.jpg" class="left" />
<img src="right.jpg" class="right" />
</div><!-- container -->

That will take care of it. If you want the images to be background images then it has to be done a little differently. Let me know if you need them to be backgrounds.

Answered about 9 years ago by David Leininger
  • I guess I can add padding and/or margins to the left and right classes to add a little space too ? I would prefer to try and do it without the added img tags though if thats feasible ? mmuller about 9 years ago
  • Yes, give me a second and I'll set up it up without image tags. David Leininger about 9 years ago
0
points

Ok try this.

CSS:

#container { 
    width: 500px; 
    top:50px; 
    left:50px; 
    position: absolute; 
}

.left { 
    background:url(left.jpg) no-repeat; 
    float:left;
    top:0px; 
    left:0px; 
    width:50px; 
    height:50px; 
    z-index:1;
}

.right { 
    background:url(right.jpg) no-repeat; 
    float:right;
    top:0px; 
    left:0px; 
    width:50px; 
    height:50px; 
    z-index:1;
}
.content {
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
}

HTML:

<div id="container">
<div class="left"> <br /></div>
<div class="right"> <br /></div>
<div class="content"><p>Put your content in here.</div>
</div><!-- container -->
Answered about 9 years ago by David Leininger
0
points

David,

Thanks for the answers - I had already tried the original post and it works well enough - the second example although pure css - doesn't really cut down on the div/span count so I'll probably end up using the OP example, see below:

HTML:


<div class="body"><img class="left" src="mypng.png" />Welcome to our website<img class="right" src="mypng.png" /></div>

CSS:


.body { 
padding-top: 30px;
height: 100%; 
background-color: #F00;
}

img {
width: 50px;
height: 100px;
background-color: #000;
}

.left {
position: relative;
float: left;
left: -50px;
margin-right: 10px;
}

.right { 
position: relative;
right: -50px;
float: right;
margin-left: 10px;
}

:)

Answered about 9 years ago by mmuller