|
CSS - Div + Larger Image
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: ??? #???## #???## #???## ??? Similar TutorialsI 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;
}
I 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! 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;}
Is it possible to make a checkbox larger with CSS or something else? Jeff 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. Trying to delete my post but no option to delete so just removing content. 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(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. |
|||||||