Jump to content

Randomishlying

Members
  • Posts

    34
  • Joined

  • Last visited

Everything posted by Randomishlying

  1. What is the best way to acheive a responsive vertical centered position of an element within an element (e.g. a div within a div)? I know this would probably be a lot easier to accomplish using JavaScript, but I want to know of the best ways to do it with CSS first.Any help would be appreciated.
  2. To decrease the stretch of the border, you could give the h1 a specific width. You could also give the h1 a property of: display: inline-block; Then remove the negative margin on the span.I'm not aware of any way to decrease the white space with a positive margin, in a way that I think you hope for. However, I think it would be possible to make the h1 width smaller by adding a positive margin to the left or right of the h1/header. That would decrease the white space.
  3. Is there any particular reason that it isn't popular to do things in this way? I don't think I've ever seen any CSS code that included an element having a class and an id (at the same time).
  4. Thank you for responding. However, I don't think this answers my questions. I am familar with this way of selecting elements, but I don't think it would work for what I have set up. I need to give elements on multiple html pages the same properties (I used a class to do this). I also need to select some of these elements individually; I would normally use the method of selecting children of these elements. In this case, I have all the CSS in one file (It was easier to set it up this way, because the pages have very similar structures). With that in mind, selecting a child of an element that is shared on multiple pages will not work, when I'm trying to select that element specific to one of those pages. All of this leads me to the conclusion that if a single element can have a class and an id (at the same time), then I shouldn't have any problems.I have been selecting some elements with a class and a title (at the same time). It seems to work fine, but I don't know if I'm going to run into trouble doing this. If everything works out, I'd like to remove the titles and replace them with ids.Additionally: "[Y]ou can only give an id to 1 element per page." Does this mean you can use the same id name for one element on multiple pages?
  5. This question is specific to named CSS selectors. There is probably an obvious answer to this question, so I apologize ahead of time. If I wanted to apply a property to a bunch elements I would use a class; could I also use an id to give individual properties to any of those elements? Basically, can a single element have a class and an id? Can there be multiple classes? If so, is this proper html to do it this way, for all the main doctypes?I'm just confused, because I don't think I've ever seen any examples whilst learning, in which an element has a class and an id. Are there any other methods for selecting name elements with CSS (that are compatible with all main browsers), other than "class", "id", and "title"? Any help would be appreciated.
  6. I just had a "d'oh!" moment. Thanks for putting up with my ignorance. Thanks to you, my brain has finally made the connection.
  7. If an element is relatively positioned, its child is absolutely positioned (within the parent container), and the child has a child which is also absolutely positioned. Why is it that the child's child continues to be absolutely positioned relative to its parent container, when it's parent isn't relatively positioned? It seems to go on an on like this.I'm probably just thinking about this the wrong way, but I find it to be confusing. If someone could explain this to me, I would be greatful.
  8. I've taken a different approach in trying to build this webpage. I'm now trying to use tables for the main content section, because they seem easier to position to me (though it may not be the case). Using this approach I've run into some other (different) problems. The main problem: I don't seem to be able to change the z-index of the div "mainBorder" above the div "mainContent". The only other way I thought of accomplishing this was to put the div "mainBorder" outside of the table "belowHeader", center it and line it up to the div "mainContent". When I attempted to do it that way, upon resizing the window, the "mainBorder" div would move (not something I want). The way I have it set up, every time I add/put something inside of one of the cells on the left and right (vNav, rLine), the center of all the contents within the parent container will change. Is there a way of positioning the cells on the sides relative to the middle of the middle cell "mainContent"? The way I handled this problem until now, is to balance out the opposite side by inserting something of equal size. I don't know how to get around this issue. In using tables I've found that the cells within a table all have to be the same height. Is there any way around this? I was thinking I could just put a div of smaller size inside one of the cells and align it the way I wanted it. I haven't tried that yet, but I'm concerned that it would somehow effect the position of the cell it was placed in. I hope I've been at least partially clear in what I'm trying to convey. I would much appreciate any and all help. Thanks ahead of time. I will provide an image if necessary. MY CODE: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <table align="center" id="belowHeader" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="vNav"><img src="home-button.png" width="83" height="92" alt="HOME BUTTON" /></td> <td width="800px" height="538px" id="mainContent" valign="bottom"> <div id="mainBorder"> <div id="attention"> </div> <div id="theWhy"> </div> </div> </td> <td id="rLine"> <div id="balance"> </div> </td> </tr> </table> </div></body> /** MAIN PAGE **/ /*==== universal ====*/a { text-decoration: none;} img { border-style: none; text-decoration: none;} #theBody { margin: 0px; padding: 0px; } /*==== header ====*/ #theHeader { height: 80px; width: auto; background-image: url(header-color.png); background-repeat: repeat; position: relative;} #headerStripes { height: 75px; width: auto; background-image: url(diagonal-lines-pattern.png);} /*==== mainContent ====*/ #mainSection { background-image: url(diagonal-lines-pattern.png); background-repeat: repeat; height: 100%; min-height: 100%; width: 100%; position: absolute;} /*contentTable*/ #belowHeader { margin-top: -5px; padding: 0px; border-spacing: 4px 0px; } #mainContent { background-color: #f9e6d7; position: relative; z-index: -100; width: 800px; min-width: 800px; height: 538px; min-height: 538px;} #mainBorder { border: 4px solid #b76400; height: 498px; width: 792px; z-index: 100; position: relative;} #attention { height: 330px; width: 100%; background-image: url(attention-background.png);} #theWhy { height: 164px; width: 100%; border-top-width: 4px; border-top-style: solid; border-top-color: #b76400; background-image: url(the-why-background.png); background-repeat: repeat;} /*verticalNavigation*/ #vNav { border-right-width: 4px; border-right-style: solid; border-right-color: #ffc900; padding-right: 4px; } #rLine { border-left-width: 4px; border-left-style: solid; border-left-color: #ffc900; padding-left: 4px;} #balance { width: 83px; height: 100%;}
  9. The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}
  10. For reasons unknown to me, I've been unable to get my my favicon to appear in my firefox browser. There seems to be no problems in any other browser I've tried. I had someone else try it on there version of Firefox, and it seems to display fine. At this point, I sense that the problem is with my version of Firefox or something related to that. Perhaps there is something more I need to provide in the link attribute within the head. This is exactly what it says: <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> If anyone has any information that might point my in the direction of solving this problem, I would thankful to hear it. Cheers
  11. I normally use Kuler and colourlovers.com to find color palettes, if I'm having trouble finding the right palette. If I already have a color that I want to work with but need good analogous, monochromatic, or complementary colors, I tend to use colorschemedesigner.com. Additionally: I'm probably going to end of using the below website at some point, so thanks for that. A contrast to that website, but almost equally as useful is this website: http://labs.ideeinc.com/multicolr/#I use this at times, and it proves time and again to be of use and slightly entertaining.
  12. I like to have Dreamweaver and Notepad++ open, and I use both, but I spend most of my time in Dreamweaver. I have to say I'm surprised that Notepad has more votes than Notepad++. I wonder why that is. I started using Aptana Studio 3 a few months ago. It has become my favorite.
×
×
  • Create New...