2 Replies - 557 Views - Last Post: 13 February 2013 - 07:35 AM

#1 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

stop inheritance working

Posted 12 February 2013 - 05:07 AM

Hi Guys,

I'm practicing CSS and Javascript and I have amended a game I found online with the help of fellow members.

now I wanted to allow a user to change the background of the webpage, so I found a simple Jquery script online to allow me to do this.

first off I wanted to float the div to the right, but the div overflowed the main div, so I gave it a margin and made it float outside the divs below for the meantime.

here is a picture to explain:

Posted Image

Uploaded with ImageShack.us

why hasn't it just shifted accross? why is it overflowing?

then I wanted to change the font colour but css wouldn't allow me, unless I used an internal stylesheet (I guess this is to do with inheritance?)

I tried to create a class, the jquery script said if making a class use this:

$("csschanger.link").attr("href",$(this).attr('rel'));


but then my javascript didn't work, and the inheritance was still there. I would really like to know why this was and how to counteract it (is it .csschanger a, I read that somewhere).

here is the code in full:

<style type="text/css">
    
    .acard { 
        font-size: 50px;
    }
	
	    #csschanger { 
		
        float: right;
		text-decoration:none;
		margin-top: 50px;
		height: 90px;
		width:150px;
		padding: 5px;
		
    }
	
	 #csschanger h1 { 
	color:#FFFFFF;
	font-size: 10pt;
	}
	
	#csschanger a {
	text-decoration:none;
	}
	
</style>
<script>

chosencards = [];
kings = 0;

function pickCard(){
	numbers = [
		["A", "Waterfall"],
		["2", "Choose! (Pick someone to drink!)"],
		["3", "Me! (You have to drink!)"],
		["4", "W***e! (All Girls Drink)"],
		["5", "Thumbmaster"],
		["6", "D***s! All Guys Drink"],
		["7", "Toilet Card"],
		["8", "Mate"],
		["9", "Rhyme"],
		["10", "Categories"],
		["J", "Make a rule!"],
		["Q", "Questionmaster"],
		["K", "Add some drink to the middle pint!"]
	];
	suits = [
		["&hearts;", "#FF0000"],
		["&diams;", "#FF0000"],
		["&clubs;", "#000"],
		["&spades;", "#000"]
	];
	
		var number = Math.floor(Math.random()*numbers.length);
		var suit = Math.floor(Math.random()*suits.length);
		if(chosen(number + "" + suit)){
			pickCard();
		}else{
			$('#selection').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span>");
			$('#chosen').html("<span class='acard' span style='color:" + suits[suit][1] + "'>" + numbers[number][0] + suits[suit][0] + "</span> &nbsp; " + $('#chosen').html());
			$('#meaning').html(numbers[number][1]);
			chosencards.push(number + "" + suit);
			if(numbers[number][0] == 'J'){
					$('#rules').html($('#rules').html() + "+ " + prompt("Please enter a rule") + "<br />");
			}
			if(numbers[number][0] == '5'){
					alert('THUMBMASTER');
			}
		}
		if(chosencards.length == numbers.length*suits.length){
			$('#newcard').replaceWith($("<div>").html("You have ran out of cards!"));
		}
}

function chosen(x){
	var a = false;
	for(i = 0; i < chosencards.length; i++){
		if(x == chosencards[i]){
			a = true; 
			break;
		}
	}
	return a
}
$(document).keypress(function(e){
	if(e.which == '13' || e.which == '32'){
		pickCard();
	}
});
$(document).ready(function(){
	$('#newcard').click(function(){
		pickCard();
	});
});
</script>
<script>
$(document).ready(function() { 
	$("#csschanger a").click(function() { 
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});
</script>

</head>

<body>
<div id="wrapper">  
<div id="main">
<p>You have just picked up:</p>
<div id='selection'></div>
<br />

<p>You have already picked:</p>
<div id='chosen'></div>
<br />

<p>This card means:</p>
<div id='meaning'></div>
<br /><br />

<p>Current Rules:</p>
<div id='rules'></div>
<br /><br />

<a href='#' id='newcard'>Pick a Card</a><br/><br/>


<a href='Ringoffire.mp3' target='blank'>Play the song!</a><br/><br/>

<a href='rules.html' target='blank'>See the Rules</a><br/>

<div id="csschanger">
	<h1>Choose Background:</h1>
	
	<a href="" rel="ringoffire.css"> <img src="images/greenicon.jpg" width="24" height="24"</a>
	<a href="" rel="ringoffire2.css"> <img src="images/redicon.jpg"width="24" height="24"</a>
	<a href="" rel="ringoffire3.css"> <img src="images/blueicon.jpg"width="24" height="24"</a>
	<a href="" rel="ringoffire4.css"> <img src="images/blackicon.jpg"width="24" height="24"</a>
	<a href="" rel="ringoffire5.css"> <img src="images/pinkicon.jpg"width="24" height="24"</a>
</div>

<div id="news">
</div>
<div id="sidebar">

</div>
</div>

</body>
</html>




thanks in advance.

This post has been edited by Addio569: 12 February 2013 - 05:25 AM


Is This A Good Question/Topic? 0
  • +

Replies To: stop inheritance working

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3522
  • View blog
  • Posts: 12,022
  • Joined: 12-December 12

Re: stop inheritance working

Posted 12 February 2013 - 10:24 AM

The parent-container of floated elements can lose their height. Add overflow: hidden; to the parent's css, although there are other methods to fix this.

csschanger is an ID and I assume that you are targeting A-links within this? So,

$('#csschanger a')
(the same as your css rule.)
Was This Post Helpful? 0
  • +
  • -

#3 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: stop inheritance working

Posted 13 February 2013 - 07:35 AM

View Postandrewsw, on 12 February 2013 - 10:24 AM, said:

The parent-container of floated elements can lose their height. Add overflow: hidden; to the parent's css, although there are other methods to fix this.

csschanger is an ID and I assume that you are targeting A-links within this? So,

$('#csschanger a')
(the same as your css rule.)


I'll try that thanks. EDIT: I tried the overflow: hidden on my main div but it still didn't work. here is the css:
* BASIC */

body {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px;
	background-image:url('../images/green.jpg');
	Background-attachment: fixed;
	
	}
	
 p, ul, ol {
	font-size: 20px;
	margin: 0px;
	padding: 0px;
}

h1 {

color:#FFFFFF;
}

a img { 
	border: none;
}

/* LAYOUT */



/* MAIN */

#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
padding: 10px;
border: 2px solid #000000;
background: #FFFFFF;

#main {

display: inline;
float: left;
width: 600px;

margin-left: 160px;
padding-top: 10px;
border-left: 1px dashed #999999;

}

#main a {
	font-size: 30pt;
	text-decoration: none;
	border-bottom: 1px dashed #B2F511;
	color: #2E76C9
}

#main p {
	font-size: 20px;
	margin-bottom: 5px;
	
}

#sidebar {
float: right;
width: 160px;
margin-left: -590px;
}

#news {
float: left;
width: 160px;
margin-left: -701px;
}


yes I was targeting the A-links, and it works but how would I go about targeting classes?

also why is it that only internal css seems to work and not external?

thanks

This post has been edited by Addio569: 13 February 2013 - 07:52 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1