Jump to content


  • Posts

  • Joined

  • Last visited

About Randomishlying

  • Birthday 11/30/1987

Previous Fields

  • Languages
    Know fair amount: HTML, CSS | Learning: JS, JQuery, Sass, Bootstrap, Git

Profile Information

  • Location
  • Interests
    Graphic Design, Web Design, Games

Randomishlying's Achievements


Newbie (1/7)



  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 think I'm starting to understand. Correct me if I'm wrong here... You're saying that if you give an element a positioning property, it will change the z-index of that element by one or something? Do the numbers 10 and 5 have some sort of significance or could the numbers in that example also be 2 and 1? Could you give me an example of this? Anything would be awesome.I've had problems with absolute positioning, but not in the case that it's being absolutely positioned to a parent element. You're probably talking about something else anyway. I'm all ears.And just out of curiosity, is there anything you would use positioning for?
  12. This is most of the reason that I used absolute and relative positioning. For instance, if I set a div container to relative, and then I set the elements within that container to absolute, I can move things within the div exactly where I want. In almost every case I'll have already created a website layout in Photoshop or Illustrator, and it just seems easier to do it this way if I already know exactly where I want everything. The reason that I prefer this to setting the margin on each individual element within the div is because, a bunch of times already I've run into the problem of having to change the number or size of elements within said div. Then I have to go back and change all the margins of each individual element to reposition it to where I want it. This kind of repositioning also applies to why I used relative positioning on the text elements in question.Having run into this situation, I can see what you mean. Maybe(hopefully) I'm just thinking about this wrong, and what I want to do can still be accomplished without using absolute and relative positioning. The span didn't seem to overlap the image, but the paragraph element did. Also, if the paragraph element had a higher level z-index than the image, how come it was still affected by the image's margin-right 13px. I'm use to working with layers in a handful of adobe programs, so I have a pretty specific way of thinking about them that might be wrong in this case. So my next question what have to be... Is there any way to easily visualize the z-index other than in the code?Also, I'd like to thank both of you for trying to help me, hopefully I'm not asking too much.
  13. HA! I'm glad you got to use that story to help me understand why it is important to know JavaScript before using jQuery.
  14. I did try that, and it works (as you're undoubtedly aware). Thanks for the tip. However...(heh) I still don't understand why this works with margin-top as apposed to a relative position with top. My understanding of what was happening must be incorrect, because the paragraph element still covers the image, yet the image is now selectable. So you might say, I'm slightly more confused than I was before. I apologize if I'm coming off as stupid, but I feel like it will be easier to avoid this mistake, if I understood why this happened.
  15. Depending on how basic the colors are (this works well with solid color images and the like), you could also save the image as GIF with transparency. A GIF image could potentially have the same quality as a PNG-8 image, but not a PNG-24 image.
  • Create New...