Jump to content

cjy8s@yahoo.com

Members
  • Posts

    24
  • Joined

  • Last visited

Posts posted by cjy8s@yahoo.com

  1. 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?

  2. 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!!

  3. I guess I should have made my description a little more clear :sorry: , 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!!

  4. <!--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!

    • Like 1
  5. 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?

  6. 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!

  7. 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!!

  8. 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?

  9. 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!

  10. 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?

  11. 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...