Search the Community
Showing results for tags 'vertical'.
Found 4 results
-
Hi everyone! I am trying to vertically center divs inside another div, using: position: relative;vertical-align: middle; But it's not working! Does anyone know why? On this page: http://www.jasonwangart.com/p/about-web.html , I am trying to make the dividers - the vertical black lines - be vertically centered within the parent div. You can see my code here: <!doctype html> <style> .jw-1-about-centre-align { width: 300%; border: 0px solid red; font-size: 16px; background-color: rgba(255,255,255,0.0); text-align: center; } .jw-2-about-pad { vertical-align: top; display: inline-block; min-width: 60px; padding: 0px 0px 0px 0px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; margin: 0px auto 0px auto; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column { vertical-align: top; display: inline-block; border: 0px solid orange; width: 300px; height: 100%; margin: 10px 15px 10px 15px; } .jw-3-about-divider { display: inline-block; border: 0px solid green; width: 1px; height: 300px; margin: 0px 0px 0px 0px; background-color: rgba(0,0,0,0.5); position: relative; vertical-align: middle; } .jw-4-about-text-header { width: 100%; border: 0px solid green; margin: 20px auto 20px auto; font-size: 1.2em; font-weight: bold; font-style: italic; } .jw-4-about-text-body { width: 100%; border: 0px solid yellow; margin: 20px auto 20px auto; }</style> <div class="jw-1-about-centre-align"> <div class="jw-2-about-pad"> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> About me: </div> <!-- JUST SOME CODE FOR THE TEXT - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Contact me:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Email updates:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> </div> </div> </!doctype> -
I'm trying to create a dropdown menu effect here http://cbd-alpha.com/ideal/But I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS: #mainNav { margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li { float: left; padding-left: 21px;}#mainNav li:first-child { padding-left: 80px; background: none;}#mainNav a { text-decoration: none; padding: 0px 10px; font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif; color: #FFF;}#mainNav ul ul { display: none;}#mainNav ul ul li { padding-left: 0 !important; z-index: 999 !important;}#mainNav ul ul ul { }#mainNav ul ul a { }#mainNav li:hover > a,#mainNav ul ul :hover > a { color: #afc2d1;}#mainNav ul ul a:hover { }#mainNav ul li:hover > ul { display: block;} And here's the css of a similar menu: #mainNav { margin: 0 auto; position: relative; width: 1000px; z-index: 101; } #mainNav ul { border-left: 1px solid #CCCCCC; border-right: 1px solid #FFFFFF; float: left; height: 37px; list-style: none outside none; margin: 0 auto; padding-left: 0; position: relative; z-index: 100; } #mainNav li { border-left: 1px solid #FFFFFF; border-right: 1px solid #CCCCCC; float: left; position: relative; } #mainNav a { color: #8D8C8C; display: block; font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif; height: 37px; padding: 0 11px; text-decoration: none; text-transform: uppercase; } #mainNav ul ul { border: medium none; display: none; float: left; left: 0; position: absolute; top: 38px; width: 260px; z-index: 99; } #mainNav ul ul li { background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent; border: medium none !important; float: none; padding: 0 !important; } #mainNav ul ul ul { left: 100%; top: 0; } #mainNav ul ul a { background-image: none !important; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; font-weight: normal; height: auto; line-height: normal; overflow: hidden; padding: 10px !important; position: relative; text-transform: capitalize; width: 240px; z-index: 99; } #mainNav li:hover { color: #6A99C8; } #mainNav li:hover { background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent; } #mainNav li:hover li { color: #FFFFFF; } #mainNav ul ul li:hover a { background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important; } #mainNav ul li:hover > ul { display: block; } How do I stack them vertically?
-
I'm a complete newbie... I knew HTML1 years back, just trying to learn HTML5/CSS and well, making progress but slowly. Trying to do a small portfolio site for myself (art/photos/design) and have a pretty good chunk of the site done now, except having a 'few' issues with a vertical menu. Tried searching for it online for an hour, and everything is way too fancy for what I am after, or the subs are flyouts. I finally found something close, but jquery. Just wondered if anyone could point me to a cut/paste, download, or tutorial on how to do a menu like the one in the below link, however, right justified. I know, most are probably going to ask 'why right justified'... simply put, it matches the design/layout of my site. Wasn't sure to post this here or jquery, the below is jquery but really just want a working menu at this time that expands and stays open. What I have now is all double spaced, just have a list... which is fine for main menu items but I want the sub menus to be single spaced and no bullets/numbers. Basically, when on the Portfolio section of the site, I want the menu to appear, stay on the left throughout the pages, and when I click DESIGN, it expands, lists projects, I can click the project which takes me to that page but the menu stays open until I leave that section type deal. Can anyone point me into the right direction? Way behind on this project and running out of hair to pull. Link:http://www.stunichol...nutree.html#url ThanksHere is a layout of the site saved as a JPG for reference, menu on the left
-
I would like to use PHP to put a vertical space on a web page. echo "<br \><br \><br \><br \>"; works fine on FireFox but probably breaks several rules in relation to strict xhtml and may not work as well on other browsers. Is there are more standard/correct/robust way of doing this? Thanks,Peter.
