|
CSS - Css To Make Link Image Larger
I have the following HTML and I am wanting to make the link larger.
Code: <div id="user4"> <div class="moduletable"> <ul class="menu"> <li class="item53"><a href="http://rss.com"><img alt="rss" src="/joomla/images/stories/rss-64x64.png"></a> </ul> </div> </div> I have tried the following CSS: Code:
.moduletable li a{
height:50px;
}
Similar TutorialsI have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options? Option 1 is he http://concrete-creative.com/temp/print/1.html **What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up. Option 1_B is he http://concrete-creative.com/temp/print/1_B.html **The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide. Can someone help me find the happy medium between these 2 solutions so it works the way I want it to? THANKS! Is it possible to make a checkbox larger with CSS or something else? Jeff Ok im not sure if this is possible the way i want to do it however, is it feasible to have a <div> of say 200x200 and and image of say 100x300 inside the division but overlapping the edges where it is too tall? i will attempt to demonstrate Image ??? ??? ??? ??? ??? Div ##### ##### ##### Desired effect Code: ??? #???## #???## #???## ??? So I have a picture gallery/menu thing and I'm TRYING to make the list item actually clickable but I don't know how. It's probably easier to show you so on this page, I want the graphic that says 'click me!' to actually be a working link like you would expect from a menu item. http://www.thespinzone.com/temp/devcss.php Of course you can view the source to see the code but... The relevant css is: Code:
#container {position:relative; width:204px; height:530px; margin:0px auto 0 auto; border:0px solid #aaa;
background-image:url(portmenubg1.jpg) left no-repeat;}
#container ul {width:204px; height:530px; padding:0; margin:0px; list-style-type:none; float:right;}
#container li {float:left;}
#container a.gallery span {position:absolute; width:1px; height:1px; top:1px; left:5px; overflow:hidden;
background:#4C697B;}
container a.slideb, #container a.slideb:visited {background:url(pb.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:34px 0px 24px 42px; text-align:left; cursor:default;}
#container a.slidec, #container a.slidec:visited {background:url(pc.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:20px 2px 22px 4px; text-align:left; cursor:default;}
#container a.slided, #container a.slided:visited {background:url(pd.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 80px; text-align:left; cursor:default;}
#container a.slidee, #container a.slidee:visited {background:url(pe.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 8px; text-align:left; cursor:default;}
#container a.slidef, #container a.slidef:visited {background:url(pf.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 46px; text-align:left; cursor:default;}
#container a.gallery,slideb:hover {height:54px; width:120px;}
#container a.slideb:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidec:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slided:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidee:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidef:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.gallery:hover span {position:absolute; width:300px; height:200px; top:10px; left:204px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #000; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
and the html is: Code: <div id="container"> <ul> <li><a class="gallery slideb" href="#nogo"><span><img src="pb1.jpg" alt="clickme" title="B" /></span></a></li> <li><a class="gallery slidec" href="#nogo"><span><img src="pc2.jpg" alt="clickme" title="C" /></span></a></li> <li><a class="gallery slided" href="#nogo"><span><img src="pd1.jpg" alt="clickme" title="D" /></span></a></li> <li><a class="gallery slidee" href="#nogo"><span><img src="pe1.jpg" alt="clickme" title="E" /></span></a></li> <li><a class="gallery slidef" href="#nogo"><span><img src="pf1.jpg" alt="clickme" title="F" /></span></a></li> </ul> </div> I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? can some tell me why dis code doesn;t work?
Code:
div.fLeft {float:left; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; filter:glow(color=red);}
div.fLeft:active {
color: #000066; filter:glow(color=blue)
}
Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hey gang, I'm trying to make a website for Dad and I'm a little rough with my CSS, and I'm having troubles getting my fonts to show up correctly. I am working in Dreamweaver CS4, and the font looks great, but when I view it in FF/IE/Safari, H1 and H2 look WAY too big. Here is what it looks like in DW (top) and in Firefox (bottom): And here is the CSS: Code:
/* --------------------------------------------------
1.0 RESETS
-------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* --------------------------------------------------
2.0 GLOBAL STYLES
-------------------------------------------------- */
body {
background-color: #636c08;
background-image: url(images/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font: 62.5%/1.4 'Lucida Grande', Verdana, sans-serif;
color: #666;
}
html {
overflow: -moz-scrollbars-vertical;
}
a, a:link {
color: #689E21;
text-decoration:none;
}
a:visited {
color: #687C05;
}
a:hover {
color: #ff6600;
}
h1 {
font: bold 1.3em;
color:#ff6600;
}
h2 {
font: bold 1.25em;
color:#5B6C07;
}
h3 {
font: bold 1.1em;
color:#5B6C07;
}
p{
padding: 0 0 .2em 0;
line-height: 1.3em;
font-weight:normal;
}
/* --------------------------------------------------
3.0 LAYOUT STYLES
-------------------------------------------------- */
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
width: 772px;
margin: 0 auto;
}
#header {
position:realtive;
left:0px;
top:0px;
width:772px;
}
#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-bottom: solid 1px #5B6C07;
}
#content {
width: 772px;
margin: 0 auto;
padding: 0;
background:#FFFFFF;
}
#left {
float: left;
margin: 0;
padding: 16px 7px 0 10px;
width: 221px;
}
#right {
float: right;
margin: 0;
padding: 16px 8px 0px 8px;
width: 517px;
border-left: solid 1px #5B6C07;
}
.left_header {
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
}
.left_content {
text-align: left;
}
#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-top: solid 1px #5B6C07;
text-align: center;
}
#footer {
font: bold 9px Arial, Verdana, sans-serif;
color:#FFF;
text-align:center;
padding: 1px;
}
/* --------------------------------------------------
4.0 NAVIGATION STYLES
-------------------------------------------------- */
#nav {
width: 772px;
background: url("images/navigation-matrix.png") no-repeat;
height:27px;
overflow:hidden;
position: relative;
}
ul#main-nav { background: url(images/navigation-matrix.png) no-repeat 0 0; float: left; width: 775px; height: 27px; margin: 0 0 0; padding: 0; }
ul#main-nav li { display: inline; }
ul#main-nav li a, ul#main-nav li a:visited { float: left; display: inline; height: 27px; line-height: 27px; background: url(images/navigation-matrix.png) no-repeat 0 0; text-indent: -999em; }
ul#main-nav li#home a, ul#main-nav li#home a:visited { background-position: 0 0; width: 148px; }
ul#main-nav li#home a:hover { background-position: 0 -27px; }
ul#main-nav li#home a.active { background-position: 0 -27px; }
ul#main-nav li#home.selected a { background-position: 0 -27px; }
ul#main-nav li#about a, ul#main-nav li#blog a:visited { background-position: -148px 0; width: 125px; }
ul#main-nav li#about a:hover { background-position: -148px -27px; }
ul#main-nav li#about a.active { background-position: -148px -27px; }
ul#main-nav li#about.selected a { background-position: -148px -27px; }
ul#main-nav li#garden a, ul#main-nav li#videos a:visited { background-position: -273px 0; width: 218px; }
ul#main-nav li#garden a:hover { background-position: -273px -27px; }
ul#main-nav li#garden a.active { background-position: -273px -27px; }
ul#main-nav li#garden.selected a { background-position: -273px -27px; }
ul#main-nav li#where a, ul#main-nav li#photos a:visited { background-position: -491px 0; width: 143px; }
ul#main-nav li#where a:hover { background-position: -491px -27px; }
ul#main-nav li#where a.active { background-position: -491px -27px; }
ul#main-nav li#where.selected a { background-position: -491px -27px; }
ul#main-nav li#contact a, ul#main-nav li#tour a:visited { background-position: -634px 0; width: 141px; }
ul#main-nav li#contact a:hover { background-position: -634px -27px; }
ul#main-nav li#contact a.active { background-position: -634px -27px; }
ul#main-nav li#contact.selected a { background-position: -634px -27px; }
ul#main-nav li#home a em{ background-position: -0px 0;}
ul#main-nav li#about a em{ background-position: -148px 0;}
ul#main-nav li#garden a em{ background-position: -273px 0;}
ul#main-nav li#where a em { background-position: -491px 0;}
ul#main-nav li#contact a em { background-position: -634px 0;}
I am reading and trying alot of code i find on the web about this problem but it doesn't work. I've changed and tried different stuff and it all doesn't work, right now i've got this CSS: Code:
/* main nav */
#tabs {
border: medium solid Fuchsia;
position: relative;
height: 100px;
}
#tabs1 {
border: thin solid Lime;
font: 1px Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
line-height: normal;
}
#tabs2 {
float: right;
border: thin solid Red;
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
line-height: normal;
margin-right: 0px;
position: absolute;
bottom: 0;
}
#tabs2 ul {
margin: 0;
padding: 0px 0px 0 0px;
list-style: none;
}
#tabs2 li {
display:inline;
margin:0;
padding:0;
}
#tabs2 a {
float: right;
background: transparent url(mega-bgv14.png) -188px -70px no-repeat;
margin: 0;
display:block;
padding: 10px 0px 0px 0px;
text-decoration: none;
text-align: center;
}
#tabs2 a:hover {
background: transparent url(mega-bgv14.png) -332px -70px no-repeat;
}
and the code on the page is: Code: <div id="tabs">
<div id="tabs1">
<div id="tabs2">
<ul>
<li><a href="<?php echo"http://$site_url";?>/"><span>Home</span></a></li>
<li><a href="<?php echo"http://$site_url";?>/category.php"><span>Categories</span></a></li>
</ul>
</div>
</div>
</div>
IE8 places the tabs2 div at the bottom of the container (tabs) but on the right, outside of the container. FF does place the tabs2 div inside the container and on the bottom, but aligns it to the left... someone has any input on how i can change it to get it how i want it? Code: #navbar {
text-align:right;
background-image: url('images/menu.gif');
background-repeat: repeat;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16;
height:26px;
padding-top: 5px;
line-height:0px;
}
i took out the font-size of the classes used over it but still a no go. look here to see it. I am working on this template: http://www.oswd.org/design/preview/id/2790 & I need both the white & green content boxes to stretch as I add content. I don't know if this is even possible but would like to know if there is an easier way than having to create another (more stretched) image. Also as the content will be changing frequently I don't want to have to change from one image to another if I can help it. Appreciate any help you can give. If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS. I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute. It must be so simple, but I'm waaay too stressed to get this to work. :[ I would like to learn how to make an Image Opt in Box / Form. Similar to a search box, but with a nice image I design in Photoshop. I would like to edit the text fields in the image. Name Telephone Can someone help? I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar. i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript? here's my page: http://www.myspace.com/marx0i0 and here are some examples of what im trying to do: http://bonrouge.com/test/fixed.htm http://www.howtocreate.co.uk/fixedPosition.html finally, here is my code: <embed allowScriptAccess="never" allowNetworking="internal" SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent"> thanks very much for any help! Even when I zoom out to the least point, I want my background image in my webpage to stay normal size. How do I do this? I have a gradient background image that goes from dark to light. At the bottom of the table if the body of text grows too large the table will stretch past the length of the background gradient image exposing the bgcolor for the page (not acceptable). If I change the bgcolor of the table the color is applied over the background image. Isn't there a way to fix this with CSS? Thanks for any help!!! I'm trying to style all images that have link around them - to have no border nor background. I'm using the following but no luck: PHP Code: a:link img, a:visited img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } a:hover img, a:active img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } OK I am pretty new to CSS. I am working with my first CSS layout... I am trying to make some images on a page, links. However the problem I am running into is that the images are getting a link border around them, which I do not want. Is there any way to specify this not to happen for images? Any input is greatly appreciated! ~Una Just wondering if there was any way to have a background-image as a link? The reason why: I have a banner across the top of a site, and I'm sure I can probably lay it out using Divs, but I had made the banner a background anyways because I have a horiz. nav. menu that needed to go across the bottom of the banner on the left side. Essentially, there's a logo at the top left, nav. menu on the bottom left, and an image on the entire right side. But now I realized that I should make the logo a link back to the main page of the site. So can I make a background-image as a link, or do I need to pull it out and make it a regular image? Thanks. |
|||||||