Content Box Issue

T

Tom59593

New Member
Hey guys,

Back with another minor question of curiosity. I have a content box that I would like to code, but I don't know how to code it using CSS and (X)HTML.

Below is a screenshot of what I want to code:
tuneinbox.jpg


The problem is having the Winamp, WMP, and RealPlayer logos centered between the two text links that they correspond to. If I had a seperate logo for each text link, it wouldn't be so bad. However, Since only one image should fill the space of two lines of text, I imagine that I would need to do something with tables, right?

If you guys have any ideas, let me know.

THANKS!!!

-Tom-
 
PixelPusher

PixelPusher

Super Moderator
Staff member
No tables! lol, this would not be a table application. I would make one div to hold the entire window, one div for the image of the three logos and then a list for the six links. Use AP (absolute postioning) for the internals (logos and links)

Gimme sec i will whoop something up.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I dont have your image but this is a basic idea. You will need to adjust the "top" and "left" value for each to align how you want.

HTML
HTML: 
<div id="linkbox">
   <h3>tune in...</h3>
   <div id="logos">product logos</div>
   <ul id="links>
       <li><a href="#">winamp hi</a></li>
       <li><a href="#">winamp lo</a></li>
       <li><a href="#">windows media player hi</a></li>
       <li><a href="#">windows media player lo</a></li>
       <li><a href="#">real player hi</a></li>
       <li><a href="#">real player lo</a></li>
   </ul>
</div>

CSS
Code: 
div#linkbox {
position:relative;
width:300px;
height:200px;
background-color:#000;
padding:0;
margin:0;
border:8px #333 solid;
}
div#linkbox h3 {
position:absolute;
top:10px;
left:10px;
font:normal 11pt Arial, sans-serif;
color:purple;
text-transform:uppercase;
margin:0;
padding:0;
}
div#logos {
position:absolute;
top:80px;
left:10px;
background:url(pathToLogoImage.png) center no-repeat;
width:30px;
height:100px;
text-indent:-3000px;   /*  THESE TWO HIDE THE TEXT, SO NOT AN EMPTY TAG */
overflow:hidden;
}
ul#links {
position:absolute;
top:80px;
left:40px;
margin:0;
padding:0;
}
ul#links li {
list-style-type:none;
padding:2px 0;
margin:0;
}
ul#links a:link, ul#links a:visited {
font:normal 9pt Arial, sans-serif;
color:#fff;
text-align:left;
text-decoration:none;
text-transform:capitalize;
}
ul#links a:hover, ul#links a:focus {
outline:0;
text-decoration:underline;
}
 
T

Tom59593

New Member
Hey there,

I completely agree! NO TABLES!!!

I have never used absolute positioning, and since I want the overall div (the dark gray box) to change it's height with the content, what would I do for this code?

A simple, quick top of the head example is all I need, I'm sure I could figure it out from there.

THANKS!!!

-Tom-
 
You must log in or register to reply here.
Top