CSS syntax question.

[SpeedCrazy]

Hey guys.

I was wondering, does css have a or if function?

I am building a drop down menu and when i shrink my window too far all the buttons jump all over the page.

I want the menu items to stay in a line without having to scroll sideways(not that i can fix them that way either...)

So i was wondering if i could have them set as something where whichever width was smallest would display.

eg. Currently the buttons are 10em, if i could set them up to be 15% until the window is large enough that 10em is larger than 15%. Im not trying to make a mobile version alongside the full version, just allow for smaller windows.

Any ideas,

Thanks

EDIT: Forget it, % makes the drop down sections tiny. I think it does percent of the mother element.

Edited April 7, 2011 by SpeedCrazy

[d3bruts1d]

% width will inherit from the parent element.

 

Typically most people will have a hard set width for the menu items, and allow the "menu bar" (element containing the menu items) shrink / extend as needed. If you want things to be spaced out evenly, try setting the left/right margin to a %. You could also set a min-width and max-width for the menu items and/or parent element, though this won't be supported in some older browsers.

 

It's ugly, but another trick you can do (depending on the complexity of the menu) would be to simply put the menu inside of a table; though some people will argue that tables should only be used for tabular data.

 

Another solution would be to use JavaScript to modify the style based on the document width when the page is loaded and then again when resized. Though this really should be the last option considered.

[SpeedCrazy]

hmmm. I think for now i will stick to a fixed menu. Maybe play with it later.

[jjjrmy]

Check this out: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

 

I think that's what you're talking about. You can just copy and paste the code, but I'd suggest actually reading it and understanding what it's doing.

[SpeedCrazy]

lol, i built that from scratch over the course of a day and then you show me a tutorial.

anyway that is not what i needed.

 

New question, still css.

How do i make an element stay in exactly the same place no matter what? I am still working on my menu and i appended a search box to the far right end of it but instead of staying there when i shrink the window it drops down below the rest of the menu.

How do i fix the menus position so that no matter how small the window all the menu items will be on the same row?

[flareback]

New question, still css.

How do i make an element stay in exactly the same place no matter what? I am still working on my menu and i appended a search box to the far right end of it but instead of staying there when i shrink the window it drops down below the rest of the menu.

How do i fix the menus position so that no matter how small the window all the menu items will be on the same row?

You should be able to wrap all the menu items in a div and then set a minimum width on the div.

[SpeedCrazy]

That worked, thanks.

 

But now i have another problem.

 

My sidebar insists on hiding behind the menu. I set its height from the top as large as 100em and it still wont move. Oddly enough it doesn't hide in internet explorer, but i still cant move it at all.

By hide i mean that it acts like there is an element in front of it and does not allow the links to be clicked.Fixed

Any way to make my drop down menu independent of the rest of the page? When it drops down the rest of the page is moved down as well.

Edited April 8, 2011 by SpeedCrazy

[flareback]

That worked, thanks.

 

But now i have another problem.

 

My sidebar insists on hiding behind the menu. I set its height from the top as large as 100em and it still wont move. Oddly enough it doesn't hide in internet explorer, but i still cant move it at all.

By hide i mean that it acts like there is an element in front of it and does not allow the links to be clicked.Fixed

Any way to make my drop down menu independent of the rest of the page? When it drops down the rest of the page is moved down as well.

I have this link bookmarked. You can dig through the code and should be able to find what you need.

http://www.cssplay.co.uk/menus/final_drop.html

[d3bruts1d]

lol, i built that from scratch over the course of a day and then you show me a tutorial.

anyway that is not what i needed.

 

New question, still css.

How do i make an element stay in exactly the same place no matter what? I am still working on my menu and i appended a search box to the far right end of it but instead of staying there when i shrink the window it drops down below the rest of the menu.

How do i fix the menus position so that no matter how small the window all the menu items will be on the same row?

"How do i make an element stay in exactly the same place no matter what?" - Position: Absolute along with margin and / or left/right and top/bottom info.

"How do i fix the menus position so that no matter how small the window all the menu items will be on the same row?" - Set a min-width on the menubar.

 

 

That worked, thanks.

 

