departedmind
-
Posts
51 -
Joined
-
Last visited
Never
Everything posted by departedmind
-
Well you can do it like this too.. <style type="text/css"> #main { width:auto; height:30px; } .first-bar { width:20px; height:30px; background-color:#00FFCC; float:left; display:inline; margin-right:20px;} .bars { height:100%; width:2px; background-color:#006600; float:left; display:inline; margin-right:2px;} </style> <div id="main"> <div class="first-bar"></div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> <div class="bars"> </div> </div>
-
Write those styles in your css class (linky) and apply this class while you echo through PHP on <a> tag.
-
Where do you want the border ? #navigation { float: left; text-align: center; width: 15%; height: 90%; font-weight: normal; border:1px solid black; } #navigation li { border:1px solid blue;} #navigation li a { border:1px solid red;} Paste this in your style and see the different borders.
-
Float sidebar div, and prevent stuff from going under it
departedmind replied to cs.punk's topic in CSS Help
Well, just came close, well there are so many things to organize in your code. Instead of using 3 div to create the top 'colorbreak' you can use one with top and bottom border and color of your choice, and you can use list to organize the navigation. A little help... <!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>Untitled Document</title> <style type="text/css"> div.navlbox {text-align: center; background-color: #4486B5; border: solid; border-color: #000000; width: 260px; } div.topbox {background-color: #387EAF; } /* Added this class */ div.color-break { width:100%; height:2px; background-color: #387EAF; border-top:3px solid #004A7F; border-bottom:3px solid #004A7F; } div.container { width:100%; height:auto; overflow:hidden; } #navigation { margin:0; padding:0; text-align: center; background-color: #4486B5; border: solid; border-color: #000000; width: 25%; float:left; list-style:none; margin-bottom:20px; } #navigation li { border-bottom:2px solid black; padding:2px 0; } #navigation li.last { border-bottom:none;} div.sidebox { margin:0; padding:0; width:70%; float:right; height: 100%; } /* ... */ div.colorbreak {background-color: #004A7F; width: 100%; height: 3px; } div.colorbreak2 {background-color: #387EAF; width: 100%; height: 2px; } div.floatright {float: right; } </style> </head> <body bgcolor="#146AA8"> <h1 class="heading" align="center">Me Trader</h1> <p align='center' class='smallheading'>Users online in past 10 minutes: 8 users online</p> <div class="color-break"></div> <div class="container"> <ul id="navigation"> <li><a href='/login.php'>Login</a></li> <li><a href='/register.php'>Register</a></li> <li><a href='/classfields/classfields.php'>Ads</a></li> <li><a href='/discussion_board/board.php'>Discussion Board</a></li> <li class="last"><a href='/blogs/blogs.php'>Blogs</a></li> </ul> <div class='sidebox'> <br/> <p align="center" class="paragraph">Me Trader has had a HUGE update, allot of great features have been added! We hope you enjoy it! <br/><a href='freezone.php'>FREE Zone! Ringtones, amazing stuff, funny stuff!</a> <br/>- Me Trader Team</p> <p class='heading2-sidemargin'>Latest blog posts</p> <div class='sidemargin'> <p class="smallheading"></p> </div> <p class='heading2-sidemargin'>Latest discussion board posts</p> <div class='sidemargin'> <p class="smallheading"><a href='/discussion_board/topic.php?topicid=1&boardid=1'>Welcome to Me Trader Discussion Boards!</a> (2009-05-16 09:09:38) <br/><a href='/discussion_board/topic.php?topicid=2&boardid=4'>RE</a> (2009-05-16 12:39:03) <br/><a href='/discussion_board/topic.php?topicid=3&boardid=4'>!READ RULES BEFORE POSTING!</a> (2009-05-16 12:44:00) <br/><a href='/discussion_board/topic.php?topicid=4&boardid=4'>Me Trader</a> (2009-05-16 12:47:21) <br/><a href='/discussion_board/topic.php?topicid=5&boardid=1'>dsadsa</a> (2009-05-23 20:07:41) <br/></p> </div> <p class='heading2-sidemargin'>Latest classfield posts</p> <div class='sidemargin'> <p class="smallheading"><a href='/ads.php?adid=3'>nokia n78</a> test (2009-05-18 12:08:35) <br/><a href='/ads.php?adid=6'>Core 2 Dup E6300 CPU</a> R5000 (2009-06-04 12:35:25) <br/><a href='/ads.php?adid=7'>Core 2 Dup E6300 CPU</a> R5000 (2009-06-04 12:35:26) <br/><a href='/ads.php?adid=8'>Core 2 Dup E6300 CPU</a> R5000 (2009-06-04 12:35:26) <br/><a href='/ads.php?adid=9'>Core 2 Dup E6300 CPU</a> R5000 (2009-06-04 12:35:27) <br/></p> </div> </div> </div> </body> </html> -
Adding clear:both; to your #bottomnav will show a yellow border at the top. Firebug is great
-
Yes, if the div #maincontent expands. It would be better if you do not use absolute position on the div #sidenav. You can use float:right for #sidenav. It would be better if you enclose the content div inside a container and use float to position them. <div id="#container"> <div id="maincontent">....</div> <div id="sidebar">....</div> </div> <div id="bottombar">...</div> and instead of using line-break after #top-nav, you can use top-margin on the container.
-
Add clear:both; in this style #bottombar , this should work
-
div tag does not have width attribute so div wont have 100px width, for css background positions check this http://www.w3schools.com/css/pr_background-position.asp
-
Remove text-align:center from body tag OR add text-align:left in navigation Hope that works..
-
I got a horizontal list items for menu ID - navigation and another menu with class v-menu for drop down list. The problem is that list items of class v-menu is taking css style from ul#navigation, it has been ages and i still could not figure out... Can someone have a look.... ul#navigation { height:15px; font-family:"Univers 45 Light", "Arial"; font-size:15px; list-style:none; margin:-5px 0 0 285px; z-index:30; } ul#navigation li { float:left; display:inline; line-height:15px; background:url(../images/nav_sep.gif) no-repeat top right; padding:0 13px 0 13px; } ul#navigation li a { color:#ffffff;} ul#navigation li a:hover { background:url(../images/glow.png) no-repeat center; _background:transparent; behavior: url(iepngfix.htc) } ul#navigation li.last { background:none; padding-right:0; } /* Drop Down Menu Style */ .v-menu { position: absolute; visibility: hidden; clear:both; width:164px; height:auto; margin:0; padding:0; overflow:hidden; color:#08215c; background:url(../images/v-menu-btm.gif) no-repeat bottom; } .v-menu span.top { width:164px; height:8px; display:block; background:url(../images/v-menu-top.png) no-repeat top; } .v-menu ul { clear:both; width:146px; margin:0; padding:0; list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:13px; background:url(../images/v-menu-rpt.png) repeat-y; padding:3px 9px 6px 9px; } .v-menu ul li { background:url(../images/underline.gif) repeat-x top!important; line-height:25px!important; } .v-menu ul li.first { background:none;} .v-menu ul li a { color:#08215c; text-decoration:none; padding-left:5px; } The Html code.. <div id="header"> <img src="images/banner.png" class="pngFix" /> <div id="logoBg"><a href="#"><img src="images/logo.gif" alt="home" /></a></div> <ul id="navigation"> <li><a href="#">Home</a> <ul class="v-menu "> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li><a href="#">Product</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li class="last"><a href="#">Contact</a></li> </ul> </div>
-
Use 3DsMax, Maya, Cinema4D, Blender
-
Add overflow:auto; to your container div.
-
Well it is working in FF 3.0.6
-
It is working for me checked in IE7, IE6 and FF 3.0.6, but in FF your menu bar is shifted to the left of the screen
-
Work around for IE : add ‘zoom: 1‘ to your CSS .icon{ border:0; filter:alpha(opacity=50); opacity:0.5; zoom: 1 } .icon:hover{ filter:alpha(opacity=100); opacity:1; zoom: 1 }
-
You need to add cellpadding and cellspacing to table <table cellpadding="0" cellspacing="0" id="structure">
-
Finally, assigned a class name dynamically. So, i think direct and indirect adjacent sibling selectors are of no use. Thanks to everyone ...
-
I am talking about IE7 not IE6. @TheFilmGod Thanks for the code, but it didn't work.
-
Thanks...
-
@haku That book is good but a bit old, I learned lot of things from that book, it does not tell "me" to use !important, I used it cause IE was behaving strangely. Why do you say !important is sloppy coding as well. @TheFilmGod I cannot add a class name, cause h5, p and p are dynamically created content in DNN module, so I thought sibling selector could work here. Anyway thanks...
-
Yeah, same as yours , it works great in Firefox , It didn't work in IE so I added !important but it didn't work. http://search.barnesandnoble.com/Beginning-CSS/Richard-York/e/9780470096970 So, this book is bad.....
-
There is I read in a book, it is called Direct Adjacent Sibling Selector
-
div.contact_us h5 + p + p { padding-bottom:0px!important; } does not works in IE any Help
-
Vertically centering a Div in any screen resolution
departedmind replied to departedmind's topic in CSS Help
ok, thanks i will give it a try -
Vertically centering a Div in any screen resolution
departedmind replied to departedmind's topic in CSS Help
I have seen that does not seem to work. I searched and tried a lot before posting here.