Jump to content

Morgan

Members
  • Content Count

    38
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Morgan

  • Rank
    Newbie
  1. I understand the concept behind Unordered Links as a Drop Down menu, I have made plenty of Vertical <ul> menu's before. However, I see often that people also use the same tactic (with obviously different positioning) to accomplish the same goal with drop-down menu's that go Horizontally across the page top, rather than vertically down the side.I've been trying to accomplish this (without stealing someone elses CSS/HTML markup), I have used Firebug and viewed a lot of source from pages where this is being used, but its such a mess to look through a finished page sometimes, my head just wants to explode.So logic would dictate that the best approach would be to ask a group of fellow design-junkies and experts.It was my understanding that Unordered Lists were always vertical, by design. So, first things first, how do I get the list to display horizontally??
  2. For the record:You don't NEED to define a class in CSS for you to apply a class="" to an element. Sometimes in designs, id= or class= are used on an element as a reminder to the DESIGNER, rather than a call to the CSS.So, even though <div class="class1"> will look for either div.class1 or .class1 in your CSS file, it doesn't NEED to exist in order for you to use class= on the DIV
  3. I may be approaching this incorrectly, but I am wondering why nobody has told him to try putting his secondary links within their own containing div INSIDE the links div, then floating that secondary div to the right, applying an overflow:hidden; to the container, and viola, right aligned links.Example: <!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><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#links {overflow:hidden;position:relative;width:160px;border:1px solid #000;background-color:#c1c1c1;}div.parentlink {position:relative;background-color:#666666;}div.sublinks {float:right;}a {color: #FFFFFF;text-decoration:none;}</style></head><body><div id="links"> <div class="parentlink"><a href="#">PARENT LINK</a></div> <div class="sublinks"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> </div></div></body></html> (The position:relative; tags were because I first tried to do a position:absolute; on the secondary div, then add a right:0px; to force it to the right of its container, however even with overflow:hidden set on the main containing div, it didn't overflow, so I decided float:right for a secondary option.)You can use the above ^ in combination with JQuery, to cause a RollOut effect when clicking the parent link that forces visibility of the secondary div.
  4. HiI'm not really sure what you are trying to accomplish here, could you please be a bit more specific or post some actual code from your project?Are you trying to Right-Align the text within the paragraph? or remove spacing between 2 paragraphs by removing the margin?If you are removing a margin to get rid of the spacing between two elements, you may need to apply the same to the reverse margin of the second element as well.However, also, paragraphs always start on their own line, so we need to know WHAT you are trying to margin it next to, a div, an image, what?Try applying a reverse margin to whatever may be next to the paragraph.Example:if the paragraph is margin-right:0px, but it isn't lining up directly next to the element to its right, you may need to apply margin-left:0px to that other element as well, to remove its margins.
  5. Regarding using border-bottom instead of an image: It seems that Internet Explorer likes to double the size of everything that I put in stylesheets, especially borders. a 2px border looks amazing on Firefox, then I check the cross compatibility and the line that used to look great looks twice as thick, it throws off the design. My only resort was to use an image which I can guarantee remains a 2px height at all times.The problem I was having with that one image was that it wouldn't line up properly with the div below it (it had a space between them), and the only solution I found that worked seemed to be using Dreamweaver to move it down using align="absbottom" which I know is depreciated. I wasn't aware that vertical-align was a valid CSS element, I could have sworn I tried that before and it didn't work, I'll have to attempt it again I suppose.I tried position:absolute, bottom:0px, but that pushed it all the way to the bottom of its containing div (which it should have) rather than making it meet up with the div below it that resides inside the same container. I'm aware that if I don't assign a class to h2 then it will apply those margins across the board, but seeing as every instance of h2 on the current design is a margin:0 instance, I didn't think it would matter much. I'll try assigning a class, see if it helps..On a related note, I wrote up a BS page using strict declaration, tried to put some standard style in for h2 margins ( h2 {margin-top:0px;margin-bottom:0px;} and then put 2 <h2> tags on the page... the margins worked fine, so I'm baffled as to why they aren't working on mine.If there were a problem with my code, wouldn't it show up in validation? There WERE a few errors to begin with, but I corrected them and my issue persists.What is firebug by the way? Should I get that?
  6. I just ran my page through a validator for both the CSS and the XHTML 1.0 Strict. Strict validator only comes back with one error that I already know about (a forced hack to get an image to align to its absolute bottom), if I remove that error it becomes valid, but doesn't change my Header issue.I also ran the CSS file through the CSS Validator as CSS3, and it came back flawless.Here are the files:http://www.trademarq.net/help/the_strict.htmlhttp://www.trademarq.net/help/pbtstrict.cssIf you look at the HTML page, you will see what I am referring to (I hope). The <h2> tags for things like MENU, and BUSINESS NEWS, all have an <img> line under them that is 2 pixels high and X pixels wide, but the lines should almost be touching the bottom of the header text, but instead the headers keep their default margins. I am not sure why, because the pbtstrict.css file has h2 {margin-bottom:0px;margin-top:0px;}.Any thoughts?
  7. Background image on body would be:In CSSbody {background-image:url('images/urlhere.extension');}Inline (Ugly)<body style="background-image:url('images/urlhere.extension');">
  8. Basically, before I moved to Strict, this line in my css file:h2 {margin-top:0px;margin-bottom:0px;}Accomplished my goal of removing the top and bottom margins from those header tags so that they could fit more closely to the line above and below them.As soon as I changed my DOCTYPE Declaration to Strict, that is no longer working as intended.Was something changed? Am I unaware that I am actually not able to adjust the sizes of those margins in Strict?Help is appreciated!
  9. Ok so... I have this design that I just whipped up in a few minutes out of boredom. Layout looks pretty good, and its using CSS to specify design (no images)Here is my problem, when I try to use the <h1> tag in the heading section, or a <p> tag in the main content section, it pushes those divs down slightly out of place, and ends up showing the background (main) div that is being used to set div size.Here is an example of what I mean, while trying to use h1 and p. (Note: The red background is there to demonstrate the location of the MAIN div, and where it is interfering with the design.)http://www.tmcustomcomputers.com/breaktest1.htmlAs you can see, directly above the paragraph, and directly above the H1, there is about 20pixels of random dead space that shouldn't be there (and isn't there when you remove the h1 tag or the p tag from the page.Here is what it SHOULD look like:http://www.tmcustomcomputers.com/breaktest2.htmlCan anyone take a quick look and maybe point out an aspect I may have missed or overlooked? I can't figure out why this is happening.Thanks!
  10. Ok so, I am working with a web host that is a personal friend of my employer, but sadly doesn't offer MySQL Databases.. so I went to another host to purchase a cheap plan that offered MySQL so that I could setup a phpBB3 account/forum on that webserver. Now i want to link to that forum from my webpage so that the URL APPEARS to be my main webpage, but is actually outsourcing to another .com / webserver that has the phpbb3 forum installed on it.Is this possible? With frames perhaps? I know frames can load other html docs within your root, but is there a way to do it for completely different webpages on different .coms / webservers ?Example:Main website is http://www.mywebsite.com - without phpbb3Place with phpbb: http://cheaphost.hostingservice.com/forum/I want http://www.mywebsite.com/forum/ to secretly load http://www.cheaphost.hostingservice.com/forum/ but still look like it is a part of mywebsite.com
  11. Thanks for the reports and the compliments, I'll still be doing a bit of tweaking as the final product comes online, and I appreciate the input. I've always been a fan of image-less design, as it leaves a lot more room for easy alteration down the road. The final product will have more content and will span further than the 600px height that I have the page set at currently.As for the breaks, I will look into making them borders, is probably a much better and easier idea. Might need to clear the floats in the footer?What exactly do you mean by this? I'm not sure that I see what you're trying to say?Overall, thanks again everyone for your help!
  12. OK, soI did some re-designing of my own and finally decided that the faux column thing wasn't exactly what I had in mind, and I don't much enjoy static single image backgrounds w/ floating or absolute divs all around... just not my style (thanks for the tip tho, I may end up using that style sometime in a future design)I ultimately decided to go with set percentage widths, and pixel heights to determine final page size/layout..First, I'd kindly request confirmation of the page looking proper on a PC with a screen size that differs from my own:http://www.tmcustomcomputers.comsecondly, I'd like to know if anyone can isolate the NEW problem I seem to have come across, which I am absolutely stumped by.I ported over code from a multitude of my different sample / example pages to build the final working (or what I hope is working) product, however, for some reason the index page (http://www.tmcustomcomputers.com) seems to have extra line spacing EVERYWHERE in comparison to one of my older attempts in which I quite liked the line spacing. For the life of me, I cannot figure out what is causing all the content on the page to space double of what it was originally, as all I did was copy code from previous work (in which the spacing was correct) into my new page.Here (again) is the page that has extra or double spacing:http://www.tmcustomcomputers.comand here is the page without double spacing, the way it is supposed to (or rather, I want it to) look:http://www.tmcustomcomputers.com/index5.htmlI looked over everything piece by piece and I can't figure it out?Thanks so much!
  13. I'm trying to design something that will look the same to anyone who visits, regardless of screen size... thats always my general goal. I just design in 1200x at first because that is my screen resolution so I like to see what it will look like as a finished product.Thanks for the link, I'll check it out :)and thanks for stickin with me all this time haha
×
×
  • Create New...