|
CSS - Make Checkboxes Larger?
Is it possible to make a checkbox larger with CSS or something else?
Jeff 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;
}
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: ??? #???## #???## #???## ??? 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;}
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 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? 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! Hi, I want to change the appearance of my checkbox better than having a background AROUND the checkbox. Is this possible? CSS at the moment is: Code: INPUT.rememberme {
border: 1px solid #D0D0D0;
background-color: #f1f1f1;
}
I believe this is something that can be remedied with CSS. Is it possible to change the size of the checkbox of an HTML form? I did a web search and didn't find anything. I'm trying to figure out why the th checkbox is centered and the table body checkboxes are not. http://jsfiddle.net/Ytx9D/4/ Does anyone know how to assure that checkboxes and their labels stay together? My situtation: I have several rows, each with several checkboxes. I want to assure that if a line wraps, each checkbox stays with its label (either each stay on the same line, or each move to the next, but never leave checkbox on one line and label on the next). I have tried several varients on: <span style= "whitespace: nowrap;". .... checkbox and label description... </span> or <label style= "whitespace: nowrap;". .... checkbox and label description... </label> even used both... have also tried a non-breaking space between label and checkbox control. <span> works on mac with Netscape, IE, Opera or Safari ... but alas it does not work on windows with IE 5.5 [unfortunately it acts as if 'nowrap' applies to the whole line, forcing viewers to scroll right to see all options] I can find documentation that says "white-space" can apply to <span> or <label>, and also documentation that says it can't. I guess the latter could explain the problem. But does anyone know how to keep the label and checkbox together thanx im having problem with checkboxes, they line up correctly, how to fix this Code:
CSS CODE
label
{
width: 250px;
float: left;
}
input
{
float: left;
width:200px;
}
HTML CODE
<label>text1</label> <input type="text"><br>
<label>text2</label> <input type="text"><br>
<label>checkboxes here</label> box1 <input type="checkbox"><br>
box2 <input type="checkbox"><br>
box3 <input type="checkbox"><br>
Hello there, I Have a radiobutton with a label beside it. It only isn't aligned that nicely. The radiobutton it self is a few pixels heigher then the label it self. Now i have partitialy fixed this by using float: left on the radiobutton(s) itself. But it doesn't work in all browsers. Is there some kind of standard way to fix this? Thx in advance. Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. <style type="text/css"> select{width:75px} option{width:150px} </style> I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done. Hi everybody, my site is becoming more and more what i wanted it to be. I thought making it printerfriendly would have been easy, but i encounter some strange problems. http://users.pandora.be/jef_patat/index.htm First of all: there is a big box at the top of the page, it is there for some reason because all browsers i tested it with show the box. I made the body background color yellow for better visualization. Second: if i try to print it out with netscape or firefox the both leave some text in the area between two pages, so when the print some text is missing. I hope a solution can be found, many thanks, Jef Patat Hi, I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page. I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others). Any ideas? W. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. |
|||||||