|
CSS - Using Css3 To Make Dropdowns With Dynamic Widths
So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa.
For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu Similar TutorialsIf I have the following: <span id="span1"></span> <span id="span2"></span> If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable. For example in simple terms. span1.width = 150px; alert(span2); would show 150px also. Hope that make sense. Thanks I'm having a problem with my top Navigation. The top left has a search box, with a fixed width, but the other boxes across the top need to be dynamic width. Anyone have any suggestions on a good way to do this? I assumed I could set the boxes to a % width, and the % would be based on the container div, but this doesn't appear to be the case. Below is the skeleton of my code. I also have a problem with the main div. I cannot get it to float left of the side navigation bar when I put a sufficient amount of text in it. Thanks for the time to help me out! Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style TYPE="text/css">
#header {
color: #fff;
background-color: #000;
}
#topNav {
width: 100%;
min-width: 750px;
margin: 10px 0px;
padding: 0;
border: 1px solid #0f0;
}
#topNav:after {
content:".";
display:block;
clear:left;
height:0;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html #topNav {height: 1%;}
/* End hide from IE-mac */
/* Search Box */
#searchBox {
float: left;
padding: 0;
margin: 0;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav, #nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
float: left;
margin-left: 8px;
padding: 0;
width: 18%;
height: 125px;
border: 1px solid #000;
background: #235;
color: #FFF;
}
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
border: 1px solid #0f0;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
/* Main Content Container */
#main {
float: left;
padding: 10px;
border: 1px solid #000;
background: #fff;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
Top Header Area
</div>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Fixed Size Search Box
</div>
<ul id="nav">
<li >Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
</ul>
</div>
<div id="sideNav">
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
</div>
<div id="main">
Main Content Area<br /><br />
Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at
risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla,
rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris,
imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget
scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis
tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
</div>
<div id="footer">
Footer
</div>
</body>
</html>
I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
What is the Difference between CSS2 and CSS3 ??? Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. This is driving me nuts! I have done everything I think that they says I should do but it is not working...here is the table style I am using if I use normal border styles it works ok...please can someone tell me where I am going wrong...thank you! .nik { background-color: #FFEAA1; padding-left: 1em; padding-right: 1em; border-image: url(border.png) 0% 30% 0% 30% repeat; } oh and the image size is 100px x 100px Kriss I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
I'm currently having a problem getting the opacity to work. I haven't tried using RGBa yet, but it should work the same as HSLa, and right now HSLa isn't working properly. Usually when I've had a problem, it's just a matter of moving the file around in my finder(I use a Macbook) or I've missed a semi-colon or quotation mark or something.....but with this, I swear I've checked, double-checked, triple-checked everything and it's not working. And I've checked it in Safari, Chrome, and Firefox. Right now I have the Alpha element in the HSLa set to .25, which means it should be quite transparent...but all it does is make the color lighter, not transparent. If I could somehow send someone my files/images and screenshots for you to try and help, that'd be great. Otherwise I'm not sure how to go about getting help. Thanks! So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html I'm trying to create my first dropdown using suckerfish. anyone have an idea why this will only extend about half way across the page before splitting my main categories into two columns? i want it all on one line..any help is appreciated. thanks! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
text-align: center;
padding: 0;
margin: 2em;
}
#container {
width: 36em;
background: #F4ECD9;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 36em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
</style>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">GARAGE DOORS</a></li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
</ul>
</li>
</ul>
</body>
</html>
I have seen this problem before but I have no idea how to fix it. My CSS dropdown menus are falling behind a javascript slideshow. I managed to tweek the zindex for a submenu that now shows above the slideshow but for the life of me I can't get the main menu to do the same. Its killing me. I would be happy to provide you with any code you might need to determine the problem but want to put it all here until asked as it might be quite extensive. If you need to see it, let me know. The site I am working on is alumniunit dott com Thanks, Bruce Look fine in FF3 and Chrome, nothing shows in IE8. I likely screwed it up, there is a separate CSS for IE but I can't see what is missing. Thank you for your help, if you can spare it. www.tulsahope.com I'm not finding a topic which addresses this .. or at least one that I comprehend. I've just begun working with CSS, converting our website from one riddled with tables and frames. The new main page has a set of images at top (which finally don't have borders around them in any testing browser), and a set of dropdowns - which all browsers can see except AOL's. Our AOL user reports he is on 9.0 Optimized. (how kosher is it here to post the contents of an entire set of files..?) Pertinent Components: - CSS: http://www.legendsofkarinth.com/lok_cssindex.css - HTML: http://www.legendsofkarinth.com/smallership7a.html Problem Summary: - all browsers are seeing the rollover buttons performing properly but only after backing down from DOCTYPE STRICT to TRANSITIONAL and reinstalling BORDER="0" on all images with links; - all but AOL see the four dropdowns parading across the bottom (again, no links). As an aside, we had to back down from DOCTYPE STRICT to TRANSITIONAL in order for the images to line up in any browser.. I could use some advice there as well. Other than that, the page validates in STRICT but the images have a black line through the midpoint horizontal. For some reason beyond me, my site displays perfectly in firefox, and opera. the width of the wrap which is supposed to be 1068 (I think off memory..) and in browsers such as chrome, ie8, and safari the wrap takes up the entire length of the screenn instead of that 1068. I tried zooming out to see if it was that issue and its not. My code is valid html/css and its not just some IE bug. Any help would be appreciated. www.devwebsites.com Thanks. |
|||||||