Jump to content

Drae

Members
  • Posts

    19
  • Joined

  • Last visited

Everything posted by Drae

  1. No reason - just trying to position it correctly (and not have things behind them). Thanks Dave for that example. I'll have a good look at it after work today and then reply here again undoubtedly.
  2. Thanks guys! Here's a basic mock-up. At the moment I have six of the floating elements and ideally would like to part them into two sections (three above in one line, three more below) with the option of adding more. The sidebar on the right hand also floats at the moment and should not overlap with the floating box choices. I've done the floating boxes on the left as div classes if that helps (tried spanning it but didn't quite work out). I'm also aiming to make it responsive. Relevant coding is now like this: .drae-bb {float: left;display: block;width: 10%;height: 200px;background: #180028;opacity: 1;margin: 10px 6px 10px;padding: 6px;border: 1px solid #2a0044;font-size: 20px;text-align: center;line-height: 3;}.drae-bb-con {height: auto;width: 80%;} #side {float: right;margin: 10px 20px 6px 6px;width: 20%;background: #180028;padding: 6px; border: 1px solid #2a0044;height: 600px;padding: 6px;text-align: justify;} <div class="drae-bb-con"><div class="drae-bb"><a href="/design.html">Website Design</a></div><div class="drae-bb">Forum Design</div><div class="drae-bb">Web Hosting</div><div class="drae-bb">Art Commissions</div><div class="drae-bb">Traditional Animation</div><div class="drae-bb">Report a site on Draebox Hosting</div></div><div id="side"><h2>About</h2><p>Content here.</p><h2>Need Help or Info?</h2>Content here.</p></div>
  3. Here is the coding for the floating elements: .drae-bb {float: left;width: 200px;height: 200px;background: #180028;opacity: 1;margin: 10px 6px 10px;padding: 6px;border: 1px solid #2a0044;font-size: 20px;text-align: center;line-height: 3;} They need to be in line within a set space before they then begin a new line below. At the moment I have not coded the non-floating element as when I did earlier it did not contain them. Would it help to see a mockup of what I am trying to accomplish?
  4. Hey guys! I currently have some floating elements that I would like to wrap with a non-floating element so that they display in the correct positioning. What is the best way to do this?
  5. Just double-checked my reference book and w3school's way of dealing with lis, and it closes them like I did in my snippet above? Something's not quite working either way. What's the correct way to hide the drop-down options that shouldn't display until their parent class is hovered over? This is the coding at present: #topbar-container { background: #dbd2b3; border-bottom: 1px solid #67624c; color: #67624c; line-height: 48px; font-size: 16px; height: 48px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: center; text-transform: lowercase; font-weight: bold; list-style-type: none;}#topbar-container a { color: #67624c; padding-left: 3px; padding-right: 3px; display: inline;}#topbar-container a:hover { color: #fff; text-decoration: none;}.topbar { float: left; background: #dbd2b3; border-bottom: 1px solid #67624c; color: #67624c; line-height: 48px; font-size: 16px; height: 48px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: center; text-transform: lowercase; font-weight: bold; list-style-type: none;}.topbar a { color: #67624c;}.topbar a:hover { color: #fff; text-decoration: none;}.topbar ul { float: left; color: #67624c; padding-left: 3px; padding-right: 3px; display: inline; background:#dbd2b3; border-bottom: 0px; display: span; list-style-type: none; width: auto;}.topbar ul ul { float: left; color: #67624c; padding-left: 3px; padding-right: 3px; display: inline; background:#dbd2b3; border-bottom: 0px; display: span; list-style-type: none; width: 220px;}.topbar ul ul ul { float: left; color: #67624c; padding-left: 3px; padding-right: 3px; display: inline; background:#dbd2b3; border-bottom: 0px; display: span; list-style-type: none; width: 220px;}.topbar ul ul ul ul { float: left; color: #67624c; padding-left: 3px; padding-right: 3px; display: inline; background:#dbd2b3; border-bottom: 0px; display: span; list-style-type: none; width: 220px;}.topbar ul ul ul ul ul { float: left; color: #67624c; padding-left: 3px; padding-right: 3px; display: inline; background:#dbd2b3; border-bottom: 0px; display: span; list-style-type: none; width: 220px;}
  6. Thanks guys! I'm learning javascript slowly at the moment and will be learning php after, so for the time being I'll tell my client of some other options. Thanks again!
  7. Am I right in thinking that if I wanted to build a website that is password protected, I would need javascript to create the password specific bits? Would I also need to know sql?
  8. Thanks! To position the drop-downs so they display correctly underneath their parent ul, keeping in mind I'm trying to centre the menu, what would be the best way to code it's positioning?
  9. I'm working on a drop-down menu for someone and it's the largest one I've had to do yet (drop-downs are not a strong point of mine, and the largest I've ever had to do only had the one layer of drop-downs). This particular menu I want to have centered, along with it's drop-downs, and I was advised to code the first set of uls like this: This is the HTML for the menu: <ul class="topbar"> <li><a href="">News</a></li> <ul><li><a href="">Blog</a></li> <li><a href="">Podcasts</a></li> </ul><!-- CLOSES NEWS SUB-SECTION --> <li><a href="">About</a></li> <ul><li><a href="">Story</a></li> <li><a href="">Staff</a></li> </ul><!-- CLOSES ABOUT SUB-SECTION --> <li><a href="">Rules</a></li> <li><a href="">World Lore</a></li> <ul><li><a href="">Races</a></li> <ul><li><a href="">The Sidhe - Society</a></li> <ul><li><a href="">Sidhe Naming Conventions & Languages</li> <li><a href="">Sidehe Anatomy</a></li> <li><a href="">Courts of the Sidhe</a></li> <li><a href="">Clans of the Sidhe</a></li> <li><a href="">The Danuist Religion</a></li> <li><a href="">Criminal Orders of Cels</a></li> </ul><!-- CLOSES SIDEHE SOCIETY SUB-SECTION --> <li><a href="">The Aesir - Society</a></li> <ul><li><a href="">Aesir Naming Conventions & Languages</a></li> <li><a href="">Aesir Anatomy</a></li> <li><a href="">Brotherhoods of Norland</a></li> <li><a href="">The Faith of Norland</a></li> <li><a href="">Dishonoured Folk</a></li> </ul><!-- CLOSES AESIR SOCIETY SUB-SECTION --> </ul><!-- CLOSES RACES SUB-SECTION --> <li><a href="">History</a></li> <ul><li><a href="">Historical Lands & People</a></li> </ul> <li><a href="">Magic</a></li> <ul><li><a href="">Draiocht: Magic of the Sidhe<a></li> <li><a href="">Seird: Magic of the Aesir</a></li> </ul><!-- CLOSES MAGIC SUB-SECTION --> <li><a href="">Warfare & Technology</a></li> <li><a href="">Lands & Nations</a></li> <ul><li><a href="">Calendars & Dating</a></li> <li><a href="">Cultural Interaction</a></li> </ul><!-- CLOSES LANDS AND NATIONS SUB-SECTION --> <li><a href="">Forum</a></li> <ul><li><a href="">Search</a></li> <li><a href="">Members</a></li> <li><a href="">Calendar</a></li> <li><a href="">MyBB Help</a></li> </ul><!-- CLOSES FORUM SUB-SECTION --> <li><a href="">Character Creation!</a></li> <li><a href="">Guides</a></li> <ul><li><a href"">Guide to Account Switching</a></li> <li><a href="">Character Faults</a></li> <li><a href="">Guild Wars 2 Guidebook</a></li> <ul><li><a href="">Who is Your Character</a></li> <ul><li><a href="">Playing a Good-aligned Character</a></li> <li><a href="">How to Avoid Purple Person Syndrome</a></li> <li><a href="">Playing a Evil-aligned Character</a></li> </ul><!-- CLOSES WHO IS YOUR CHARACTER SUB-SECTION --> <li><a href="">Races of Tyria</a></li> <ul><li><a href="">Charr</a></li> <ul><li><a href="">Charr Naming Conventions</a></li> </ul><!-- CLOSES CHARR NAMING CONVENTIONS --> </ul><!-- CLOSES CHARR SUB-SECTION --> <li><a href="">Humans</a></li> <ul><li><a href="">Human Naming Conventions</a></li> <li><a href="">Personality</a></li> <li><a href="">Continental Tyrian History</a></li> <li><a href="">Elonian History</a></li> <li><a href="">Canthan History</a></li> <li><a href="">Human Ethnicity & Social Class</a></li> </ul><!-- CLOSES HUMAN SUB-SECTION --> <li><a href="">Norm</a></li> <ul><li><a href="">Norm Naming Conventions</a></li> </ul><!-- CLOSES NORM NAMING CONVENTIONS --> <li><a href="">Sylvari</a></li> <ul><li><a href="">Sylvari Naming Conventions</a></li> </ul> <!-- CLOSES SYVARI NAMING CONVENTIONS --> <li><a href="">Asura</a></li> <ul><li><a href="">Asura Naming Conventions</a></li> </ul><!-- CLOSES ASURA NAMING --> <li><a href="">Other Sources for Racial Names</a></li> <li><a href="">Racial Abilities & Magic</a></li> </ul><!-- CLOSES RACES OF TYRIA --> <li><a href="">Professions & Magic</a></li> <ul><li><a href="">Warrior (Scholar)</a></li> <li><a href="">Guardian (Soldier)</a></li> <li><a href="">Engineer (Adventurer)</a></li> <li><a href="">Ranger (Adventurer)</a></li> <li><a href="">Thief (Adventurer)</a></li> <li><a href="">Elementalist (Scholar)</a></li> <li><a href="">Necromancer (Scholar)</a></li> <li><a href="">Mesmer (Scholar)</a></li> </ul><!-- CLOSES PROFESSIONS & MAGIC SUB-SECTION --> </ul><!-- CLOSES GUILD WAR 2 GUIDE SUB-SECTION --> </ul> <li><a href="">Contact</a></li></ul><!-- CLOSES TOPBAR --> (Apologies if the spacing doesn't look as it should on here.) Do I need to define styling for all the ul sets, or will just using the .topbar ul suffice?
  10. I am having difficulty coding the CSS for this drop-down - the only reference book I have for drop-downs floats everything and the w3school tut doesn't go into more complicated drop-downs. I've not needed to do one as complicated as this one before for anyone either. I'm having to replicate the menu from the client's wordpress for their forum skin I'm making for them. The largest layer of the menu is this: ul li ul li ul li ul li ul li ul li Any suggestions for where to start?
  11. Drae

    User posted comments

    That's pretty much what ran through my mind when the person asked if I could do it, though it doesn't seem to be a suitable solution for them. Thanks though
  12. Drae

    User posted comments

    I couldn't figure out the best place to post this, but if I wanted to create a website that would enable guests to post comments (possibly registered as well), what would I need to know coding-wise?
  13. Seems to be every time I come here it's because of suckerfish menus. Ah well! What is the best way to code a suckerfish so that you can center it's links? The way I know uses the float property which means I get stuck with aligning it to the left or right at present.
  14. Drae

    Container

    I'm working on a website design at the moment which holds all the content in a container. Here is the container's CSS: #container {width: 980px;background: #ededed;min-height: 1200px;border-left: #000 1px solid;border-right: #000 1px solid;margin: auto;border-radius: 20px;box-shadow: 2px 2px 4px #888888;z-index: -1;} I'm having a problem though as if the content goes over the minimum height for the container, the container does not expand. How do I make it expand automatically by taking into account the content held within it on the webpage itself?
  15. Thanks, but this is only part of a template and CSS for a MyBB skin I'm working on, so the dividers and such are actually found further down in the template - I'm just concentrating the coding sections given for the menu.
  16. I've been having some difficulty getting this suckerfish drop-down menu to align its links to the center of the webpage. The container it is held within spans across the viewer's window which is fine. It's the links themselves I am trying to center and they are refusing to align correctly. Here's the CSS and the HTML to go with it at the moment: CSS: #topbar-container{position: absolute;left: 0px;margin: 0%;font-size: 12px; width:100%; text-align: left; white-space:nowrap; padding: 2px 4px 2px 4px; /* This changes the padding on the top topbar options. Goes T, R, B then Left. */} #topbar a:visited, #topbar color: #f5f5f5;text-decoration:none;} #topbar color: #f5f5f5; text-decoration:none;} #topbar ul { margin:0; position:relative; vertical-align: bottom; } #topbar ul ul { z-index:500; display:none; margin:-1em 0 0 -1em; } #topbar ul ul ul { left:100%; } div#topbar cursor:pointer; li:hover ul ul,div#topbar li li:hover ul ul,div#topbar li li li display:none;} div#topbar li:hover ul,div#topbar li li li:hover ul{display:block;} HTML: <div id="topbar-container"><div id="topbar"> {$welcomeblock}<ul> <li><a href="#">Forum Tools</a> <ul> <li><a href=http://sizaelrpg.com/mybb"/search.php">Search</a></li> <li><a href="http://sizaelrpg.com/mybb/search.php?action=getnew">Newest Posts</a></li> <li><a href="http://sizaelrpg.com/mybb/search.php?action=getdaily">Today's Posts</a></li> <li><a href="http://sizaelrpg.com/mybb/memberlist.php">Member List</a></li> <li><a href="http://sizaelrpg.com/mybb/calendar.php">Calendar</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--><ul> <li><a href="#"><img src="http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/topbar_dragon2.png" title="Get Started!" alt="Get Started!" width="36"></a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3.html>Newcomer's Guide</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2974.html>Playable Races</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2977.html>Classes & Specialisations</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-419.html>Cannon: Templars</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-158.html>Cannon: Mages</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2954.html>Account Types</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-418.html>Guide: Profile Creation</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-1793.html>FAQs</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/forum-191.html>MyBB Help</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">Basics</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-417.html>Rules</a></li <li><a href=http://chroniclesofthedas.ashkir.com/thread-1254.html>Setting Overview</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/forum-89.html>Must Reads</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-292.html>Face Claims</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-4550-post-46559.html>Meet the Staff</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">World Info</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/forum-38.html>The World</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3311-post-41592.html>Lore Index</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-216.html>Canon Info</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-4-post-6136.html>Races</a></li> <li><a href="http://chronicles-of-thedas.deviantart.com/gallery/32325334" target="_blank">Maps of Thedas</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">Get Involved!</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-379-post-1706.html>Player Roster</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-1207-post-8512.html>Faction Roster</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-6-post-15.html>Months & Annums Coding</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3005-post-34706.html>Individual Writing</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-108.html>Profile Management</a></li> </ul> </li> </ul></ul><!-- TOPBAR CLOSER - PAIRS WITH THE FIRST UL AFTER TH WELCOME BLOCK. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR CONTAINER. DON'T REMOVE. /--> Any help would be greatly appreciated! I'm doing this for some friends and I always seem to have trouble with drop-down menus lol!
  17. Thanks. This is how I tried to do it. I think it's known as a suckerfish drop-down menu lol! I haven't added the actual URLs yet as I'm just trying to get it to display properly first. [b]<[url=""]ul [i]class=[/i][s]"topbar"[/s][/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1[b]<[url=""]/a[/url]>[/b][b]<[url=""]ul[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1B[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG1C[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2[b]<[url=""]/a[/url]>[/b][b]<[url=""]ul[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2B[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]li[/url]>[/b][b]<[url=""]a href=[/url]>[/b]LinkG2C[b]<[url=""]/a[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]>[/b][b]<[url=""]/li[/url]>[/b][b]<[url=""]/ul[/url]> [/b][b][b]ul.topbar, ul.topbar ul [/b]{[u][url=""]margin[/url]:0;[url=""]padding[/url]:0;[url=""]list-style-type[/url]:none !important;[url=""]float[/url]:left;[url=""]border[/url]:1px solid #2c212d;[url=""]background[/url]:url([s]http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/thead_bg.gif[/s]) top left repeat-x #2c212d;[/u]}[b]ul.topbar li [/b]{[u] [url=""]float[/url]:left;[url=""]width[/url]:200px;[url=""]background[/url]:url([s]http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/thead_bg.gif[/s]) top left repeat-x #2c212d;[/u]}[b]ul.topbar li ul [/b]{[u] [url=""]width[/url]:200px;[url=""]position[/url]:absolute;[url=""]left[/url]:-999em; [/u]}[b].topbar [url=""]li[/url]:hover ul [/b]{[u] [url=""]left[/url]:auto;[/u]}[b]ul.topbar a [/b]{[u] [url=""]display[/url]:block;[url=""]color[/url]:#f5f5f5;[url=""]text-decoration[/url]:none;[url=""]padding[/url]:5px 5px;[url=""]border-right[/url]:1px solid #2c212d;[url=""]border-left[/url]:1px solid #2c212d;[/u]}[b]ul.topbar li li a [/b]{[u] [url=""]border-top[/url]:1px solid #2c212d;[url=""]border-bottom[/url]:1px solid #2c212d;[url=""]border-left[/url]:1px solid #2c212d;[url=""]border-right[/url]:1px solid #2c212d;[/u]}[b]ul [url=""]a[/url]:hover,ul [url=""]a[/url]:focus [/b]{[u] [url=""]color[/url]:#000;[url=""]background[/url]: #2c212d;[/u]} And it just worked lol! I noticed the .topbar li:hover ul had randomly added some extra coding to itself due to the software lol!Thanks for your help![/b]
  18. Hey guys! I spent a few hours last night trying to code a drop-down menu to work on a MyBB forum skin I am working on, and even though I had put about no having the bullet-points and such, they were still coming up. I'll post the code I did later today when I have finished work (if I didn't delete it), but any suggestions as to where I might have been going wrong? I also do not want to code one that looks like those input fields, but rather the other sort that looks more pleasing and fits in better. (Will screenshot an example later for you for the desired effect I'm trying to get.)
×
×
  • Create New...