Call card css

[wa9578]

At the moment I have something similar to this on my site but it's done with a picture...

is it possible to create this in css?

at the moment the html/css looks like;

<li><a href="#">Team</a>
<ul id="navteam">
<li><a href="#" class="name">Hannah</a> <a href="#" class="img"><img src="#" alt="Hannah" /></a></li>
<li><a href="#" class="name">Phil</a> <a href="#" class="img"><img src="#" alt="Phil" /></a></li>
<li><a href="#" class="name">Clare</a> <a href="#" class="img"><img src="#" alt="Clare" /></a></li>
<li><a href="#" class="name">Carly</a> <a href="#" class="img"><#" alt="Carly" /></a></li>

</ul>
<!--//navteam--></li>

#sitenav ul#navteam {}

#sitenav #navteam img {display: block;}

#sitenav #navteam a.img {
visibility:hidden; /* hide the image until name is hovered on */
position: absolute;
left: 100%;
top: 0;
background: #eee;
width: 100px;
height: 100px;
}

#sitenav #navteam li:hover a.img { 
visibility: visible; /* shows the hidden image link when name class is hovered on */ 
}

#sitenav ul li {}
#sitenav li a span {
visibility: hidden;
position: absolute;
left: 100%;
color:black;
width: 100px;
background:#FFF;
font-size: 10px;
}
#sitenav li a:hover span {
visibility:visible;
}


#sitenav #affiliates li a span {
left: -100px;
}

Ideally I want it to have the same effect... hover on team, get a drop down list on names, hover on name get their card

I think it can be done but I kinda dunno where to start :s

[edited by: engine at 12:14 pm (utc) on Apr 21, 2011]

[alt131]

Hi wa9578, yes it can be done, and a good place to start is the code and explanations from your previous threads:
multi layer menu with pictures [webmasterworld.com] and
which would be better. span or class=body_con? [webmasterworld.com]

Those threads look like they produced a working menu that does what you've described here (I think), plus lots of explanations so you could understand the css and html and "take control" of it yourself.

So maybe I'm missing something ... can you try to be more specific about the troubles you are still having?

[looter]

#sitenav li a:hover span {
visibility:visible;
}
remove span.

[wa9578]

I understand how to make it appear etc but instead of it being a picture, I'm wondering if it can be done using pure css (with only a link to a headshot for img) rather than creating the whole thing as an img and then linking it in the css/html

With regards to the span thread, I understand how the picture and part of the text will be placed, but with the lines being different colours, and part of it being different positions that's the part I'm not sure how to do.

[alt131]

Hi wa9578, thanks for that! I'm sure what you want is possible - but still trying to understand (so I don't just duplicate the previous threads which won't help at all.)

I understand how to make it appear etc but instead of it being a picture, I'm wondering if it can be done using pure css (with only a link to a headshot for img) rather than creating the whole thing as an img and then linking it in the css/html

I'm certain that explained what you want .. but I'm not sure what you mean by "it" ! ;)

but with the lines being different colours, and part of it being different positions that's the part I'm not sure how to do.

Again, should be possible ... if you can just help me understand what the "it" is. :)

[wa9578]

in the first post I posted picture which kind shows it (with dimensions) a current example is... (apologies if it breaks rules as has contact info on it (why I created the dimension img)

As you can see, at the moment its an image, but what I'm trying to do is cut down work when things change i.e all our numbers, and address have, its easier and quicker to edit html than it is images. so effectively the "it" is the picture I just posted... question... can it be created purely in html/css so different text colours applied (I can do it in html but sure I read on here about its better to do it in the css side of things)

and how would I get the positioning of the text right, I think know how to do the rest, its just them bits if that makes any sense. There will be about 6 different cards but all with the same layout etc.

[edited by: engine at 12:14 pm (utc) on Apr 21, 2011]

[alt131]

Good to be concerned about the rules and implications of posting personal details. One way is to send a sticky (limits the crazies to just the member you stickied ;) ). Now I've seen, click "report message" on the left hand side and ask the mods/admins to delete the link. (I'll do so straight after this post, so if the link is already gone, that's why.)

Definitely possible to code text and an image to look like a hard-copy business card. Also, better for seo to have the business details in text rather than an image. But i'm still confused by the hover effects you talked about. At first I thought you wanted a "fly-out" menu where the names were at the first level, when hovered, you get an image of the person, hover that to get the contact details. Something like:

Ist level--2nd Level --3rd Level
Name
---------Picture
---------------------Details
Name
---------Picture
---------------------Details

But that's different from a business/calling card. My next thought was a fly-out menu as above, but one of those levels is styled to look like a business card. Maybe like this:
Name
---------Picture
---------------------|-----------------|
---------------------|Business Position
---------------------|Telephone
---------------------|etc
---------------------|-----------------|

So not exactly sure. However, following is example code to create a business/calling card. It uses (mis-uses ?) a selection of html elements, but you can see how it is easy to do this: Just a case of setting the right properties.

My preference is a list, but that requires lots of classing to set the different font styles if supporting ie6 (which is the same issue with spans or other generic element.) I thought a better learning exercise by trying some other elements. However if not fully supporting ie6 it is possible to use a list and take advantage of more advanced selectors to avoid the classing. Also note some adjustments to the margins so the information will fit without wrapping.

css

div {
font: 13px/14px verdana, sans-serif;
color:#000;
width: 250px;
height:150px;
padding:10px;
border: 2px solid red;
}

