Jump to content

cjy8s@yahoo.com

Members
  • Posts

    24
  • Joined

  • Last visited

Everything posted by cjy8s@yahoo.com

  1. So, to understand you better, I need to be more scrupulous about setting all my margins and paddings, even if they do not have a special value?
  2. Yeah I have the correct doctype. I had the code validated at http://html5.validator.nu/, and it says: I have it declared in this way :<!DOCTYPE html><html lang="en"> but now im confuzzled. did I miss something? Is there
  3. I am declaring the doctype. I am also starting with HTML5. And Mr. Haris, would you please explain how that script works, so I don't have to feel guilty about using a charity script? And what makes that different from browser detection?
  4. I'm having trouble with cross-browser development. More specifically, padding between Google Chrome, Firefox, and IE. It seems, as far as padding goes, that firefox and IE are having similar issues, and im not sure how to compensate for that. I understand that user.agent detection is not a very reliable way to go about this, and I've heard that feature detection might be better. How exactly should I go about this? What features should I be detecting for? Or am I misunderstanding the concept of feature detection?
  5. Yah!! i got it Thank you, Regicide Del Feroz, you were right, I just set a Left: value and adjusted the padding and it worked out exactly how I wanted. And thank you, dsonesuk, for the affectionate "B**** Please!". Haha It slapped me in just the right way. I forgot I had switched to the relative position since. Anyway, Thank you guys again! Always well appreciated!
  6. Oh i do suppose I should come around and thank you. haha Your code was near perfect, only a slight few adjustments and everything showed perfectly. Again, thank you, I had no idea about the ~ function in CSS, and I plan on using it much more now Much appreciated. God Bless.
  7. Thats the thing though, this is to uploaded to Wordpress, so the width of the div could be changed by the owner at any point. depending on their content. Thank you, any other suggestions?
  8. Hey! So I have an intersting situation:I am trying to make a div stop moving left past a certain point when the browser is resized. But in the method I am using, I can no longer position the Div to sit exactly where I want! I want it to float: left at 50%, and be offset left by about ~150px. My code looks like this: div.main_content {padding: 0 195px;margin: 0 auto;}div.inner_content {position: relative;float: left;top: 150px;left: 50%;margin: 0 auto;min-width: 400px;border: 1px solid #000000;background-color: #A0CFEC;text-align: justify;overflow: hidden;}<div class="main_content"><div class="inner_content"><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p></div></div> Again, my problem is that now the div sits at exactly 50%, as expected, and overflows off the screen. What I need is a way to offest the div a little to the left, similarly to this: div.main_content {position: absolute;float: left;left: 50%;margin-left: -150px;} As far as I can tell, the div does not stop at a certain point when the browser is resized if I use this method. Any suggestions? Thank you!!
  9. It covers the width of the page and about 400px upward from the bottom
  10. hmmm, now the menu_blue appears in the top right corner and cant :hover. I have the CSS in a separate style sheet (i like things to be categorized), other than that, my page is fairly similar to the one you posted. Any ideas? Im gunna try to tweak it tomorrow and see what I can get. Thanks for helping me thus far!
  11. I guess I should have made my description a little more clear , the CSS should illustrate my point though. .menu {width: 600px;display: inline;font-family: sans-serif;color: #C8C8C8;text-decoration: none;}a.menu:link { text-decoration: none; color: #C8C8C8; }a.menu:visited { text-decoration: none; color: #C8C8C8; }a.menu:hover { text-decoration: none; color: #808080; }a.menu:active { text-decoration: none; color: #808080; }#menu_blue {position: absolute;float: left;left: 0px;bottom: 0px;opacity:0.15;filter:alpha(opacity=15); /* For IE8 and earlier */}#menu_blue:hover { opacity:.80; filter:alpha(opacity=80); /* For IE8 and earlier */ }#menu_blue:pseudo { opacity:.80; filter:alpha(opacity=80); /* For IE8 and earlier */ } Menu_blue is the same image throughout, but I use CSS to change out opaque it is. What I need is for the #menu_blue:hover { opacity:.80; filter:alpha(opacity=80); /* For IE8 and earlier */ } property to be applied when the menu table is moused over. Thank you again for helping me with this!!
  12. <!--function ShowPicture(id,show) { if (show){ document.getElementById("id").menu_blue.visibility = "visible" } else { document.getElementById("id").menu_blue.visibility = "hidden" }}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].menu_blue.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').menu_blue.… = "hidden"}}//--> <span id="menu_blue"><img src="Index_files/Images/menu_background.png"/></span><span><table id="menu_block" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table></span> I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Ive seen some script that looks like the following that is supposed to achieve this, but I dont know enough about JS to make it work... I think im pretty close though. <script language="Javascript"><!--function ShowPicture(id,Source) {if (Source=="1"){if (document.layers) document.layers[''+id+''].visibility = "show"else if (document.all) document.all[''+id+''].style.visibility = "visible"else if (document.getElementById) document.getElementById(''+id+'').style.… = "visible"}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].style.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').style.… = "hidden"}}//--></script> <a href="http://yourwebsitepage.com" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Hover Here To Show Image</a><div id="Style"><img src="The background image you were on about"></div> Could someone please help me figure this out? Thanks!
  13. Btw, Happy Birthday!And thanks tons! ill see what I can do. Im looking into multiple ways of doing this so i can better understand the 'logic' of it.Thanks! Ok so I tried to apply it, but im kinda "derp!" so it doesnt work. haha here it is: <!--function ShowPicture(id,show) { if (show){ document.getElementById("id").menu_blue.visibility = "visible" } else { document.getElementById("id").menu_blue.visibility = "hidden" }}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].menu_blue.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').menu_blue.… = "hidden"}}//--> <span id="menu_blue"><img src="Index_files/Images/menu_background.png"/></span><span><table id="menu_block" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table></span> Lemme know how derped this is. Thanks!Anything, Guys?
  14. How about something like this? <script language="Javascript"><!--function ShowPicture(id,Source) {if (Source=="1"){if (document.layers) document.layers[''+id+''].visibility = "show"else if (document.all) document.all[''+id+''].style.visibility = "visible"else if (document.getElementById) document.getElementById(''+id+'').style.… = "visible"}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].style.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').style.… = "hidden"}}//--></script><a href="http://yourwebsitepage.com" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Hove… Here To Show Image</a><div id="Style"><img src="The background image you were on about"></div> Its iffey, but could I get some critiquing? thanks tons!
  15. hmmmm... I see.... Well I know negative jack squat about javascript, although I am trying to learn it. Could someone show me how this could be done?
  16. I see a way to do this with Jquery, sort of, but again I dont know enough Javascript to even get by with :/ could someone help me pleeease???
  17. I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Can this be done without Javascript? Or is there a way with CSS3 to have the element that's being hovered over and another element change while interacting with only the list/menu elements? I would prefer a CSS solution if possible. Thank you in advance! Or even to put CSS inside Javascript? like have an if then statement for the text that says if there is a rollover event on the text/tables then it initiates the CSS :hover for the background?I want to use CSS rather than Javascript as much as possible because 1) I understand CSS and not JS, and 2) JS is ugly. Thanks again!!
  18. I dont know how i did it, but i think i got it thanks
  19. Yes the image path is correct, it calls the image if i take the width and height out, but if i do that then the padding and border grow to about the width of the screen (height stays the same). This makes no sense to me, why would the width and height cause the image to not be called if there is room for the image?
  20. I figured i could also do the same with <span> if i added "display: block;" but it still does not call up the image
  21. This white space is hiding my image and I dont know why! there is ample space for the image to exist in the div. Here is the CSS: #guitar {position: relative;transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */padding: 5px;border: 1px solid gray;background-color: #ffffff;width: 180px;height: 290px;} and here is the HTML <div id="guitar"><img src="Index_files/Images/Collage Photos/About Me/guitar1.png"/></div> i think im either missing something, or there is something mundane that i over looked. With this code, everything but the image shows up. thanks guys!
  22. I dont have much experience, but i need to learn the languages anyway... Well, thank you, that was actually a much easier sounding explanation than i was expecting! Again, thank you tons! Ill get started ASAP.
  23. So I am at the part of my website where I need to decide how to display individual products being sold on the website. I want to display the picture, a description, and link it to a paypal account where the individual product can be sold. But I am unsure how to do it. I could do it with HTML easily, but I am wondering if I should use PHP or another programming langauge so I dont have to create 1 page per product, so I dont have to create 50 additional pages. Im thinking that I would have to create a template page using HTML or PHP and then use the programming language to fill in the description and images according to which link (product) they click. How would I do this exactly? I dont have a ton of experience with PHP, am I way over my head? And would PHP would well with PayPal? again, would that be a huge project?
  24. I am making a website and I am planning on having an indicator that shows your on whichever page, when your on that page. But as far as I can tell that includes putting id tags on each element on each page. So is it possible to build this menu using XML? I can't find a way to do it. Please and thank you??HTML: <div class="menu"> <ul> <li><a href="Collections.html">Collections</a></li> <li><a href="Bracelets.html">Bracelets</a></li> <li><a href="Rings.html">Rings</a></li> <li><a href="Home.html">Home</a></li> <li><a href="Sets.html">Sets</a></li> <li><a href="Earrings.html">Earrings</a></li> <li><a href="Coming Soon!.html">Coming Soon!</a></li> </ul> </div> CSS: .menu { font-family: “Lucida Sans Unicode”, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; line-height: 1.8em; position: absolute; left: 50%; margin-left: -338px; top: 30px; } .menu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }.menu li { display: inline; padding: 6px; } .menu a { text-decoration:none; color: #B2B5BF; } .menu a:hover { border: 1px solid; padding-top: 5px; border-bottom: none; border-left: none; border-right: none; border-top-right-radius: 2em; border-top-left-radius: 2em; color: #808184; }a.menu:link, a.menu:visited { border: 1px solid; padding-bottom: 5px; border-top: none; border-left: none; border-right: none; border-top-right-radius: 2em; border-top-left-radius: 2em; color: #808184; }
×
×
  • Create New...