But now i have another problem.

 

My sidebar insists on hiding behind the menu. I set its height from the top as large as 100em and it still wont move. Oddly enough it doesn't hide in internet explorer, but i still cant move it at all.

By hide i mean that it acts like there is an element in front of it and does not allow the links to be clicked.Fixed

Any way to make my drop down menu independent of the rest of the page? When it drops down the rest of the page is moved down as well.

Any way to make my drop down menu independent of the rest of the page? When it drops down the rest of the page is moved down as well. - Try Z-Index.

[d3bruts1d]

Here is something you can play with / look at that will give you some CSS examples... should validate and work across most browsers.

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryan's example menu</title>
<style type="text/css">
<!--
* {
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
body {
font-family: Verdana, Geneva, sans-serif;
margin: 5px 10px 15px;
padding: 0px;
color:#95bbdf;
font-size:62.5%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:150%;
background-color:#fff;
}
ul li {
margin:0;
padding:0;
}
#navigation {
list-style: none;
margin: 0;
padding: 0 2px 0 0;
}
#navigation li {
float: left;
}
#navigation li a.navitem {
color: #FFF;
display: block;
font: bold 12px Verdana, Geneva, sans-serif;
padding: 0 14px;
text-decoration: none;
}
#navigation li:hover a.navitem, #navigation li:hover a.navitem-dd, #navigation li a.navitem:hover, #navigation li a.navitem-dd:hover, #navigation li.active a.navitem, #navigation li.active a.navitem-dd {
color: #fea201;
background-color:#fff;
border: 1px solid #fea201;
border-bottom: 0;
}
#navigation li a.navitem-dd {
color: #95bbdf;
display: block;
font: bold 12px Verdana, Geneva, sans-serif;
padding: 0 7px 0 14px;
text-decoration: none;
text-shadow: #041933 1px 1px 1px;
}
#navigation li a.navitem-dd span {
display: block;
line-height: 30px;
padding: 0 21px 0 0;
}
#navigation li a span var {
color: #fff;
display: block;
float: left;
font-size: 11px;
font-style: normal;
height: 11px;
line-height: 11px;
margin: 5px 5px 4px -5px;
padding: 4px 0 5px;
text-align: center;
text-shadow: #960 1px 1px 1px;
width: 19px;
}
#navigation .ddmenu {
background: #fff;
border: 1px solid #fea201;
border-top: 0;
float: none;
display: none;
position: absolute;
width: 150px;
z-index: 9999;
}
#navigation li:hover .ddmenu, #navigation li.sfhover .ddmenu {
display: block;
}
#navigation .ddmenu ul, #navigation .ddmenu dl {
list-style: none;
margin: 0;
padding: 5px 0;
}
#navigation .ddmenu ul li, #navigation .ddmenu dl dd {
float: none;
margin: 0;
padding: 0 0 0 3px;
}
#navigation .ddmenu ul li a, #navigation .ddmenu dl dd a {
background: none;
color: #95bbdf;
display: block;
float: none;
font: normal 11px/20px Tahoma, Arial, Sans-Serif;
padding: 0 10px 0 12px;
text-decoration: none;
text-shadow: none;
}
#navigation .ddmenu ul li a:hover, #navigation .ddmenu dl dd a:hover {
color: #fff;
}
#navigation .ddmenu ul li.ddmenu-sep, #navigation .ddmenu dl dd.ddmenu-sep {
border-bottom: 1px solid #2d5d91;
border-top: 1px solid #0b2d5b;
font-size: 0;
height: 0;
line-height: 0;
margin: 5px 0;
}
#header-nav {
height: 30px;
border-bottom: 1px solid #fea201;
}
#header {
height: 120px;
margin-bottom: 5px;
}
#container {
font-size: 120%;
margin: 0 auto;
min-width: 970px;
width: 90%;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="header-nav">
   <ul id="navigation">
     <li id="usercontrols"><a href="#" class="navitem-dd"><span>Controls</span></a>
       <div id="menu-controls" class="ddmenu">
         <ul>
           <li>Rules & Guidelines</li>
           <li>--------------</li>
           <li>View New Topics</li>
           <li>View Active Topics</li>
           <li>--------------</li>
           <li>My Messenger</li>
           <li>My last 10 posts</li>
           <li>My albums</li>
           <li>My friends</li>
           <li>My assistant</li>
           <li>My profile</li>
           <li>--------------</li>
           <li>Search</li>
           <li>Help</li>
           <li>Member List</li>
           <li>Moderator List</li>
           <li>Calendar</li>
           <li>--------------</li>
           <li>Mark all posts as read</li>
           <li>Delete OCC cookies</li>
         </ul>
       </div>
     </li>
     <li id="forumnav"><a href="#" class="navitem-dd"><span>Main</span></a>
       <div id="menu-main" class="ddmenu">
         <ul>
           <li>News</li>
           <li>Reviews</li>
           <li>Guides</li>
           <li>Contests</li>
           <li>--------------</li>
           <li>[email protected]</li>
           <li>[email protected]</li>
           <li>--------------</li>
           <li>Case Gallery</li>
           <li>Add case</li>
           <li>View favorites</li>
           <li>Preferences</li>
           <li>--------------</li>
           <li>OCC Newsletter</li>
           <li>Submit news</li>
         </ul>
       </div>
     </li>
     <li id="mainnav"><a href="#" class="navitem-dd"><span>Forums</span></a>
       <div id="forum-main" class="ddmenu">
         <ul>
           <li>Rules & Guidelines</li>
           <li>--------------</li>
           <li>Site Help</li>
           <li>--------------</li>
           <li>General Discussion</li>
           <li>Introductions</li>
           <li>--------------</li>
           <li>Hardware</li>
           <li>OS: Microsoft</li>
           <li>OS: Other</li>
           <li>Gaming: PC</li>
           <li>Gaming: Consoles </li>
           <li>Benchmarks</li>
           <li>Programming</li>
           <li>Graphics & Design</li>
           <li>--------------</li>
           <li>OCC Market Place</li>
           <li>OCC Teams</li>
           <li>--------------</li>
           <li>Announcements</li>
         </ul>
       </div>
     </li>
     <li id="socialnav"><a href="#" class="navitem-dd"><span>Social</span></a>
       <div id="social-main" class="ddmenu">
         <ul>
           <li>Facebook</li>
           <li>Twitter</li>
           <li>YouTube</li>
           <li>--------------</li>
           <li>Xfire</li>
           <li>Steam Community</li>
           <li>--------------</li>
           <li>Last.fm</li>
           <li>Wakoopa</li>
         </ul>
       </div>
     </li>
     <li id="occnav"><a href="#" class="navitem-dd"><span>About</span></a>
       <div id="about-main" class="ddmenu">
         <ul>
           <li>Staff Contact</li>
           <li>Sponsorship</li>
           <li>Advertising</li>
           <li>--------------</li>
           <li>In the news</li>
           <li>Links & Logos</li>
           <li>--------------</li>
           <li>Privacy statement</li>
         </ul>
       </div>
     </li>
     <li id="rssnav"><a href="#" class="navitem-dd"><span>RSS</span></a>
       <div id="rss-main" class="ddmenu">
         <ul>
           <li>RSS 1</li>
           <li>RSS 2</li>
           <li>RSS 3</li>
         </ul>
       </div>
     </li>
   </ul>
 </div>
 <div id="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut dolor vel ipsum sodales auctor. Cras in varius nunc. Donec quis quam quam. Nunc auctor, mi in aliquet auctor, eros mi molestie lectus, id scelerisque purus dui nec quam. Praesent lorem lacus, porta sed semper sed, elementum vitae dolor. Duis pulvinar consequat eros vel interdum. Quisque lacinia dignissim leo, non vulputate mi accumsan vitae. Duis erat turpis, consequat eget consectetur nec, suscipit at nisi. Praesent ipsum dolor, posuere eget imperdiet sit amet, pharetra in urna. Sed nibh ligula, vestibulum id venenatis lobortis, molestie at nisi. Suspendisse sem eros, rhoncus at vestibulum vel, pellentesque id libero. Praesent malesuada tempor metus, sed gravida augue dictum et. Cras nec diam leo, luctus euismod est.</p>
   <p>Suspendisse a turpis a velit dictum auctor. Quisque et rutrum lectus. Mauris nisl est, vulputate vitae vehicula ac, elementum eu nibh. Cras eget nisl vel urna tempor consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut cursus placerat lorem vitae dictum. Donec molestie sollicitudin dictum. Curabitur mollis augue id dui consectetur aliquet. Proin eleifend, nulla eget lacinia euismod, velit sapien iaculis leo, vel egestas tellus elit quis mi. Aenean venenatis turpis justo. Sed luctus, nunc vitae porttitor aliquam, sapien nisl consequat ante, sit amet placerat dui dui a leo. Curabitur elit massa, auctor id tincidunt at, venenatis vel lectus. Fusce iaculis, nulla nec rhoncus rhoncus, ipsum mi pretium mi, ac tempor est enim in nisl. Etiam dui mi, vulputate ut molestie ac, interdum sit amet eros. Mauris vehicula mattis adipiscing. Pellentesque sed metus augue. Fusce et nibh sapien. Maecenas porta bibendum urna, vitae adipiscing nulla mollis et. Proin pulvinar diam a nisi faucibus semper. Donec varius egestas est at mattis. </p>
   <p>Etiam faucibus, mi quis dignissim aliquam, dui massa suscipit elit, vel laoreet metus dui sit amet dolor. Phasellus vitae elit eget nibh egestas euismod. Nunc imperdiet massa a odio rhoncus sit amet aliquet erat eleifend. Maecenas magna turpis, vestibulum quis vehicula in, sagittis in erat. Aliquam elit mauris, vulputate eget gravida vitae, auctor ac enim. Sed quis mauris ipsum, in consequat nulla. Etiam quis felis massa, id euismod dolor. Proin in sem magna. Sed at enim ac augue dignissim hendrerit. Vivamus id ultrices nisi.</p>
   <p>Aenean et porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed augue odio, consequat sit amet malesuada nec, pretium nec tellus. Donec euismod aliquet nibh, at imperdiet augue fringilla non. Maecenas posuere condimentum sem, quis fringilla neque ultrices non. Vestibulum ultricies aliquet rhoncus. Aenean porta, enim ut rutrum laoreet, ipsum arcu iaculis nunc, non sagittis tellus odio quis elit. In semper venenatis risus, quis luctus ligula auctor vel. Vivamus mauris arcu, dapibus at placerat scelerisque, ullamcorper consectetur neque. Suspendisse tempor mollis purus, nec commodo diam posuere sit amet. Curabitur tempor condimentum dignissim. Duis ornare odio sit amet nisl tempus fermentum. Phasellus scelerisque, lorem sed mollis condimentum, arcu lectus porttitor eros, ut euismod lacus libero at tortor.</p>
   <p>Vestibulum mollis aliquet ligula eget malesuada. Ut interdum, tortor in fermentum vulputate, turpis nibh ultrices ligula, eget molestie sapien justo id massa. Mauris feugiat gravida metus, vitae consequat tellus viverra sed. Ut imperdiet est eget orci sagittis hendrerit. Nam placerat, velit nec sodales porttitor, lacus leo lacinia sapien, eget rutrum quam eros non erat. Aliquam erat volutpat. Aliquam nec nisl lacus, a pharetra lectus. Cras aliquet, erat ut tristique faucibus, leo lacus blandit metus, nec condimentum risus tellus nec dui. Curabitur vel imperdiet sem. Suspendisse potenti. Nunc sed urna felis, quis blandit metus. Nam fermentum volutpat tortor condimentum malesuada. Ut faucibus cursus blandit. Sed ac nisi ac ante vehicula luctus. Nunc eget dolor quis tellus cursus iaculis. Curabitur neque urna, vulputate placerat porttitor iaculis, tempus eu velit. Vestibulum lacus tortor, convallis at ornare non, hendrerit vitae sapien. Aliquam erat volutpat. Suspendisse potenti.</p>
 </div>
</div>
</body>
</html>

[SpeedCrazy]

Thanks D3.