img {
float:left;
margin:0 10px 15px 0;

}
strong, i, b, a, small {
display:block;
}

strong {
font-size:14px;
color:red;
margin-top:10px;
font-weight:normal;
}

i {
font-style:normal;
color: grey;
}

a, small {
font-size:12px;
text-align:center;
}

/*This allows the email to be a usable email link. I would consider styling it so users realise it is a link */
a {
clear:both;
text-decoration:none;
color:black;
}
/*Provide some feedback to the user */
a:hover {
text-decoration:underline;
color:red;
}

HTML (strict)
<div>
<img src="myimage.jpg" width="75" height="75" alt="Name" >
<strong>My Name</strong>
<i>Business Position</i>
<b>Phone: [phone]</b>
<b>Mobile: [phone]</b>
<a href="mailto:myemail&#x40;exanple.com?subject=New Contact" title="Email Name">[e-mail]</a>
<small>Business Physical Street Address </small>
<small>City, Town, Country</small>
</div>

Is this closer to what you are asking about?

[wa9578]

Thats it :) or at least it looks to be (I'm just about to go teach so not had time to look etc, but it's similar to what I'd started making notes on).

Yeah the SEO thing is also an issue atm (but I'm fixig it slowly) as its still hosted on a free hosting site (which have errors in their code). The site also doesn't work in IE6.

As for the thing with the hovers... I'll pm you the link to the site so you can see what I mean. It will be exactly how it looks now... but will obviously be css card rater than image.

Many thanks for our help. I'm hoping its a quiet session and I'll sort it out when I get there :)

[wa9578]

ok I tried and I got everything moved around all over the place lol.

with the css part are there meant to be # at all?
and do I need to keep ul id="nav team" too or should it be removed?

[alt131]

Ok, what is wanted is a multi-line horizontal menu with vertical drop downs that have a horizontal flyout. Previously the flyout was an image, so the goal is to style the flyout so it looks like a "business/calling" card.

@wa9578, use the existing html and css, but modify it as below.
What this does is modufy the example so that instead of using a div as the container for the ""calling card", it uses the existing <a>'s in your menu. That requires adjustments to class names (changed to an id), etc to get adequate specificity to override other rules in your existing css.

The Forum Charter [webmasterworld.com] has a link to the WebmasterWorld CSS Crash course and part two talks about selectors and inheritance. I think that will answer your other questions.

HTML
<div id="sitenav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">Team</a>
<ul id="navteam">
<!-- delete each of the "team" list items
<li><a href="#" class="name">Hannah</a> <a href="#" class="img"><img src="#" alt="Hannah"></a></li>-->
<!-- replace with this html, modified to suit for each of Hannah, Phil, etc. Note the a has a new id -->
<li><a href="#" class="name">The Name</a>
<a href="#"id="card">
<img src="myimage.jpg" width="75" height="75" alt="Name" >
<strong>My Name</strong>
<i>Business Position</i>
<b>Phone: [phone]</b>
<b>Mobile: [phone]</b>
<small>[e-mail]</small>
<small>Business Physical Street Address </small>
<small>City, Town, Country</small>
</a><!--end card-->
</li><!-- end Hannah -->
<!-- replace this adjusted for Phil, as above-->
<li><a href="#" class="name">Phil</a> <a href="#" class="img"><img src="#" alt="Phil"></a></li>
</ul><!--end navteam -->
</li><!-- end team-->
<li><a href="#">Other menu items</a></li>
<li><a href="#">Other menu items</a></li>
</ul> <!--end menu -->

CSS
Use this css instead of the example above
#navteam a#card {
font: 13px/14px verdana, sans-serif;
color:#000;
width: 250px;
height:150px;
padding:10px;
border: 2px solid red;
text-align:left;
background-color:#fff;
/*positioning the fkuout-adjust left/top to suit */
position:absolute;
left:85px;
top:0;
visibility:hidden;
}

#sitenav #navteam li:hover a#card {
visibility:visible;
}

#navteam #card img {
float:left;
margin:0 10px 15px 0;
}

strong, i, b, a, small {
display:block;
}

strong {
margin-top:10px;
font-size:14px;
font-weight:normal;
color:red;
}

i {
font-style:normal;
color: grey;
}

#card small {
font-size:12px;
text-align:center;
clear:left;
}

[wa9578]

Alt tyvm :D it's exactly what I was trying to do (just needed to make it wider) :) it's always the css I get stuck on :s I say css but it could be the html too (partly)

Is there a set rule for the lines?

like <li> starts a list <b> seems to bold <i> italic... but can you create your own <"own"> and then list it in the css as own { style how you want it}

if that makes sense, just trying get my head round it lol. TY for helping me too, means I can actually step away from the cmputer omy holiday rather than wondering why its not working (withmy <"own"> things)

[alt131]

Pleased it has helped, and a quick response so we can all take a break from computers for the holiday ;)

... but can you create your own <"own"> and then list it in the css as own { style how you want it}

You can in xml, but not in HTML ... and unless you really need xml, I wouldn't bother.

In terms of understanding html elements what I suggest is take a look at the html Index of Elements [w3.org] It's a list of the available html elements, and clicking on the element takes you to more information about each one. No need to memorise them all - scan, and keep open and refer to when coding. As you can see, quite a few to choose before you need to start inventing your own :)